关于chrome插件编写的小结

一个插件的大体目录结构以下：

其中manifest文件最为重要，它定义/指明插件应用的相关信息（权限、版本、功能说明等），点此查看Manifest的详情>>

 

这里有一篇chrome官方提供的插件编写的例子<Getting Started:Building a Chrome Extension>

 

popup.html的说明，就是浏览器导航上的插件按钮点击后的弹出页面

background.htm是一个始终运行于浏览器后台的页面，浏览器关闭时它才被关闭，能够做为一个监听者

地址栏访问：chrome://extensions/  载入编写插件的目录

点击后，弹出调试器

 

content_scripts 能够直接操做网页，至关于指定域名下页面，外链了一个JS文件。

 

注：插件的icon尺寸大小 width * height = 128px * 128px，能够经过http://www.easyicon.net/进行搜索

 

 

下面说一下几个容易混淆的地方：

1、插件的做用域

插件环境：popup.html、background_page

页面环境：content_scripts

全部content_scripts没法直接获取popup.html页中经过localStorage存储的数据，须要借助background.htm进行中转。

popup.html可使用ajax进行跨域请求数据，但受manifest中的permissions选项的限制（须要指定相应的域名），content_scripts跟页面同样，不能直接跨域请求数据

 

2、脚本的载入

全部的页面(html/htm)不能直接嵌入内联JavaScript函数，都必须使用script标签引入，若是使用内联脚本，控制台会报错

 

3、生命周期

popup.html 能够认为它是一个网页，由导航上的插件按钮点击时载入（里面的脚本开始执行），关闭弹出层时也就关闭了这个网页（里面的代码亦不会再执行）

background.htm 在插件启用后浏览器进程存在的状况下开始，浏览器关闭时或插件卸载时结束

content_scripts 与浏览的页面生命周期同步

 

4、消息传递

通常来说，是在popup.html中操做后，须要同步至各content_scripts中，这就存在几个问题：

一、popup.html被激活时，如何广播消息至各tab页；

二、当激活指定的tab页时，content_scripts如何获取popup.html中存储的相关数据；

 

当popup.html关闭时，content_scripts须要经过background.htm赤获取数据，当popup.html激活并得到相关数据后，须要广播消息出去。

 

一、content_scripts 获取数据

调用chrome.extension.sendRequest方法，发送相应的数据出去。background.htm的处理脚本监听到消息后，调用sendResponse方法返回数据

 

 

二、popup.html 广播消息至各页面

popup.html的处理脚本，在获得数据后，调用chrome.tabs.sendRequest方法广播。可是chrome.tabs.sendRequest方法须要指定tab选项卡的id （tab页的一个标识ID）

在我尝试过一些方法，如：getCurrent、getAllInWindow等方法后，感受达不到效果，若是当前并非选中指定的页面呢？后来尝试使用query方法，被我发现能够遍历得到全部知足条件的tab页

经过URL这个属性就能够进行过滤，而后拿到tabId，再调用sendRequest方法，content_scripts 再监听消息得到数据就能够对页面进行任意修改了。

这样在popup.html页面操做后，全部知足条件的页面均能实现自动更新（包括刷新页面操做）

 

popup.html相应的脚本代码处理方法（查询并发送消息）

 

content_scripts 对应的脚本处理函数（接受消息）

 

参考资料：

Getting Started: Building a Chrome Extension

chrome.tabs

360极速浏览器应用开放平台 - 消息传递

BootStrap Form Builder

Chrome 网上应用商店 CRX生成工具