3

En la siguiente imagen:

Cuadros de la consola de JavaScript de Google Chrome.

Se puede ver los siguientes frames:

rp (rpframe)
op (check_session)
top
chrome-extension://ij..akgmfblomjnbfdcnoofoefjc

Tengo un problema en JavaScript, estoy intentando crear una extensión de Google Chrome, voy a top y creo una fecha llamada variable.

var variable = new Date()

Pero al cambiar desde el frame top a chrome-extension://..., no puedo acceder a la fecha variable.

¿Es posible acceder al valor de variable desde chrome-extension://...?

Yo, pensando que hay una variable que contiene todas las variables del cuadro top, intenté acceder a cosas como esta, window.variable, parent.variable, pero no funcionó.

El manifest.json de mi extensión es algo como lo siguiente:

{
    "content_scripts": [ {
    "all_frames": false, // Esto hace que mi código se ejecute solo en top.
        "js": [
            // Librería que hace JSON.stringify a un objeto recursivo.
            "JSON pruned.js",

            // Mi programa.
            "programa.js",
            // ...
        ],
        "matches": [ "*://*.ejemplo.com/*" ],
        "run_at": "document_end"
    } ],
    "description": "Ejemplo.",
    "homepage_url": "http://ejemplo.com/index.html",
    "icons": {
        // ...
    },
    "browser_action": {
        "default_icon": {
            // ...
        }
    },
    "manifest_version": 2,
    "minimum_chrome_version": "32",
    "name": "Ejemplo",
    "permissions": [ "storage", "http://*/", "https://*/" ],
    "update_url": "https://clients2.google.com/service/update2/crx",
    "version": "1"
}
0

2 respuestas 2

7

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]) + ')';
0
1

Frente a este problema tengo una solución un tanto incómoda, lo malo es que requiere que el usuario mueva el mouse, ya que usa onmousemove, en este caso el intermediario es localStorage.

La solución es esta, en HTML pongo esto.

<html>
    <body>
    </body>
</html>

En programa.js pongo esto, hay que tener en cuenta que puedo acceder al HTML, pero de forma no directa a las variables.

function función_1(funciones)
{
    variable_storage=JSON.stringify(variable)
    localStorage.setItem("variable_storage",variable_storage)
}
function intentando_acceder()
{
    var acceso_fecha
    try
    {
        acceso_fecha=localStorage.getItem("variable_storage")
    }
    catch(e)
    {
            setTimeout(intentando_acceder,1000)
    }
    if(acceso_fecha!=null)
    {
            alert(acceso_fecha)
    }
}
function intercambio()
{
    document.body.setAttribute("onmousemove","("+función_1+")()")
    setTimeout(intentando_acceder,1000)
}
intercambio()
1
  • 1
    @Mariano La extensión ejecuta el programa.js, entonces muestro el valor de la fecha variable al mover el mouse en el body, primero meto la variable en localStorage y luego el body lo lee de ahí.
    – user13558
    el 11 sep. 2016 a las 9:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.