extension - habilitar javascript en chrome en windows
¿Se puede modificar el objeto de la ventana desde una extensión de Chrome? (5)
Me gustaría hacer una extensión de Chrome que proporcione un nuevo objeto dentro de la window . Cuando se ve una página web en un navegador con la extensión cargada, me gustaría que window.mything esté disponible a través de Javascript. El objeto window.mything tendrá algunas funciones que window.mything en la extensión, y estas funciones deberían poder llamarse desde console.log o cualquier archivo Javascript cuando la página se visualice en un navegador con la extensión habilitada.
Pude inyectar con éxito un archivo Javascript en la página usando un script de contenido :
var s = document.createElement("script");
s.src = chrome.extension.getURL("mything.js");
document.getElementsByTagName("head")[0].appendChild(s);
mything.js se ve así:
window.mything = {thing: true};
console.log(window);
Cada vez que se carga una página, veo el objeto de la window completa como espero que esté en la consola. Sin embargo, no puedo interactuar con el objeto window.mything desde la consola. Parece que el script inyectado no ha modificado realmente el objeto de la window global.
¿Cómo puedo modificar el objeto de window global desde una extensión de Chrome?
Como han señalado otros, los scripts de contexto no se ejecutan en el mismo contexto que el de la página, por lo tanto, para acceder a la window correcta, debe insertar un código en la página.
Aquí está mi opinión:
function runEmbedded() {
// Put here whatever your script needs to do. For example:
window.foo = "bar";
}
function embed(fn) {
const script = document.createElement("script");
script.text = `(${fn.toString()})();`;
document.documentElement.appendChild(script);
}
embed(runEmbedded);
Limpio y fácil de usar. Independientemente de lo que necesite para ejecutar en el contexto de la página, póngalo en runEmbedded() (puede llamarlo como prefiera). La función embed() se encarga de empaquetar su función y enviarla para que se ejecute en la página.
Content Scripts puede invocar métodos de window que luego se pueden usar para mutar el objeto de la window . Esto es más fácil que la inyección de etiquetas <script> y funciona incluso cuando <head> y <body> aún no se han analizado (por ejemplo, cuando se usa run_at: document_start ).
// In Content Script
window.addEventListener(''load'', loadEvent => {
let window = loadEvent.currentTarget;
window.document.title=''You changed me!'';
});
El content_script de una extensión de Chrome se ejecuta dentro de su propio contexto, que está separado de la ventana. Sin embargo, puede inyectar un script en la página para que se ejecute en el mismo contexto que la ventana de la página, de esta manera: Extensión de Chrome: recuperación de una variable global de la página web
Pude llamar a métodos en el objeto de la ventana y modificar las propiedades de la ventana al agregar esencialmente un script.js al DOM de la página:
var s = document.createElement(''script'');
s.src = chrome.extension.getURL(''script.js'');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.remove();
};
y creando escuchas de eventos personalizadas en ese archivo de script inyectado:
document.addEventListener(''_my_custom_event'', function(e) {
// do whatever you''d like! Like access the window obj
window.myData = e.detail.my_event_data;
})
y despachando ese evento en el content_script:
var foo = ''bar''
document.dispatchEvent(new CustomEvent(''_save_OG_Editor'', {
''detail'': {
''my_event_data'': foo
}
}))
o viceversa; distribuya eventos en script.js y escúchelos en el content_script de su extensión (como ilustra bien el enlace anterior).
Solo asegúrese de agregar su script inyectado dentro de los archivos de su extensión, y agregue la ruta del archivo de script a su manifiesto dentro de "web_accessible_resources" o recibirá un error.
Espero que ayude a alguien / (• ◡ •) /
He estado jugando con esto. Descubrí que puedo interactuar con el objeto de ventana del navegador envolviendo mi javascript en una llamada window.location =.
var myInjectedJs = "window.foo=''This exists in the /'real/' window object'';"
window.location = "javascript:" + myInjectedJs;
var myInjectedJs2 = "window.bar=''So does this.'';"
window.location = "javascript:" + myInjectedJs2;
Funciona, pero solo para la última instancia de window.location que se está configurando. Si accede al objeto de la ventana del documento, tendrá una variable "barra" pero no "foo"
No puedes, no directamente. De la documentación de los scripts de contenido :
Sin embargo, los scripts de contenido tienen algunas limitaciones. Ellos no pueden:
- Use chrome. * APIs (excepto las partes de chrome.extension)
- Utilizar variables o funciones definidas por las páginas de su extensión.
- Use variables o funciones definidas por páginas web o por otros scripts de contenido
(énfasis añadido)
El objeto de window que ve el script de contenido no es el mismo objeto de window que ve la página.
Sin embargo, puede pasar mensajes a través del DOM usando el método window.postMessage . Tanto su página como el script de contenido escuchan el evento del mensaje , y cada vez que llame a window.postMessage desde uno de esos lugares, el otro lo recibirá. Hay un ejemplo de esto en la página de documentación de "Scripts de contenido".
Editar: Podrías agregar algunos métodos a la página inyectando un script desde el script de contenido. Sin embargo, aún no podría comunicarse con el resto de la extensión sin usar algo como postMessage , pero al menos podría agregar algunas cosas a la window la página.
var elt = document.createElement("script");
elt.innerHTML = "window.foo = {bar:function(){/*whatever*/}};"
document.head.appendChild(elt);