花了两周左右的时间将Chrome扩展的开发文档看了一遍，把所有官方的例子也都顺便一个个的安装玩了一遍，真心感觉Chrome浏览器的博大精深。Chrome浏览器的现有功能已经足够强大，再配合Chrome扩展几乎可以说是“只有想不到，没有做不到”。于是利用业余时间做了一个简单的扩展Search-faster，可以加快Google的搜索速度，算是对近一段时间学习的总结。
一、Chrome扩展综述
Chrome扩展有两种不同的表现形式：扩展（Extension）和应用（WebApp），我们这里不讨论WebApp，但是扩展的大多数技巧对于WebApp来说也是适用的。Chrome扩展实际上就是压缩在一起的一组文件，包括HTML，CSS，Javascript，图片，还有其它任何需要的文件。它从本质上来说就是一个Web页面，可以使用所有的浏览器提供的API，可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。还可以访问浏览器提供的内部功能，例如标签或书签等。
扩展在Chrome浏览器中又有着两种不同的表现形式：browser_action和page_action，browser_action在工具栏右侧添加一个图标，page_action在URL输入栏右侧添加一个图标，如下图所示。这两个action唯一的区别在于：当你的扩展是否显示取决于单个页面时，该使用page_action，page_action默认是不显示的。
1.1 manifest.json
每一个Chrome扩展都有一个清单文件包含了这个扩展的所有重要信息，这个文件的名称固定为manifest.json，文件内容为JSON格式。下面是一个manifest.json文件的实例（来自JSONView扩展）
{
"background": {
"scripts": [ "background.js" ]
},
"content_scripts": [ {
"all_frames": true,
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*", "ftp://*/*", "file:///*" ],
"run_at": "document_end"
} ],
"description": "Validate and view JSON documents",
"icons": {
"128": "jsonview128.png",
"16": "jsonview16.png",
"48": "jsonview48.png"
},
"key": "...",
"manifest_version": 2,
"name": "JSONView",
"options_page": "options.html",
"permissions": [ "clipboardWrite", "http://*/", "contextMenus", "https://*/", "ftp://*/" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "0.0.32.2",
"web_accessible_resources": [
"jsonview.css", "jsonview-core.css", "content_error.css",
"options.png", "close_icon.gif", "error.gif"
]
}
其中name、version和manifest_version三个字段是必选的，每个字段的含义显而易见，另外在当前版本下manifest_version的值推荐为2，版本1已经被弃用。
除这三个字段之外，description为对扩展的一句描述，虽然是可选的，但是建议使用。
icons为扩展的图标，一般情况下需要提供三种不同尺寸的图标：16*16的图标用于扩展的favicon，在查看扩展的option页面时可以看到；48*48的图标在扩展的管理页面可以看到；128*128的图标用于WebApp。这三种图标分别如下所示：
图标建议都使用png格式，因为png对透明的支持最好。要注意的是：icons里的图标和browser_action或page_action里的default_icon可能是不一样的，default_icon显示在工具栏或URL输入栏右侧，建议采用19*19的图标。
key字段为扩展的唯一标识，这个字段是浏览器在安装.crx文件时自动生成的，通常不需要手工指定。
permissions为扩展所需要的权限列表，列表中的每一项要么是一个已知的权限名称，要么是一个URL匹配模式。一些常见的权限名称有background、bookmarks、contextMenus、cookies、experimental、geolocation、history、idle、management、notifications、tabs、unlimitedStorage等；URL匹配模式用于指定访问特定的主机权限，譬如："http://*.google.com/"、"http://www.baidu.com/"。关于permissions字段可以参考这里的文档。
update_url用于扩展的自动升级，默认情况下Chrome浏览器会每隔一小时检测一次是否需要升级，也可以点击扩展管理页面的“立即更新”按钮强制升级。
另外background、content_scripts、options_page这三字段，还有这个例子里没包含的browser_action/page_action字段是构成Chrome扩展的核心元素。下面分别进行介绍。
1.2 background
背景页通常是Javascript脚本，是一个在扩展进程中一直保持运行的页面。它在你的扩展的整个生命周期都存在，在同一时间只有一个实例处于活动状态。在manifest.json中像下面这样使用scripts字段注册背景页：
{
"name": "My extension",
// ...
"background": {
"scripts": ["background.js"]
},
// ...
}
也可以使用page字段注册HTML页面：
{
"name": "My extension",
// ...
"background": {
"page": ["background.html"]
},
// ...
}
背景页和browser_action/page_action是运行在同一个环境下的，可以通过chrome.extension.getBackgroundPage()和chrome.extension.getViews()进行两者之间的互相通信。
背景页也常常需要和content_scripts之间进行通信，要特别注意的是背景页和content_scripts是运行在两个独立的上下文环境中的，只能通过messages机制来通信，这个通信可以是双向的，首先写下消息的监听方：
chrome.extension.onRequest.addListener(function(request, sender, callback) {
console.log(JSON.stringify(request));
// deal with the request...
sendResponse({success: true});
});
然后写下消息的发送方：
chrome.tabs.sendRequest(tabId, cron, function(response) {
if (response.success) {
// deal with the response...
}
});
1.3 content_scripts
content scripts是一个很酷的东西，它可以让我们在Web页面上运行我们自定义的Javascript脚本。content scripts可以访问或操作Web页面上的DOM元素，从而实现和Web页面的交互。但是要注意的是，它不能访问Web页面中的Javascript变量或函数，content scripts是运行在一个独立的上下文环境中的，类似于沙盒技术，这样不仅可以确保安全性，而且不会导致页面上的脚本冲突（譬如Web页面上使用了jquery 1.9版本，而content scripts中使用了jquery 2.0版本，这两个版本的jquery其实运行在两个独立的上下文环境中互不影响）。content scripts除了不能访问Web页面中Javascript变量和函数外，还有其他的一些限制：
- 不能使用除了chrome.extension之外的chrome.* 的接口
- 不能访问它所在扩展中定义的函数和变量
- 不能做cross-site XMLHttpRequests
但这些限制其实并不影响content scripts实现其强大功能，因为可以使用Chrome扩展的messages机制来和其所在的扩展进行通信，从而间接的实现上面的功能；而且，content scripts甚至可以通过操作DOM来间接的和Web页面进行通信。
使用content scripts在Web页面注入自定义脚本可以通过两种方法来实现：第一种方法是在manifest.json文件中使用content_scripts字段来指定，还有一种方法是通过编程的方式调用chrome.tabs.executeScript()函数动态的注入。这里有详细的介绍。
1.4 options_page
当你的扩展拥有众多参数可供用户选择时，可以通过选项页来实现。选项页就是一个单纯的HTML文件，可以引用脚本，CSS，图片等其他资源。这在Web开发中是家常便饭，只要你会制作网页，那么制作一个选项页肯定也没问题，这并没有什么好说的。但是，如果我们仔细想一想，当用户在选项页点击保存修改后，修改后的配置信息保存在哪儿呢？如何做到选项页中的配置在重启浏览器后甚至是清除浏览器数据后仍然存在呢？这就需要我们将配置信息保存到硬盘上的某个文件中，而浏览器Web脚本中的Javascript代码很显然是不能访问物理文件的。
这就是chrome.storage.local的由来，chrome.storage.local是Chrome浏览器提供的存储API，这个接口用来将扩展中需要保存的数据写入本地磁盘。Chrome提供的存储API可以说是对localStorage的改进，它与localStorage相比有以下区别：
- 如果储存区域指定为sync，数据可以自动同步
- 在隐身模式下仍然可以读出之前存储的数据
- 读写速度更快
- 用户数据可以以对象的类型保存
- 清除浏览器数据后仍然可以访问
1.5 browser_action vs. page_action
上面已经说过，browser_action和page_action是扩展在Chrome浏览器中的两种不同的表现形式，browser_action显示在工具栏右侧，page_action显示在URL输入栏右侧。下面的代码示例说明了如何注册一个browser_action（page_action的注册方法类似，只要将browser_action替换成page_action即可）：
{
"name": "My extension",
// ...
"browser_action": {
"default_icon": "images/icon19.png", // optional
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
// ...
}
一个browser_action可以拥有一个icon，一个tooltip，一个badge和一个popup，page_action没有badge，也可以拥有一个icon，一个tooltip和一个popup。icon是action的图标，一般情况下是一个19*19的png图片，也可以是HTML5中的一个canvas元素可以实现任意的自定义图片；tooltip是提示信息，当鼠标移到action图标上时会显示出来；popup是当用户点击action图标时弹出的窗口；badge是写在图标上文字，譬如下图中显示在RSS Feed Reader这个扩展图标上的67就是一个badge，由于badge空间有限，一般不会超过4个字符，超出部分会被截断。
如果在default_popup字段中指定了popup.html，当用户点击图标时就会弹出来。这也是个简单的HTML文件，可以包含自己的脚本，样式和图片文件。如果没有指定popup.html，点击图标时会触发action的onClicked事件。如果你需要处理该事件可以在背景页background.js中使用类似于下面的代码：
chrome.browserAction.onClicked.addListener(function(tab) {
// ...
});
browser_action默认总是显示，除非你在扩展管理里选择了隐藏按钮，而page_action默认是不显示的，需要使用函数chrome.pageAction.show()和chrome.pageAction.hide()来控制page_action的显示。下面是一个简单的示例，只有当URL是www.baidu.com才会显示page_action：
function update(tabId) {
if (location.host.indexOf('www.baidu.com') == -1) {
chrome.pageAction.hide(tabId);
}
else {
chrome.pageAction.show(tabId);
}
}
chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
if (change.status == "complete") {
update(tabId);
}
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, info) {
update(tabId);
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
update(tabs[0].id);
});
二、如何调试Chrome扩展
调试永远是软件开发中至关重要的一步，无论是桌面应用还是Web应用都是如此。Chrome浏览器的开发者工具提供给开发人员一个近乎完美的Web调试器，不仅可以查看Web页面的HTML源码，分析和修改DOM树，调试CSS样式，查看每一个网络请求进行性能分析，以及强大的Javascript脚本调试器。Chrome扩展和Web应用别无二致，自然也可以使用相同的调试方法对其进行调试，只不过要在几点不同之处特别注意一下。
2.1 popup的调试
如果你的扩展使用了popup，无论是browser_action还是page_action，都可以通过下面的方法调试popup：首先在扩展的图标上点击右键，然后选择“审查弹出内容”，如下图所示：
这时会弹出开发者工具的窗口，我们选择Sources选项卡，在左侧就可以看到所有popup相关的HTML、Javascript以及CSS了。如下图：
查看Javascript代码找到我们感兴趣的地方，在该处下个断点，然后就可以进行调试了。如果断点处的代码是弹出窗口时就已经执行过了，那么可以切换到Console选项卡，输入location.reload(true)执行后popup会重新加载，并断在断点处，如下图：
2.2 background的调试
尽管背景页和popup是属于同一个执行环境下，但是点击“审查弹出内容”时并不能看到背景页的代码，也不能对其进行调试。要调试背景页，首先需要打开扩展管理页面，找到要调试的扩展，如果该扩展有背景页，会显示类似于如下图所示的“检查视图：background.html”字样，用户点击background.html弹出开发者工具既可以进行调试。
和popup一样，也可以使用在Console选项卡中执行location.reload(true)这个小技巧来重新加载背景页。
2.3 content_scripts的调试
content_scripts是注入到Web页面中的Javascript代码，所以调试content_scripts和调试Web页面是完全一样的。我们直接按F12调出开发者工具，然后切换到Sources选项卡，在下面的左侧可以看到又有几个小的选项卡：Sources、Content scripts、Snippets。我们选择Content scripts就可以找到已经注入到这个页面的所有content_scripts。如下图：
可以看出一个页面可以被注入多个content_scripts，每一个content_scripts都有着他们自己独立的运行空间。找到感兴趣的代码下断点，然后就可以调试了。如果代码已经运行过，刷新下页面即可（当然，如果你在Console选项卡中执行location.reload(true)也是完全可以的，但这哪有F5方便呢:-)）。
2.4 option.html的调试
选项页就是一个静态的HTML页面，和调试Web页面完全一样。没什么好说的了。
三、Search-faster的实现
通过上面的学习，我们基本上已经了解到了开发一个Chrome扩展所需要的基本知识了。现在我们通过实现一个最最简单的Chrome扩展来对学到的内容进行巩固。Search-faster非常简单，写它的目的也非常简单：加快我们在搜索引擎上的搜索速度。听起来很高大上，其实很简单，我们知道在我们搜索的时候，很多搜索引擎搜出来的结果并不是直接跳转到原网页，而且先跳转到搜索引擎自身，然后再跳转到原网页。如下图所示，百度搜索就是这样做的：
当然Google也是这样：
这样做搜索引擎可以对每个搜索结果进行统计分析然后优化，但是对于我们用户来说，多做一次跳转显然会降低我们的速度。而且在我们大天朝，通过代理访问Google本来就已经够慢的了，点击每个搜索结果再跳转一次到Google实在是有点让人受不了。
我本来打算对百度、Google和Bing做统一处理的，后来发现百度的跳转链接是经过加密后的，一时破解不了，而Bing的搜索结果并没有跳转而是直接到原网页。于是这个Search-faster其实就变成了Google-search-faster了。
首先我们确定我们的扩展类型，因为只有在访问Google搜索时才需要显示，所以我们采用page_action而不是browser_action。然后我们确定需要哪些文件，因为要访问Google搜索的结果页面，所以肯定需要一个content_scripts，content_scripts的内容是遍历Google搜索结果页面上的所有跳转链接，获取每个链接的原链接，然后在每个链接上添加一个click事件，当用户点击该链接时直接跳转到原链接。（本来是打算直接修改链接为原链接的，但是发现Google的代码中有检测功能，会自动将跳转链接替换回来，所以使用click事件的方法最为保险）。最后我们需要一个背景页，检测浏览器选项卡的变动，当用户切换选项卡或选项卡有变动时执行content_scripts。
manifest.json的代码如下：
{
"name": "Search-faster",
"version": "1.0",
"description": "Replace the search engine redirect url to direct url when searching baidu, google, etc.",
"background": { "scripts": ["background.js"] },
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery.min.js", "content_script.js"]
}],
"page_action": {
"default_icon" : "icons/google.png",
"default_title" : "It works!"
},
"permissions" : ["tabs"],
"manifest_version": 2
}
content_scripts的关键代码如下：
chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
var response = doReplace();
sendResponse(response);
});
/**
* replace the redirect url to direct url
*/
function doReplace() {
// url not match
if(location.host.indexOf('www.google.com') == -1) {
return null;
}
// get the keyword
var lstib = $('#lst-ib');
if(lstib.length == 0) {
return null;
}
// get the links & add a click event
var links = $('.srg .g h3.r a');
links.on('click', function(e) {
var href = $(e.target).attr('data-href');
window.open(href);
return false;
});
return {
keyword: lstib[0].value,
replace_cnt: links.length
};
}
background的关键代码如下：
function updateSearch(tabId) {
chrome.tabs.sendRequest(tabId, {}, function(search) {
searches[tabId] = search;
if (!search) {
chrome.pageAction.hide(tabId);
} else {
chrome.pageAction.show(tabId);
if (selectedId == tabId) {
updateSelected(tabId);
}
}
});
}
chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
if (change.status == "complete") {
updateSearch(tabId);
}
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, info) {
selectedId = tabId;
updateSelected(tabId);
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
updateSearch(tabs[0].id);
});
完整的代码在这里。
参考
- 综述--扩展开发文档
- Chrome 扩展程序、应用开发文档（非官方中文版）
- Sample Extensions - Google Chrome
- Chrome插件（Extensions）开发攻略
- 手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单
- 手把手教你开发Chrome扩展二：为html添加行为
- 手把手教你开发Chrome扩展三：关于本地存储数据
- Chrome.storage和HTML5中localStorage的差异
