web-dev-qa-db-ja.com

tabs.executeScript-パラメータの受け渡しとライブラリの使用？

私はChrome拡張機能を作成しています。これは、特定のドメインのページを特定のパラメーターに従って変更する必要があり、XSSを取得するために取得する必要があるため、コンテンツスクリプトを使用するだけでは不可能に思われます。したがって、 tabs.executeScriptを使用してスクリプトを挿入することにしました。

ここで、2つのことを知っておく必要があります。最初に、executeScriptを使用するときにスクリプトにパラメーターを渡すにはどうすればよいですか。メッセージを使用できると思いますが、スクリプトの挿入中にパラメーターを渡すより直接的な方法はありませんか？

第二に、私のスクリプトはjQueryを使用しているため、どういうわけかjQueryを含める必要があります。ばかげていますが、どうすればいいのかわかりません。これまでのところ、私が書いているHTMLページ（たとえばbackground.html）にjQueryを埋め込みました。

javascriptjquerygoogle-chromegoogle-chrome-extension
28
Gadi A

メッセージングを使用したくない場合：

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {code: "var scriptOptions = {param1:'value1',param2:'value2'};"}, function(){
        chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
            //all injected
        });
    });
});

（jquery.jsは拡張フォルダに配置する必要があります）。スクリプトオプションは、script.jsのscriptOptions変数内で使用できます。

メッセージングを使用するのも同じくらい簡単です。

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
        chrome.tabs.sendMessage(tabId, {scriptOptions: {param1:'value1',param2:'value2'}}, function(){
            //all injected
        });
    });
});

script.jsにリクエストリスナーを追加する必要があります。

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    var scriptOptions = message.scriptOptions;
    console.log('param1', scriptOptions.param1);
    console.log('param2', scriptOptions.param2);
    doSomething(scriptOptions.param1, scriptOptions.param2);
});
49
serg

上記のダイレクトメソッドを構築して、Chrome Extensionのバックグラウンドスクリプトから直接新しいタブにコードを挿入することができました。ただし、executeScriptコマンドのコードセクションでは、単に変数を受け取りますが、文字列のみです。したがって、実験後、コマンドの文字列を事前に設定し、必要な変数を含める必要があることがわかりました。

var sendCode = 'document.getElementsByClassName("form-control n-gram")[0].value = "' + TMObj.brand + '";';

var TMUrl = "http://website.com";
chrome.tabs.create({ url: TMUrl }, function(tab){
            chrome.tabs.executeScript(null, {code: sendCode});
      });
});

これはうまくいきました！

1
UltimatePeter

依存関係を含めるより良い方法

依存ライブラリ（およびその他の.jsファイル）をmanifest.jsonのバックグラウンドスクリプトに追加します。

"background": {
  "scripts": [
    "jquery.js",
    "main.js"
]

アプリコードの前に依存関係をリストして、それらが前に読み込まれるようにします。

参照：バックグラウンドスクリプトの登録

注：これは、executeScriptのように遅延ロードするのではなく、スクリプトの熱心なロードを実行します。

0
vedant