Chromium插件内容脚本与背景脚本消息传递实现

2015-06-01 • 技术文章评论

在Chromium浏览器插件的开发过程中,内容脚本(content script)和背景脚本(background script)的信息交互是非常常用的。然而由于Chromium的安全隔离机制,这种交互变得成本很高。笔者最近为了省去很多重复无意义的工作步骤,计划开发一款浏览器插件,经过对WebsiteIP插件源代码的研究以及数个小时的试错,终于在自己的插件中实现了这种交互。

1
2
3
4
5
6
7
8
9
10
11
// background: start listening
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
     sendResponse({key: request.action == "guessMyLocation" ? sender.tab.url : "Mars"});
});
 
// content script: send messages
docReady(function() {
    chrome.runtime.sendMessage({action: "guessMyLocation"}, function(response) {
        console.log("You're from " + response.key);
    }
});

其实实现并不困难,之所以耗费了大量的时间是因为一个小的语法错误在文本编辑中没有看出来,一个好的IDE对于代码繁冗的项目还是很必要的。想起之前做php开发的时候,一个bug一直没分析出来,后来试用了PhpStorm,打开项目后直接就自动分析出错误所在了。

说完了这个再说说WebsiteIP的实现机制,其实现中用到了LocalStorage来存放IP信息,而实际上是否使用LocalStorage关系不大,使用普通的对象存储也是可以的。关键就在于chrome.webRequest.onCompleted.addListener(function(details)),details包含了本次请求的各种信息,比如主机IP地址、状态码等等,对于诊断页面加载情况有一定帮助。