chrome插件开发

基本概念

        一个插件其实是压缩在一起的一组文件（.crx），包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。插件本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。插件可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。插件还可以访问浏览器提供的内部功能，例如标签或书签等。

插件会以browser action或page action的形式在浏览器界面上展现出来。每个插件最多可以有一个browser action或page action。当插件的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。

每个插件都应该包含下面的文件：
一个manifest文件
一个或多个html文件（除非插件是一个皮肤）
可选的一个或多个javascript文件
可选的任何需要的其他文件，例如图片

 

在开发插件时，需要把这些文件都放到同一个目录下。发布插件时，这个目录全部打包到一个插件名是.crx的压缩文件中。如果使用Chrome Developer
Dashboard上传插件，可以自动生成.crx文件。

background

如果需要运行一些后台脚本，比如监听用户在扩展信息栏按下你的插件图标，或者要监听用户新建tab页，这个时候就需要有一个background的页面。background你可以指定一个HTML页面，也可以指定一个JS文件。

背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。

此外，background页面可以保存公共变量。可以通过chrome.extension.getBackgroundPage 

方法获取背景页，并读写其中的变量。例如：

var backgroundPage = chrome.extension.getBackgroundPage();
console.log(backgroundPage.time); // 读取背景页中的变量
backgroundPage.time = Date.now(); // 修改背景页中的变量

可以通过extension.getViews方法获取其他页面进行修改，使用方法同上，不同的是这个方法获取到的是一个数组。

browser_action

browser_action可以设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口。browser_action设置的图片显示在chrome右上角。

设置如下：

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {
      "19": "images/icon19.png",
      "38": "images/icon38.png"
    },
    "default_title": "Google Mail",
    "default_popup": "popup.html"
  },
  ...
}browser_action可以通过 chrome.browserAction.onClicked.addListener(function(Tab tab) {...});设置点击事件，但当browser action是一个popup的时候，这个事件将不会被触发。popup页面即点击时弹出的窗口，如：

page_action

page actions定义需要处理的页面的事件，但是它们不是适用于所有页面的，显示在地址栏的右侧，默认不显示，可以通过pageAction.show 和pageAction.hide方法来通知显示和隐藏。

可以把对page aciton的设置和处理放在background page中，从而直接在background中通过chrome.pageAction来设置page action，比如如下代码实现了当所访问URL中有mail字符串时就显示page action的icon这样的功能

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {     
    if (tab.url.indexOf("mail") > -1) {          
        chrome.pageAction.show(tabId);
    }
});

content_script

很多时候需要跟页面本身进行交互，这时就需要用到content script，content script跟原页面脚本共用同一份页面的dom，也就是说content script可以直接去访问或修改当前页面的dom，但是，它们只是共享了dom的访问，js处理本身却是在两个不同的沙盒中运行的，所以并不能互调各自的js代码。另外，只能使用标准的DOM。此外，content_script中存在一些限制：
不能使用除了chrome.extension之外的chrome.* 的接口
不能访问它所在扩展中定义的函数和变量
不能访问web页面或其它content script中定义的函数和变量
不能做cross-site XMLHttpRequests

当然，这些限制都是可以跳过去的。可以通过chrome.extension.getBackgroundPage在背景页完成这些任务，也可以通过postMessage与其他页面通信。

permissions

插件需要在哪些域名下使用都需要事先声明权限，在插件里用到的chrome接口除默认支持的接口（如chrome.extension和chrome.pageAction等）都需要声明权限。例如：

"permissions": [
    "webRequest",
    "tabs",
    "http://*.csdn.net/",
]

配置文件manifest.json编写

详见上一章：manifest.json参数详解

插件发布

本地调试可以在chrome://extensions/勾选开发者模式，然后点击“加载已解压的扩展程序”，加载目录，点击“打包扩展程序”则可以生成crx文件。但是现在chrome禁止使用非商店的扩展程序，所以请看下文。

发布到商店可以通过https://chrome.google.com/webstore/developer/update发布，按照相关提示进行就好了。（另外，发布需要$5……）