记12306货运系统“抢订空车”插件的编写--chrome插件各部分的交互

--chrome插件各部分的交互

Chrome插件的基础知识就不多说了，随便找个入门教程就可以上手了，例如官方提供的Overview与Getting Started教程足够入门了；笔者也是现学现卖。

一个插件其实就是一些常见web资源的集合，将诸如js脚本、css样式、html文本、图片甚至dll等资源打包到一个文件中，并配上一个说明文档manifest.json，来说明插件需要的权限以及各个资源之间的一些主要的关系。插件安装到浏览器之后，可以在一定程度上控制浏览器的行为，同样也可以控制浏览器中显示的web页面的dom。而使用了dll之后，插件能做的事就更多了，可以提供超越浏览器范畴的功能。出于安全考虑，Google官方已经在限制dll的使用。

插件中代码的划分

Chrome插件的代码大致分为三部分：

background page（背景页面）：大多插件包括一个不可见的背景页面，用于维持整个插件的主要逻辑。
UI页面：一个插件还可以包含一些UI页面，包括弹出页面（在点击插件图标时弹出）、配置页面（配置插件时打开）以及覆盖页面（一个插件可以覆盖“书签管理页”、“历史页”或“新建标签页”三者之一）。
content script（内容脚本）：如果插件需要跟web页面进行交互，插件就需要使用内容脚本。

插件的一个强大之处在于其与web页面交互的能力，这种能力是通过内容脚本与页面DOM的交互来完成的。有了插件，一个页面的dom可以被页面本身的javascript脚本以及任意的内容脚本共享。这些脚本都可以修改页面的dom，并且所有的脚本都可以立即感知到变化，但是为了鲁棒性的考虑，web页面的脚本与内容脚本应该是互相孤立的。各脚本运行在自己的“isolated world（隔离世界）”中，各自包含纯净的JavaScript环境，确保相互之间不相影响。多个“隔离世界”可以共享同一个DOM树，但却分别拥有自己对应的JavaScript实现对象。

例如，web页面可以使用jQuery1.11版本，而我们的内容脚本可以使用jQuery2.0版本，而两者的使用互不影响。同时，由于插件可能拥有特权API以及用户敏感信息的访问权限，我们需要确认web页面的脚本无法共享这些权限。因为“隔绝世界”之间不共享JavaScript对象，因此web页面的脚本不可能通过共享的DOM去打破正常的页面沙盒，来访问内容脚本或者插件的 API。

各部分代码的交互

插件可以通过内容脚本或跨域的Ajax请求来与页面或远端服务交互。插件中的各页面（包括背景页面）可以互相访问各自的DOM，也可以调用各自定义的函数。我们需要做的就是调用chrome.extension的 getViews()或getBackgroundPage()找到对应的页面，然后就可以调用其函数和操纵其DOM了。

例如我们在背景页面脚本background.js中定义了一些公用函数，如日期格式化函数：

         // (newDate()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-0208:09:04.423// (new Date()).Format("yyyy-M-dh:m:s.S") ==> 2006-7-28:9:4.18Date.prototype.Format = function(fmt) {var o = {"M+" : this.getMonth()+1, //月份"d+" : this.getDate(), //日"h+" : this.getHours(), //小时"m+" : this.getMinutes(), //分"s+" : this.getSeconds(), //秒"q+" : Math.floor((this.getMonth()+3)/3), //季度"S" :this.getMilliseconds() //毫秒};if(/(y+)/.test(fmt))fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 -RegExp.$1.length));for(var k in o)if(new RegExp("("+ k+")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) :(("00"+ o[k]).substr((""+ o[k]).length)));return fmt;}

在弹出框的初始化脚本initPopup.js中，我们可以这样重用代码：

var bg =chrome.extension.getBackgroundPage();
Date.prototype.Format= bg.Date.prototype.Format;

内容脚本可以看作是web页面的一部分，而非插件的一部分；因此内容脚本可以修改web页面的dom，却不可以修改背景页面的dom，即不能调用getBackgroundPage等特权方法。

值得注意的是：

内容脚本与web页面运行在不同的沙盒中的，两者的JS方法之间不可以相互调用。
内容脚本与插件的其他部分是可以间接交互的，这一交互通过消息的收发来完成。

消息传递

基于安全考虑，内容脚本的JavaScript环境是没有特权的，就像他影响的web页面一样。这就意味着，如果你想要从内容脚本中访问插件API，就必然需要一种在内容脚本与插件的特权部分进行通讯的方式，这种方式就是“message passing（消息传递）”了。“消息传递”允许插件的各部分之间进行通讯。通常我们会希望内容脚本和背景页面之间进行通信，不过插件的任意页面之间都可以进行通讯。如果知道了其它插件的唯一ID，我们甚至可以向其它的插件发送消息。

这里举个简单的例子：

弹出框的初始化脚本中包含一个saveParam方法，负责获取弹出框中的两个值，然后存储到浏览器的同步storage中。然后给id为btn的按钮设置单击事件处理函数，调用保存方法，并向插件的其他部分发送消息：

         functionsaveParam(){_d = $('#aidForm#zcrq').val(), _hqhw = $('#aidForm #hqhw').val();chrome.storage.sync.set({'zcrq':_d,'hqhw':_hqhw});}function getSavedParam(callBack){chrome.storage.sync.get(function(o){_d = o.zcrq, _hqhw =o.hqhw;if(null !=callBack){callBack();}});}$('#aidForm #btn').click(function(e){saveParam();chrome.extension.sendRequest({'msg':'openpage','zcrq':_d, 'hqhw':_hqhw,'url':'xxxxxx'},function(data) {});e.preventDefault();});

然后在背景页面脚本或内容脚本中，我们可以注册消息监听方法，来根据消息内容进行相应的处理：

         chrome.extension.onRequest.addListener(function(request,sender, sendResponse){if(request.msg== 'openpage'){_d= request.zcrq, _hqhw = request.hqhw;chrome.tabs.create({'url':request.url,'active':true});}});

由于内容脚本只能调用chrome.extension对象中的一部分特权方法，上例中的chrome.tabs对象的特权方法即不能调用；但是内容脚本可以通过消息传递机制，发送消息给插件的其它部分，如背景页面脚本，让后者帮助其完成部分工作。当然，有兴趣的话，插件其它部分的代码还可以使用HTML5的window.postMessage方法，配合window.addEventListener方法来进行消息的传递。

最佳实践

综上文所述，chrome插件开发的最佳实践可能是：

背景页面脚本负责维护插件的主要逻辑及方法，内容脚本负责与web页面进行直接的交互，弹出框和选项等页面作为辅助，内容脚本与插件的其它脚本之间通过消息传递机制进行交互，进而达到插件各个部分功能的融合。

That’s all！希望能帮到大家。

另：文中一段有标了删除线的两个词“孤立”、“影响”原来分别是“duli”和“chongtu”，发表的时候居然提示“* 对不起，文章中包含敏感词，请您检查再发布。”，保存不成功，耽误了文章的发表，汗颜，汗颜，汗颜！！！心中奔腾着一万匹羊驼！