20

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

En mi guión contenido, quiero cargar la API de Facebook Graph:

$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, no parece que el script añadido a 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?

+0

¿Hay alguna razón no se puede simplemente incluir el Facebook JS como una de las secuencias de comandos de contenido? – sdleihssirhc

+0

Lo intenté, pero ni siquiera puedo cargar el script en la ventana de extensión. Se presenta este error: No se pudo cargar la extensión desde '/Users/.../extentionfolder/'. No se pudo cargar javascript 'https://connect.facebook.net/en_US/all.js' para el script de contenido. – Gezim

+0

Esto se debe a que proporciona una referencia externa, pero Chrome espera que el script sea local. No estoy muy familiarizado con la API Graph de Facebook; ¿Qué tan factible es guardar una copia local con su extensión? – sdleihssirhc

Respuesta

38

La cuestión es que el código JavaScript dentro de las secuencias de comandos de contenido se ejecuta en su propio entorno de espacio aislado y sólo tiene acceso a otra JavaScript que se cargó en una de dos maneras:

A través de la manifest:

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

o el uso de Programmatic injection:

/* 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 en efecto 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, luego pass a message de nuevo al fondo página para cargar el script de Facebook para que esté accesible para el JavaScript que se carga en los scripts de contenido.

+2

hola, estaba bajo la impresión de que tiene que hacer esto o algo ... http://developer.chrome.com/extensions/contentSecurityPolicy.html .... pero esto funcionaría. Ahora. 2013. –

+0

Esto ya no es correcto según https://developer.chrome.com/extensions/contentSecurityPolicy#resourceLoading –

+0

esto carga un script en la página de contenido, pero estoy buscando cargar un script en la extensión –

5

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://stackoverflow.com/a/36645710/720665

Cuestiones relacionadas