tablas - script type= text/javascript src=

¿Cómo pasar datos de script de contenido a nivel de página?

Question

Estoy inyectando todo mi código js en la página principal, pero necesita imágenes para ui y otras cosas, que solo se pueden importar con la ayuda de chrome.extension.getUrl y solo se pueden llamar desde content-script, así que he encontrado toneladas de consejos sobre cómo pasar los datos a la página de contenido, y nada acerca de cómo restituir los datos, ¿es posible?

Mi código ahora se ve así:

mi código js, ​​que se inyectará con otro código:

var Content = {};
$(document).contentReady = function(content) {
    Content = content;
    $(document).ready(function () {/*cool stuff here, that require content*/});
}
var event = new CustomEvent(''LoadContent'');
window.dispatchEvent(event);

script de contenido:

document.querySelector(''head'').appendChild(jsCode);
window.addEventListener("LoadContent", function(evt) {
    var content =
    {
        data:   "url(" + chrome.extension.getURL(''content.smth'') + ")"
    };
    document.contentReady(content);
}, false);

Y, obviamente, obtengo document.contentReady is not a function pero declarar la función en el documento fue el único (!) Consejo sobre cómo pasar los datos de la secuencia de comandos de contenido después de aproximadamente 2 horas de búsqueda en Google.

Answer 1

Puede pasar datos JS a la página creando una nueva etiqueta de script. Por ejemplo:

function injectScript(code) {
    var body = document.getElementsByTagName(''body'')[0];
    var s = document.createElement(''script'');
    s.innerHTML = code;
    body.appendChild(s);
}
injectScript(''var foo = 2;'');

Entonces, para su ejemplo particular, debería poder hacer:

injectScript(''document.contentReady({data: url('' + blahblah + ''})'');

No es bonito (¿qué ocurre cuando trabajas sobrescribiendo guiones de contenido?) Pero funciona.

Answer 2

Content Scripts no comparten objetos de ventana con scripts normales en la página. Ambos trabajan en contextos diferentes.

En su caso, está registrando un detector de eventos en la ventana y escuchando el evento en otro contexto (ventana). Por lo tanto, nunca se llamará al oyente de su evento.

Sin embargo, hay un enfoque alternativo que puedo ver para comunicarme entre script de contenido y script normal usando MutationObserver .

Idea

1. Defina un nodo con algún Id debajo del cual creará subnodos correspondientes a un evento.
2. Registre Mustation Observer en su script.
3. Desde el script de contenido, agregue los nodos con datos como data-* api.

Ejemplo de implementación

Script de contenido

var submitEvent = function(category, action, label) {
  var eventObserverPlaceholder = document.getElementById(''events-observer-placeholder''),
    $eventEl = $(''<span></span>'').attr({
      ''data-category'': category,
      ''data-action'': action,
      ''data-label'': label
    });

  eventObserverPlaceholder.appendChild($eventEl.get(0));
};

Script normal para registrar Mutation Observer:

RQ.Methods.addObserverForEvents = function(targetNode) {
  var observer = new MutationObserver(RQ.Methods.handleMutationList);

  // Notify me when a new child is added
  var observerConfig = {
    attributes: false, 
    childList: true, 
    characterData: false 
  };

  observer.observe(targetNode, observerConfig);
  return observer;
};

RQ.mutationObserver = RQ.Methods.addObserverForEvents(document.getElementById(''events-observer-placeholder''));

Campo de golf

1. https://davidwalsh.name/mutationobserver-api
2. https://developer.mozilla.org/en/docs/Web/API/MutationObserver

Ejemplo de trabajo:

He utilizado el mismo enfoque en Requestly Chrome Extension para enviar eventos a Google Analytics.

1. Script de contenido: https://github.com/requestly/chrome-extension/blob/master/src/Shared/utils.js#L26
2. Script normal: https://github.com/requestly/web/blob/gh-pages/js/scripts/tracker.js#L35

Answer 3

Nada le impide hacer que la comunicación basada en CustomEvent bidireccional, y puede pasar datos con la propiedad detail :

// Page script
window.addEventListener(''RecieveContent'', function(evt) {
  // do something cool with evt.detail
});
var event = new CustomEvent(''LoadContent'');
window.dispatchEvent(event);

// Content script
window.addEventListener(''LoadContent'', function(evt) {
  content = /* ... */
  var event = new CustomEvent(''RecieveContent'', {detail: content});
  window.dispatchEvent(event);
});    

Aquí puede encontrar una respuesta más detallada.

Sin embargo, debe preguntarse si necesita incluso el script de nivel de página para consultar datos, ya que controla completamente cuando se inyecta. Puede usar un enfoque unidireccional después de asegurarse de que el código se haya ejecutado:

// Page script
window.addEventListener(''RecieveContent'', function(evt) {
  // do something cool with evt.detail
});    

// Content script
jsCode.onload = function() {
  // This fires after the page script finishes executing
  content = /* ... */
  var event = new CustomEvent(''RecieveContent'', {detail: content});
  window.dispatchEvent(event);
}
document.querySelector(''head'').appendChild(jsCode);