web-dev-qa-db-ja.com

Google Chrome拡張機能：プログラムで挿入されたコンテンツスクリプトにjQueryを含める方法

ユーザーがブラウザアクションボタンをクリックするとバックグラウンドページからコンテンツスクリプトを挿入します。

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

では、どのようにしてcontent.js内からjQueryにアクセスできますか？同時に注入する方法がわかりません。

javascriptjquerygoogle-chrome-extension
38
mpen

どうですか：

chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

ここから「jquery.js」をダウンロードできます。 http://jquery.com/download/

80
serg

これをマニフェストファイルに追加してはどうですか

"content_scripts": [
    {
        "js": [
                "jquery.js", 
                "contentscript.js"
            ]
    }
],
15
Apoorv Saini

更新：

最初のスクリプトがスクリプトの順序に関してより正確になると、2番目のスクリプトを実行します。resultは、タブのリストでのスクリプトの実行結果の配列です。

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'}, function(result){
    chrome.tabs.executeScript(null, {file:'js/myscript.js'});
});

古い：

Jqueryに続いてスクリプトを挿入すると、スクリプト内でJqueryにアクセスできるようになります。

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'});
chrome.tabs.executeScript(null, {file:'js/myscript.js'});

here で説明されているように、スクリプトの挿入方法をより詳細に制御できます。文書内のすべてのフレームにスクリプトを挿入する場合は、特にallFramesプロパティが重要です。それを無視すると、トップフレームにのみ挿入されます。他の回答で言及されていないので、あなたを助けると思います。 here のように、スクリプトをマニフェストに追加することで、いつでも注入できます。

4
Ruwanka Madhushan

私は多くの依存関係を持つスクリプトをたくさん持っているので、3つのパラメーターを取る関数concatenateInjectionを使用します。

//id: the tab id to pass to executeScript
//ar: an array containing scripts to load ( index order corresponds to execution order)
//scrpt (opzional): the last script to execute (if not provided, than the last script is the last insert in previous array)

function concatenateInjections(id, ar, scrpt){
  var i = ar.length;
  var idx = 0;

  function inject(idx){
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function() {
          inject(idx);
      });
    }else{
      if(typeof scrpt === 'undefined') return;
      chrome.tabs.executeScript(id, { file: scrpt });
    }
  }
  inject(idx);
}

および使用例：

// id is tab id

// sources: first execute jquery, than default.js and anime.js in the end
var def = [
  "lib/jquery-1.11.3.min.js", 
  "lib/default.js", 
  "injection/anime.js"
];

// run concatenate injections
concatenateInjections(id, def);

それが役立つと思います。

更新

連結とクロージャーを備えたバージョン（より美しい）：

function concatenateInjections(id, ar, scrpt){

  if( typeof scrpt !== 'undefined' ) ar = ar.concat([scrpt]);

  var i = ar.length;
  var idx = 0 ;

  (function (){
    var that = arguments.callee;
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function(){ that(idx);} );
    }
  })();

}
3
Sim Sca

jQueryを動的に挿入したいときはいつでも、このスクリプトをお勧めします

個人的にChromeカスタム検索 "$"があり、これは$を

javascript:
var jq = document.createElement('script');
jq.onload = function(){};
jq.src = "https://code.jquery.com/jquery-2.1.1.min.js";
document.querySelector('head').appendChild(jq);

javascript:は、URLバーからJavaScriptを実行する方法です

私はabout:blankページでこれを使用して、CSSの状況をすばやくモックアップしようとしています

1
neaumusic