tiempo - ver variables en consola javascript

Extensión de Chrome: recuperación de la variable global de la página web

Question

Estoy trabajando en una extensión para Chrome. Deseo analizar el contenido del mensaje de Gmail "original" (el mensaje actualmente visto).

Traté de utilizar jQuery.load () de la siguiente manera

$(windows).load(function() { alert(GLOBALS); });

y colocarlo en el script de contenido, pero tampoco funciona. Estoy usando las herramientas de desarrollador de Chrome, que devuelve el siguiente error en la invocación de la alert(GLOBALS);

Uncaught ReferenceError: GLOBALS no está definido

Aunque, al usar la consola de herramientas de los desarrolladores, escribir en la consola GLOBALS devuelve una matriz.

¿Alguna pista sobre cómo acceder a GLOBALS desde el script de contenido?

Answer 1

Hay una nueva API para que las páginas web se comuniquen de forma segura y sin ningún tipo de efecto secundario (window.postMessage puede tener otros oyentes) en el script de contenido.

"Desde la página web, use las API runtime.sendMessage o runtime.connect para enviar un mensaje a una aplicación o extensión específica"

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
function(response) {
if (!response.success)
handleError(url);
});

"Desde su aplicación o extensión, puede escuchar los mensajes de las páginas web a través de runtime.onMessageExternal o runtime.onConnectExternal APIs, similar a la mensajería de extensión cruzada. Solo la página web puede iniciar una conexión. [...]"

(de http://developer.chrome.com/extensions/messaging.html ) Esto solo está disponible en el canal dev de Chrome, pero parece que estará en la próxima versión más o menos.

No me preguntes cómo funciona esto, parece muy confuso. ¿Cómo diablos se define chrome.runtime en la página web? ¿Qué pasa si el guión ya definió esa variable por alguna razón? Tampoco pude encontrar el informe de errores de cromo para ver el historial del desarrollo de esta función.

Answer 2

Tuve un enfoque ligeramente diferente basado en las páginas html accesibles de su extensión.

Agregue su página al manifiesto:

"web_accessible_resources": ["variables.html"]

Cree su página (aquí, variables.html) y extraiga los datos del contenido (es decir, window.contentVar):

<script type="text/javascript">
$("#my-var-name").text(window["contentVar"]);
</script>
<div id="my-var-name" style="display: none;"></div>

Acceda desde el JavaScript de su extensión:

var myVarName = $("#my-var-name").text();

Answer 3

Una solución más moderna para comunicarse entre una extensión chrome content_script y javascript en la página sería usar la API html5 postMessage. Todos los mensajes enviados a "ventana" son visibles tanto desde el javascript en la página web como desde el content_script de la extensión.

La extensión es content_script.js:

window.addEventListener(''message'', function(event) {
console.log(''content_script.js got message:'', event);
// check event.type and event.data
});
setTimeout(function () {
console.log(''cs sending message'');
window.postMessage({ type: ''content_script_type'',
text: ''Hello from content_script.js!''},
''*'' /* targetOrigin: any */ );
}, 1000);

El javascript que se ejecuta en la página web:

window.addEventListener(''message'', function(event) {
console.log(''page javascript got message:'', event);
});
setTimeout(function() {
console.log(''page javascript sending message'');
window.postMessage({ type: ''page_js_type'',
text: "Hello from the page''s javascript!"},
''*'' /* targetOrigin: any */);
}, 2000);

También vea http://developer.chrome.com/extensions/content_scripts.html#host-page-communication

Answer 4

Los scripts de contenido se ejecutan en un entorno aislado. Para obtener acceso a las propiedades globales (de la window de la página), debe inyectar un nuevo elemento <script> o utilizar detectores de eventos para pasar datos.

Vea esta respuesta, por ejemplo, sobre cómo inyectar un elemento <script> en el contexto de la página.

Ejemplo

contentscript.js ( "run_at": "document_end" en manifiesto):

var s = document.createElement(''script'');
s.src = chrome.extension.getURL(''script.js'');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.remove();
};
// Event listener
document.addEventListener(''RW759_connectExtension'', function(e) {
// e.detail contains the transferred data (can be anything, ranging
// from JavaScript objects to strings).
// Do something, for example:
alert(e.detail);
});

script.js : ubicado en el directorio de extensión, se inyectará en la página misma:

setTimeout(function() {
/* Example: Send data from the page to your Chrome extension */
document.dispatchEvent(new CustomEvent(''RW759_connectExtension'', {
detail: GLOBALS // Some variable from Gmail.
}));
}, 0);

Como este archivo se está cargando a través de una extensión chrome: URL desde el DOM, "script.js" debe agregarse a la sección web_accessible_resources del archivo de manifiesto. De lo contrario, Chrome rechazará cargar el archivo de script.

Debe ejecutar la menor lógica posible en la página web y manejar la mayor parte de su lógica en el script de contenido. Esto tiene múltiples razones. En primer lugar, cualquier script insertado en la página se ejecuta en el mismo contexto que la página web, por lo que la página web puede (deliberada o inadvertidamente) modificar los métodos JavaScript / DOM de tal forma que su extensión deje de funcionar. En segundo lugar, el script de contenido tiene acceso a funciones adicionales, como un subconjunto limitado de las API chrome. * Y las solicitudes de red de origen cruzado (siempre que la extensión haya declarado permisos para ellas).