关于javascript：Google Chrome扩展程序：如何在程序化注入的内容脚本中包含jQuery？


Google Chrome Extensions: How to include jQuery in programmatically injected content script?

当用户单击浏览器操作按钮时，我将从后台页面插入内容脚本，如下所示：

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

那么，我如何从我的content.js内部访问jquery呢？我不知道如何同时注射。

如何：

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

您可以从以下网址下载"jquery.js"：http://jquery.com/download/

相关讨论

把这个添加到清单文件怎么样

1
2
3
4
5
6
7
8
"content_scripts": [
    {
       "js": [
               "jquery.js",
               "contentscript.js"
            ]
    }
],
相关讨论

更新：

执行第一个脚本之后的第二个脚本在脚本顺序上更准确，result是选项卡列表中脚本执行结果的数组。

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

旧的：

在脚本后面插入jquery将使您能够访问脚本中的jquery。

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

您可以更好地控制脚本的注入方式，如本文所述。特别是，如果您希望将脚本注入文档中的所有帧，那么allFrames属性非常重要。忽略它将只注入顶部框架。因为其他答案中没有提到它，所以猜测它对你有帮助。脚本总是可以通过将其添加到清单中来注入，如本文所述。

相关讨论

因为我有很多依赖性的脚本，所以我使用了一个函数concatenateInjection，它有三个参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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);
}

使用示例：

1
2
3
4
5
6
7
8
9
10
11
// 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);

认为这可能有用。

更新

带凹面和封口的版本(更美观)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);} );
    }
  })();

}
相关讨论

每当您想要动态插入jquery时，我推荐使用这个脚本

我个人有一个chrome自定义搜索"$"，它用替换$。

1
2
3
4
5
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的方法。

当我试图快速模拟一些CSS情况时，我在我的about:blank页面上使用这个