记得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的button设置单击事件处理函数。调用保存方法，并向插件的其它部分发送消息：

         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”，发表的时候竟然提示“* 对不起，文章中包括敏感词，请您检查再公布。

”。保存不成功，耽误了文章的发表，汗颜。汗颜，汗颜！

！

！心中奔腾着一万匹羊驼！

转载于:https://www.cnblogs.com/bhlsheji/p/4744165.html