这篇文章主要是作为一个摘要的形式进行简单的方向性的指导,具体的内容还是需要参阅google的developer站点。

我编写的一个插件,或者说改写、扩展的,开源在github上,参阅:https://github.com/agreatfool/chrome-voiceover

1. 概览

开宗明义的概要摘述,参阅:chrome extension overview

其中最关键的是关于其架构的部分:http://developer.chrome.com/extensions/overview.html#arch

2. manifest, Content Scripts, Background Pages

google chrome的插件开发将几个职能以及权限划分得非常清晰,所以很多事情,在这里是不能做的,在那里却是可以做的。接下来就让我们来看下这个划分规则。插件最主要的内容部分有三块:

  • manifest.json 描述文件,这个配置文件中定义了很多插件的关键信息和配置,请参阅:Formats: Manifest Files
  • Content Scripts 在插件中司职“前端”的js脚本,可以有多个文件,和在chrome的tab页面中直接使用script标签进行js文件引入是一样的效果,但是它们有很多限制,请参阅:Content Scripts
    • 可以:操作页面元素,改变页面字体,修改页面DOM结构,即它们能进行“前端工作”
    • 不可以:调用chrome.* 的任何API
    • 不可以:访问插件定义的变量和函数
    • 不可以:访问其他页面和插件定义的变量和函数
    • 结论:它们存活在沙箱中,只能做“前端工作”
  • Background Pages 在插件中司职“后端”的页面,可以是一个引入了很多js的html页面,也可以是一个单独的js脚本,它的生命周期和插件的生命周期一样长,所有后端页面的调试和console输出,都需要在开发者模式下,打开扩展程序页面的扩展视图中查看,请参阅:Background Pages
    • 可以:调用任何chrome.* 的API
    • 可以:与任何外部服务进行交互
    • 不可以:与前端页面进行交互
    • 结论:它们存活在沙箱中,只能做“后端工作”

3. Content Scripts 与 Background Pages 之间的交互

就像上面描述的,content scripts和background pages相互之间是司职不同的功能的,那么这两者就需要配合起来,才能完成一般程序的功能。这里我们就需要一种手段在两者之间进行消息的互通。google把这种行为叫做"Message Passing",请参阅:Message Passing

举例来说,后端向前端发消息:

[codesyntax lang="javascript"]

// background.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "finished"});
});

// content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.hasOwnProperty("action") && 'finished' === request.action) {
        // page convert finished
        // ...
    }
});

[/codesyntax]

举例来说,前端向后端发送:

[codesyntax lang="javascript"]

// content.js
chrome.runtime.sendMessage({action: "convert"}, function(response) {});

// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.hasOwnProperty("action") && request.action == "convert") {
        // ...
    }
});

[/codesyntax]

4. 跨域请求

制作插件免不了有的时候需要与第三方API进行交互,这个时候我们就需要进行跨域请求,一般来说我都是习惯使用jquery的$.ajax函数。不过在我这次插件制作过程中,使用jquery无法调用成功,我没有仔细查究竟是我的代码问题(不太可能)还是chrome的安全机制的限制。

chrome有专门一个单独的章节教你如何使用跨域请求,请参阅:Cross-Origin XMLHttpRequest,其实也就是XMLHttpRequest,不难掌握的。

5. UI与用户之间的互动

插件最主要有两种界面上与用户交互的行为:

  • browserAction 就是用户点击插件icon的行为所触发的事件,适用于整个浏览器都通用的行为,请参阅:chrome.browserAction
  • pageAction 就是用户点击地址栏右边的icon的行为所触发的事件,适用于某些特定地址所需要的行为,请参阅:chrome.pageAction

6. 其他你可能需要的资料