Lo que ocurre es que los content scripts se ejecutan en una caja de arena, y aunque pueden interactuar con el DOM de la página, hay ciertas cosas que no, como la variable window
.
Te traduzco (y adapto un poco a tu pregunta) la respuesta que dio Rob W en StackOverflow:
Los content scripts, se ejecutan en un entorno aislado. Esto significa que si quieres acceder a todo lo que hay en el entorno top
, tienes que inyectar tu código JavaScript en la página misma.
Eso sí, cuando quieras usar una de las API de Chrome (chrome.*
) en el script, tendrás que implementar un event handler especial, como se describe en esta respuesta: Chrome extension - retrieving Gmail's original message.
De lo contrario, si no tienes que usar las APIs de Chrome, te recomiendo que inyectes todo tu código JavaScript mediante una etiqueta <script>
dinámica:
Tabla de contenidos
- Método 1: Inyectar otro archivo
- Método 2: Inyectar código embebido
- Método 2b: Usando una función
- Método 3: Usando un evento en línea
- Valores dinámicos en el código inyectado
Método 1: Inyectar otro archivo
Este es el mejor método y el más fácil cuando tienes un montón de código. Incluye tu código JavaScript en un archivo, por ejemplo script.js
. Después haz que tu content script sea lo siguiente (explicado en una respuesta en StackOverflow de la pregunta: Google Chrome “Application Shortcut”: How to auto-load JavaScript?):
var s = document.createElement('script');
// Para que esto funcione deberías añadir "script.js" a web_accessible_resources en manifest.json
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
Nota importante: Si usas este método, tienes que añadir el archivo script.js
a la sección web_accessible_resources
(ejemplo). Si no lo haces, Chrome NO te dejará cargar tu script y mostrará el siguiente error en la consola:
Denying load of chrome-extension://[ID_DE_LA_EXTENSIÓN]/script.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Método 2: Inyectar código embebido
Este método es útil si quieres ejecutar rápidamente un pequeño trozo de código (véase también: How to disable facebook hotkeys with Chrome extension? (en inglés)).
var actualCode = `// El código aquí
// Si quieres usar una variable, usa $ y claudators.
// Por ejemplo, para usar un número aleatorio fijo:
var someFixedRandomValue = ${ Math.random() };
// Nota: No insertes variables inseguras de esta manera, mira abajo
// en la sección "Valores dinámicos en el código inyectado"
`;
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Nota: Las plantillas literales están soportadas a partir de la versión 41 de Chrome. Si quieres que tu extensión funcione en Chrome 40 y anteriores, usa:
var actualCode = ['/* El código aquí. Ejemplo: */' + 'alert(0);',
'// ¡Cuidado! Este array se tiene que unir',
'// usando una línea nueva. Si no, si faltan',
'// puntos y comas o hay comentarios de una',
'// sola línea (//) tu código estará patas arriba',
'// y no funcionará. ----->'].join('\n');
Método 2b: Usando una función
Para un trozo largo de código, poner entre comillas la cadena de caracteres no es muy factible. En vez de usar un array se puede usar una función convertida en cadena de caracteres:
var actualCode = '(' + function() {
// Todo el código se ejecuta en el scope local.
// Por ejemplo, lo siguiente no sobreescribe el método global `alert`
var alert = null;
// Para sobreescribir una variable global, prefijar `window`:
window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Este método funciona porque el operador +
usado con cadenas de caracteres y una función convierte todos los objetos a una cadena de caracteres. Si vas a usar esta función más de una vez, sería inteligente crear una función para evitar la repetición de código. Una implementación podría ser la siguiente:
function inyectarScript(func) {
var actualCode = '(' + func + ')();'
// ...
}
inyectarScript(function() {
alert("Script inyectado");
});
Nota: Como la función está serializada, el scope (alcance) original y todas las propiedades aplicadas, se pierden.
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Salida de la consola: "undefined"
Método 3: Usando un evento en línea
A veces, quieres ejecutar código inmediatamente. Por ejemplo, para ejecutar código antes de que se cree el elemento <head>
, puedes ejecutar síncronamente JavaScript usando detectores de eventos. Las cadenas de caracteres están generadas de la misma manera que en el anterior método, así que con el fin de simplificarlo, asumo que la cadena de caracteres del código ya se da como la variable actualCode
(véase el método 2/2b).
var actualCode = '// Código de ejemplo \n' +
'console.log(document.documentElement.outerHTML);';
document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');
Nota: Este método asume que no hay más detectores de eventos globales que detectan el evento reset
. Si los hay, también puedes escoger otro de los eventos globales. Abre la consola de JavaScript (F12), escribe document.documentElement.on
, y escoge otro de los eventos disponibles.
Valores dinámicos en el código inyectado
Ocasionalmente, necesitas pasar una variable arbitraria a la función inyectada. Por ejemplo:
var saludo = "Hola, soy ";
var nombre = "Rob";
var scriptToInject = function() {
alert(saludo + nombre);
};
Para inyectar este código, necesitas pasar las variables como argumentos a la función anónima. ¡Asegúrate de implementarlo correctamente! Lo siguiente NO funcionará:
var scriptToInject = function (saludo, nombre) { ... };
var actualCode = '(' + scriptToInject + ')(' + saludo + ',' + nombre ')';
// Lo anterior funcionará para números y _verdadero/falso, pero no para cadenas de caracteres.
// Para saber por qué, echa un vistazo a la resultante cadena de caracteres:
var actualCode = "(function(saludo, nombre) {...})(Hola, soy Rob)";
// ¡No es una cadena de caracteres literal! ^^^^^^ ^^^
La solución es usar JSON.stringify
antes de pasar el argumento. Por ejemplo:
var actualCode = '(' + function(saludo, nombre) { ...
} + ')(' + JSON.stringify(saludo) + ',' + JSON.stringify(nombre) + ')';
Si tienes múltiples variables, vale más la pena usar JSON.stringify
una vez, para mejorar la legibilidad, por ejemplo:
// ...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';