Caricamento javascript esterno nell’estensione google chrome

Sto scrivendo un’estensione Google Chrome che manipola la pagina corrente (in pratica aggiunge un pulsante).

Nel mio script di contenuto, voglio caricare l’API di 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)); 

Tuttavia, lo script non sembra aggiunto al body . Ecco il log della console:

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

Qualche idea su cosa sto facendo male?

Il problema è che il JavaScript all’interno degli script di contenuto viene eseguito nel proprio ambiente sandbox e ha solo accesso ad altri JavaScript caricati in due modi:

Via il manifest :

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

O utilizzando l’ iniezione programmatica :

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

Assicurati di aggiornare le tue autorizzazioni manifest:

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

L’aggiunta di un tag script valuterà in effetti il ​​codice JavaScript nel contesto della pagina contenente, al di fuori della sandbox JavaScript a cui il tuo JavaScript ha accesso.

Inoltre, poiché lo script FB richiede che “fb-root” sia nel DOM, sarà probabilmente necessario utilizzare l’approccio programmatico in modo da poter aggiornare prima il DOM con l’elemento, quindi passare un messaggio alla pagina di sfondo per caricare lo script di Facebook in modo che sia accessibile al JavaScript caricato negli script di contenuto.

Le estensioni di Google Chrome non consentono più l’immissione diretta del codice esterno, tuttavia è comunque ansible scaricare il codice con una chiamata Ajax e inviarlo all’iniettore come se fosse un blocco di codice.

 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"); }); 

fonte: https://stackoverflow.com/a/36645710/720665