web-dev-qa-db-ja.com

google chrome extensionで外部JavaScriptをロードする

現在のページを操作する（基本的にはボタンを追加する）Google Chrome拡張機能を書いています。

コンテンツスクリプトで、Facebook Graph APIをロードします。

$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));

ただし、スクリプトはbodyに追加されていないようです。ここにコンソールログがあります：

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

私が間違っていることについてのアイデアはありますか？

javascriptgoogle-chromefacebook-graph-apigoogle-chrome-extension
26
Gezim

問題は、コンテンツスクリプト内のJavaScriptが独自のサンドボックス環境で実行され、次の2つの方法のいずれかでロードされた他のJavaScriptにしかアクセスできないことです。

manifest を使用：

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

または プログラムによる注入 を使用：

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

マニフェストのアクセス許可を必ず更新してください。

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

スクリプトタグを追加すると、JavaScriptがアクセスできるJavaScriptサンドボックスの外で、含まれているページのコンテキストでJavaScriptが実際に評価されます。

また、FBスクリプトでは「fb-root」がDOM内にある必要があるため、おそらくプログラムによるアプローチを使用して、最初にDOMを要素で更新し、次に メッセージを渡す にする必要があります。 =バックグラウンドページに戻ってFacebookスクリプトをロードし、コンテンツスクリプトにロードされているJavaScriptからアクセスできるようにします。

42
Adam Ayres

Google Chrome拡張機能では、外部コードを直接挿入することはできなくなりましたが、Ajax呼び出しを使用してコードをダウンロードし、コードブロックのようにインジェクターにフィードすることができます。

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

ソース： https://stackoverflow.com/a/36645710/720665

6
David Salamon