chrome插件将js直接注入页面有两种方式，一种是通过Manifest文件中指定js文件，一种是通过chrome.tab.executeScript方式注入。具体可以参考这个官方文档。

由于各种需求，需要将部分js从后端服务器中进行加载。所以只能通过tab.executeScript的方式。具体函数的定义，可以参考官方文档。大致就是能够给定一个文件或者一段代码，在指定的tab中运行。

首先，这个函数必须在background中执行，页面中的content-script本身，是没有权限调用chrome.tab api的。所以，如果页面中的js要执行，需要通过chrome插件的通信机制（port, message），通知background才能运行。

其次，运行的目标tab，可以指定，也可以传null，如果目标tab为null，则表示需要执行的tab是“当前tab”。所以如果使用了null，则在注入前千万不能换tab，否则就注入到其他tab中去了。

然后，参数InjectDetails中可以指定是执行code，还是file。如果是file，可以是本地文件（插件中打包的文件），也可以是远程文件。特别注意，通过file执行远程文件，有着严格的约束（参照这里）：‘Currently, we allow whitelisting origins with the following schemes: HTTPS, chrome-extension, and chrome-extension-resource.’也就是说，只能执行插件内部打包的文件，或者基于https的远程地址。其他还有例外的就是给开发者用的localhost了。我们要加载的资源，不可能放在本地，也不可能打包到插件中，也没有办法去搞到https的证书。所以不能通过执行file的方式加载远程js。

要解决这个问题，只能通过执行code的方式。由于我们在manifest文件中配置了background拥有跨域请求资源的权限，我们可以直接在background中，远程通过xhr的方式获取js内容，然后进行code的执行。这样就能绕开之前遇到的无法执行http协议的js文件的问题。大致的代码如下：

[cce lang=”javascript”]
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var code = xhr.responseText;
chrome.tabs.executeScript(null, {code: code, allFrames: true}, function(){
if(typeof callback === 'function') {
callback();
}
});
}
}
var ts = new Date().getTime();
var u;
if(url.indexOf('?') === -1){
u = url + '?_t=' + ts;
} else {
u = url + '&_t=' + ts;
}
xhr.open('GET',u,true);
xhr.send(null);
[/cce]

最后，还有一个小问题，就是InjectDetails中的allFrames参数。这个参数大致的作用，就是如果为true，js会在页面的所有frame中进行执行，否则就只在页面的top frame中进行执行。由于frame之间的document会互相隔离，所有如果要让frame之间能够通信，就需要设置成true，把代码注入到所有的frame中去。

转载自：https://coolex.info/blog/424.html