chrome插件远程加载js

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中去。

3 Replies to “chrome插件远程加载js”

  1. 兄弟,你在对你的用户干一件很危险的事情,你想为啥Google要限制远程脚本只能HTTPS……

    1. 哈哈,这个我知道,但是你不知道需求,我们在做自动化测试录制用的插件,管他什么安全性,而且是内网…

      1. 我还真不知道需求。Chrome马上完全禁止安装第三方扩展,你们的扩展怎么给别人装上呢?发布到外部市场?调用的代码不能内嵌到扩展里吗?用http s://support.google.com/chrome/a/answer/188453 这里提到的企业内推送呢?

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据