He estado trabajando en una extensión (Google Chrome solo por ahora) que se supone que agregará funciones al entorno de aprendizaje en línea de mi escuela. Este sitio web (que en realidad no está administrado por la escuela) usa Angular para el front-end.

Para la extensión estoy usando Typescript , con Parcel . Los scripts que se ejecutan en las páginas web son scripts de contenido.

Estoy tratando de agregar un elemento a la barra de menú que está a la izquierda. Esto es lo que he intentado:

• Insertar HTML puro en el elemento ul , pero esto rompe toda la barra de menú y el usuario no puede usarla después.

• Use Angular (instalado a través de NPM) en el script de contenido para encontrar el alcance del elemento de la barra de menú, luego agregue la nueva opción (la barra de menú es una matriz) y luego aplíquela. Aunque esto también parece no funcionar, así:

  Comportamiento esperado (usando la consola del navegador)

   let target = document.getElementsByClassName("main-menu")[0]; let menu = angular.element(target); console.log(menu); >>> p.fn.init [ul.main-menu, context: ul.main-menu]

  Comportamiento recibido (del script de contenido)

   let target = document.getElementsByClassName("main-menu")[0]; let menu = angular.element(target); console.log(menu); >>> p.fn.init [ul.main-menu]

  La ausencia del contexto me hace pensar que mi script de contenido y el script de la página web no se ejecutan en el mismo ámbito. ¿Es eso correcto? Tampoco puedo usar el método .scope() en el script de contenido.

Este es mi manifest.json para el complemento. Por favor hagamelo saber

 { "name": "Magister Plus", "description": "TBD", "version": "0.0.1", "manifest_version": 3, "permissions": [ "activeTab", "scripting", "tabs" ], "background": { "service_worker": "./background/background.js" }, "host_permissions": [ "https://*.magister.net/*" ], "content_scripts": [ { "matches": ["https://*.magister.net/*"], "js": ["./content/domain.js"] }, { "matches": ["https://*.magister.net/magister/#/vandaag"], "js": ["./content/vandaag.js"] } ], "action": {} }

Ya no estoy seguro de qué hacer aquí, ya que no estoy muy familiarizado con Angular.js.

¡Gracias por cualquier ayuda!