how - Cargando Javascript externo en la extensión google chrome

how to do a chrome extension

Question

Estoy escribiendo una extensión de Google Chrome que manipula la página actual (básicamente, agrega un botón).

En mi script de contenido, quiero cargar la API Graph de Facebook:

$fbDiv = $(document.createElement(''div'')).attr(''id'', ''fb-root'');
$fbScript = $(document.createElement(''script'')).attr(''src'', ''https://connect.facebook.net/en_US/all.js'');
$(body).append($fbDiv);
$(body).append($fbScript);

console.log("fbScript: " + typeof $fbScript.get(0));
console.log("fbScript parent: " + typeof $fbScript.parent().get(0));
console.log("find through body: " + typeof $(body).find($fbScript.get(0)).get(0));

Sin embargo, el script no parece agregarse al body . Aquí está el registro de la consola:

fbScript: object
fbScript parent: undefined
find through body: undefined

¿Alguna idea sobre lo que estoy haciendo mal?

Answer 1

El problema es que el JavaScript dentro de los scripts de contenido se ejecuta en su propio entorno de espacio aislado y solo tiene acceso a otro JavaScript que se cargó de una de estas dos maneras:

A través del manifest :

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "js": ["https://connect.facebook.net/en_US/all.js"]
    }
  ],
  ...
}

O usando la inyección programática :

/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,
                       {file:"https://connect.facebook.net/en_US/all.js"});
});

Asegúrese de actualizar sus permisos de manifiesto:

/* in manifest.json */
"permissions": [
    "tabs", "https://connect.facebook.net"
 ], 

Agregar una etiqueta de script evaluará el JavaScript en el contexto de la página que lo contiene, fuera del entorno limitado de JavaScript al que tiene acceso JavaScript.

Además, dado que el script FB requiere que "fb-root" esté en el DOM, probablemente necesitará usar el enfoque programático para poder actualizar primero el DOM con el elemento y luego pasar un mensaje a la página de fondo para cargue el script de Facebook para que sea accesible para el JavaScript que se carga en las secuencias de comandos de contenido.

Answer 2

Las extensiones de Google Chrome ya no permiten inyectar código externo directamente, sin embargo, todavía puede descargar el código con una llamada Ajax y alimentarlo al inyector como si fuera un bloque de código.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $.get("http://127.0.0.1:8000/static/plugin/somesite.js", function(result) {
        chrome.tabs.executeScript(tabs[0].id, {code: result});
    }, "text");
});

fuente: https://.com/a/36645710/720665