我需要通过编程方式将多个脚本文件(后跟一个代码片段)从Google Chrome扩展注入到当前页面。chrome.tabs.executeScript
方法允许一个InjectDetails
对象(代表一个脚本文件或代码片段),以及一个在脚本之后执行的回调函数。Current answers建议嵌套executeScript
调用:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
chrome.tabs.executeScript(null, { file: "master.js" }, function() {
chrome.tabs.executeScript(null, { file: "helper.js" }, function() {
chrome.tabs.executeScript(null, { code: "transformPage();" })
})
})
})
});
然而,回调嵌套变得很难处理,有没有一种方法可以将其抽象化呢?
7条答案
按热度按时间vdzxcuhz1#
这是我提出的解决方案:
随后,可以将
InjectDetails
脚本序列指定为数组:vngu2lb82#
从Chrome v32开始,它支持Promise。我们应该使用它来使代码干净。
以下是一个示例:
ScriptExecution
来源:如果您希望使用ES5,可以使用online compiler将上述代码编译为ES5。
在GitHub上叉我:chrome-script-execution
xtfmy6hx3#
有趣的是,脚本是按顺序注入的,您不需要等待每个脚本都被注入。
这比手动等待要快得多。您可以先加载一个大型库(如
d3.js
),然后再加载一个小文件来验证它们是否按顺序加载。顺序仍然保持不变。**注意:**不会捕获错误,但如果所有文件都存在,则不会发生这种情况.
我编写了一个小模块来进一步简化这个过程,包括正确的错误处理、Promise支持和Manifest v3中的
scripting
API:lrpiutwd4#
从Manifest v3开始,您可以使用承诺链和async/await:
承诺
MV 3为以下承诺提供一流的支持:现在许多流行的API都支持promise,我们最终将在所有适当的方法上支持promise。
你可以使用承诺链,以及async/await。[...]
下面的方法应该有效。
注意,不管参数名称如何,
files
必须指定一个文件。注意,您不能再执行任意代码,所以最好将transformPage();
移到一个文件中并执行它。dluptydi5#
Given your answer, I expected synchronously injecting the scripts to cause problems (namely, I thought that the scripts might be loaded in the wrong order), but it works well for me.
This assumes you only want one callback at the end and don't need the results of each executed script.
6qqygrtg6#
This is mostly an updated answer (on the other answer) :P
Or return a promise.
j8yoct9x7#
使用v3: