Javascript Google Chrome 扩展：如何在以编程方式注入的内容脚本中包含 jQuery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4698118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome Extensions: How to include jQuery in programmatically injected content script?
提问by mpen
I'm injecting my content scriptfrom the background pagewhen the user clicks the browser actionbutton, like so:
当用户单击浏览器操作按钮时，我从后台页面注入我的内容脚本，如下所示：
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(null, { file: "content.js" });
});
So how can I access jQuery from inside my content.js? I don't see a way to inject that simultaneously.
那么如何从我的内部访问 jQuerycontent.js呢？我没有看到同时注入的方法。
回答by serg
What about:
关于什么：
chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
chrome.tabs.executeScript(null, { file: "content.js" });
});
You can download "jquery.js" from here: http://jquery.com/download/
您可以从这里下载“jquery.js”：http: //jquery.com/download/
回答by Apoorv Saini
How about adding this to your manifest file
如何将它添加到您的清单文件中
"content_scripts": [
{
"js": [
"jquery.js",
"contentscript.js"
]
}
],
回答by Ruwanka Madhushan
UPDATE:
更新：
Execute second script after the first one would be more accurate in terms of script order, resultis an array of results of execution of the script in list of tabs.
就脚本顺序而言，在第一个脚本之后执行第二个脚本会更准确，result是选项卡列表中脚本执行结果的数组。
chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'}, function(result){
chrome.tabs.executeScript(null, {file:'js/myscript.js'});
});
OLD:
老的：
Injecting Jquery followed by your script will gives ability to access Jquery within your script.
在您的脚本之后注入 Jquery 将使您能够在您的脚本中访问 Jquery。
chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'});
chrome.tabs.executeScript(null, {file:'js/myscript.js'});
You have more control over how the script should be injected as described in here. Specially allFramesproperty is important if you wish to inject script to all the frames within the document. Ignoring it will only injected into the top frame. Since it is not mentioned in other answers guess it helps you. Scripts can be injected always by adding it to manifest as described here.
你必须对如何在描述的脚本应该注入更多的控制这里。特别是allFrames，如果你想将脚本到文档中的所有帧属性是非常重要的。忽略它只会注入顶部框架。由于其他答案中没有提到它，所以猜它对你有帮助。脚本通常可以通过添加其描述体现注入这里。
回答by Sim Sca
Since I've much scripts with many dependencies , I use a function concatenateInjectionthat takes three parameters:
由于我有很多具有许多依赖项的脚本，因此我使用了一个带有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);
}
and usage example:
和用法示例：
// 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);
Think that's could be useful.
认为这可能有用。
UPDATE
更新
Version with concat and closure (more aesthetic):
带有 concat 和闭包的版本（更美观）：
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);} );
}
})();
}
回答by neaumusic
anytime you want to dynamically insert jQuery, i recommend this script
任何时候你想动态插入 jQuery，我推荐这个脚本
i personally have a Chrome Custom Search "$" which replaces $with
我个人有一个 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:is just the way to run javascript from the url bar
javascript:只是从 url 栏运行 javascript 的方法
i use this on my about:blankpage when i'm trying to mock up some css situation quickly
about:blank当我试图快速模拟一些 css 情况时，我在我的页面上使用它
