20

Piszę rozszerzenie Google Chrome, które manipuluje bieżącą stroną (w zasadzie dodaje przycisk).Ładowanie zewnętrznego javascript w rozszerzeniu Google Chrome

W moim scenariuszu zawartości, chcę, aby załadować API 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)); 

Jednak scenariusz nie wydaje się, aby dodana do body. Oto dziennik konsoli:

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

Jakieś pomysły na temat tego, co robię źle?

+0

Czy jest jakiś powód, dla którego nie można po prostu zawierać Facebook JS jako jednego ze swoich skryptów treści? – sdleihssirhc

+0

Próbowałem, ale nie mogę nawet załadować skryptu w oknie rozszerzenia. Występuje z tym błędem: Nie można załadować rozszerzenia z "/Users/.../extentionfolder/". Nie można załadować kodu JavaScript "https://connect.facebook.net/en_US/all.js" dla skryptu treści. – Gezim

+0

Dzieje się tak dlatego, że podajesz odnośnik zewnętrzny, ale Chrome oczekuje, że skrypt będzie lokalny. Nie znam się zbyt dobrze na interfejsie API Graph Graph; jak możliwe jest zapisanie lokalnej kopii z twoim rozszerzeniem? – sdleihssirhc

Odpowiedz

38

Kwestia jest taka, że ​​JavaScript wewnątrz skryptów treści biegnie we własnej piaskownicy środowisku i ma dostęp do innych JavaScript, który został załadowany na jeden z dwóch sposobów tylko:

Przez manifest:

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

lub używając Programmatic injection:

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

pamiętaj, aby zaktualizować oczywistych uprawnienia:

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

Dołączenie znacznika skryptu spowoduje w efekcie ocenę JavaScript w kontekście strony zawierającej, poza obszarem piaskownicy JavaScript, do której ma dostęp JavaScript.

Ponadto, ponieważ skrypt FB wymaga, aby "fb-root" znajdował się w DOM, prawdopodobnie będziesz musiał użyć podejścia programowego, abyś mógł najpierw zaktualizować DOM z elementem, a następnie pass a message z powrotem na tle stronę, aby załadować skrypt Facebooka, aby był dostępny dla skryptów JavaScript załadowanych do skryptów treści.

+2

Witaj, byłem pod wrażeniem, że musisz to zrobić lub coś ... http://developer.chrome.com/extensions/contentSecurityPolicy.html .... ale czy to zadziała. Teraz. 2013. –

+0

To nie jest już poprawne, jak na https://developer.chrome.com/extensions/contentSecurityPolicy#resourceLoading –

+0

to ładuje skrypt na stronie treści, ale szukam, aby załadować skrypt w rozszerzeniu –

5

Rozszerzenia Google Chrome nie zezwalają już bezpośrednio na wstrzykiwanie kodu zewnętrznego, jednak nadal można pobrać kod za pomocą wywołania Ajax i podać go do wtryskiwacza tak, jakby był blokiem kodu.

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

źródło: https://stackoverflow.com/a/36645710/720665

Powiązane problemy