Chrome扩展开发指南

Chrome扩展开发指南(1)——入门

这是制作chrome扩展插件的入门指南，不需要任何编程基础，看完这个后，我们就着手做自

己的Chrome插件了。好吧，我们现在就开始，其实我也是个新手。

准备工具

做任何事情都要有个工具，制作chrome插件需要的工具很少。





记事本，用来编写代码

Chrome浏览器，这个不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux

下需要下载Beta版本，Mac下载dev版本。

开始制作第一个插件





在计算机中创建一个目录来存放插件代码。

在目录里面创建文件(注意后缀名是.json)，用记事本打开，写入如下代码

















{

"name": "第一个Chrome插件",

"version": "1.0",

"description": "我的第一个Chrome插件，还不错吧",

"browser_action": {

"default_icon": ""

}

}

复制代码

 把下面两张图片保存到文件夹中，分别取名和

图片一： 图片二：

 安装这个插件:

a.点击右上角扳手，选择扩展程序，打开扩展中心。

b.点击右上角的“开发人员模式”，使得前面的“+”变成“-”，打开相应的菜单。如果一开始就是“-”，

那么不用点击。

c.点击“载入正在开发的扩展程序按钮”，导入刚才创建的文件夹。

如果一切顺利，你的Chrome地址栏将会有个新图标，你的第一个插件诞生了。

给第一个插件增加新功能

你现在虽然做了第一个插件，但实际上他并没有实现任何功能，我们点击图标，没有任何反应。

下面我们就给他增加点功能。

 编辑这个文件，用下面的代码替换现有的代码，其实我们只是加了一行代码

和一个逗号而已。



















{

"name": "第一个Chrome插件",

"version": "1.0",

"description": "我的第一个Chrome插件，还不错吧",

"browser_action": {

"default_icon": "",

"popup": ""

}

}

复制代码

 下面我们创建一个文本文件，用记事本打开，将下面的代码写进去







Hello,Chrome!

我的名字叫ChromeChina!

Chrome中文论坛欢迎你



复制代码

 回到Chrome的扩展中心，点击插件下的“重新载入 ”。

现在点击插件图标看看。我们的第一个插件算是制作成功了。

打包插件

我们想把自己制作的插件给其他人用，那么就需要将插件打包。





回到Chrome的插件扩展中心，点击“打包扩展程序”按钮。

选择刚才创建的文件夹，点击确定生成后缀为crx和cpm文件各一个。

把crx文件发送给自己的朋友，告诉他们你也会制作chrome插件吧。

你可以修改里面的文字图片，制作出极具个性的扩展来了。现在让我们来看看大家都做出了什么样的

扩展，把你的第一个扩展上传上来让大家看看吧！这个是我的：

Chrome扩展开发指南(2)——概述

这篇文章翻译自/chrome/extensions/，我还没有

真正做过插件，翻译这篇文章算是班门弄斧，有翻译的不好的地方请一定指出来，希望能够达到完美！

( 对新手说的话：文章涉及到的一些术语，对没有任何网页知识的新手来说还是挺难懂的，可以

借助Google/baidu看一下，其实不懂也没多大关系，这篇文章只是一个概述，完全可以跳过这些术

语，希望大家对制作插件不要失去信心。)

只要看完这篇文章，并且做过入门指南中的例子，你就可以真正开始开发属于自己的Chrome

插件了。

基础知识

一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。扩展实际上就是一

个web页面，你可以用任何浏览器提供给web页面的接口，从XMLHttpRequest 到JSON ，再

到HTML本地缓存都可以使用。

Chrome扩展能做什么呢？我们肯定使用过一些扩展，会发现有些扩展在Chrome地址栏右侧

区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以

和web页面交互，甚至是从web服务器获取数据。更加详细的内容可以从Developer's Guide看

到。

Chrome扩展的组成文件

每个扩展由下列文件组成：









一个manifest文件(主文件,json格式)

至少一个HTML文件(主题可以没有HTML文件)

JavaScript文件 (可选，非必须)

任何其他你需要的文件(比如图片)

当你开发一个扩展的时候，需要把这些文件放在一个文件夹里，当你发布这个扩展的时候，这个

文件夹下的所有文件将会打包成一个特殊后缀.crx的ZIP文件。

引用文件

你可以放置任何文件到你的扩展里面，但是怎么调用这些文件呢？一般来说，使用相对地址调用，

类似HTML中调用文件。下面是个例子，在子文件夹images中有个图片，我们可

以这样调用它



复制代码

其中images/表示这个文件。

也许你注意到当使用Google Chrome debugger查看这些文件的时候给，每个文件的地址是

下面这种格式

 chrome-extension:///

复制代码

这个地址中，是你制作的扩展的唯一标示符，也就是扩展的身份证编号。

是文件相对扩展顶级文件夹得位置。

manifest文件

主文件取名，用来描述这个扩展，包括扩展名字、版本、调用的文件、可用域

等信息。下面是个典型的manifest文件，这个扩展可以调用的内容。















{

"name": "My Extension",

"version": "2.1",

"description": "Gets information from Google.",

"icons": { "128": "icon_" },

"background_page": "",

"permissions": ["*./", "*./"],

 "browser_action": {

 "default_title": "",

 "default_icon": "icon_",

 "popup": ""

 }

 }

复制代码

扩展结构组成结构

绝大部分扩展有background文件，一个不可见的文件控制着整个扩展的运行。

上面这个图片显示的浏览器至少安装了两个扩展：一个浏览器行为扩展(黄色的图标),页面行为扩展

(蓝色的图标)。这个浏览器行为扩展的background文件是用一个HTML文件定义的

()，这个background文件中有JavaScript代码控制整个浏览器的活动。

HTML页面

background不是唯一存在的HTML文件，比如浏览器行为可能是弹出一个小窗口，这个小窗

口的内容就可以调用一个HTML文件。Chrome扩展也能够用() or

()这种函数来显示HTML文件。

扩展里面的HTML文件可以互相访问对方的DOM结构，可以引用其他文件中定义的函数。

下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。这个弹出窗口

的内容是一个HTML的web文件，这个弹出窗口不需要包含background文件中的代码，因为，

和background是可以互相访问的。

内容脚本(Content scripts)

如果你插件需要和网页交互，那么他就需要一个内容脚本(Content scripts)，内容脚本常由

JavaScript编写，会在网页载入完成后调用。完全可以把内容脚本看做是网页的一部分，而不是扩

展的一部分。

内容脚本可以访问到当前浏览器浏览的页面，而且还可以改变网页的显示方式(油猴脚本就是内

容脚本)。下面的图片中，内容脚本可以读取、更改网页的DOM。注意，他不能更改

中的内容。

内容脚本也不是和父扩展完全隔离开来，他也可以和父级扩展交换信息。如下图中所示，内容脚本在

发现一个RSS Feed地址后将会给发送一个信息。或者给

内容脚本发送一个信息要求改变网页外观。

不同页面间的交互

一个扩展中的文件常常需要交互。由于扩展的所有文件都由同一个进程执行，网页能够直接给其

他页面发送命令。

可以使用类似ion methods such as getViews() and

getBackgroundPage()这样的方法引用扩展中的方法。一旦页面中引用了另外的页面，第一个页面

就可以调用其他页面的函数，甚至可以控制DOM。

结束语

好了，你已经大概了解了一个扩展程序的基本内容，可以开始写作自己的扩展了。

本文由ChromeChina翻译，转载注明出处/

Chrome扩展开发指南(3)——Browser Action(扩展图标)

这是扩展开发指南的第三篇，前面我们首先作了第一个扩展，然后学习了Chrome扩展的大概

结构，看完后可能会有些迷惑，别担心，相信随着我们学习的深入，我们渐渐发现我们已经可以做扩

展了。当然为了做出优秀的扩展，我们还需要学习一些HTML、CSS、JavaScript的基础知识，

/网站就不错。

今天的文章翻译自/chrome/extensions/，

介绍Browser Action，即右侧的扩展图标。这节的内容还是挺有趣的。(同样，有翻译需要改进的地

方请指出来)

Browser Actions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一

个图标的功能外，还可以设置提示文字、图标标记、弹出窗口。

下图中，在地址栏右侧的彩色图标就是一个Browser Action。

Browser Actions创建的图标是一直可见的，如果你想创建一个不是一直不可见的图标，可以使用

page action。

Browser Action在Manifest文件中的位置

下面是个在扩展的manifest文件中注册browser action的例子：

















{

"name": "My extension",

...

"browser_action": {

"default_icon": "images/", // required

"default_title": "Google Mail", // optional; shown in tooltip

"default_popup": "" // optional

},

 ...

 }

复制代码

UI部分

Browser Action必须有一个图标。同时还可以有提示文字、图标标记、弹窗。

图标

Browser Action的图标会被浏览器缩放成19px*19px大小，太大的图标是没有意义的。

你可以用两种方法定义图标：用一个静态图片，或者用HTML中的canvas元素。用静态图片

的话简单些，但是用canvas元素可以创建更加平滑的图片。

静态图片可以是任意常见格式的图片，包括BMP, GIF, ICO, JPEG, or PNG。

我们可以在manifest文件中用default_icon语句来定义这个图标，也可以调用setIcon()函

数。

提示文字

提示文字是指将鼠标移到扩展图标上显示的文字。我们可以在manifest中用default_title定

义，也可以通过调用setTitle()函数。

图标标记

图标标记是指覆盖在扩展图标上的一些文字，比如Gmail提醒图标上未读邮件数，PR查询工具

上PR值。由于标记的位置很小，他最多只能容纳4个字母。

设置标记文字或者背景可以分别使用 setBadgeText() and setBadgeBackgroundColor()。

弹窗

当我们点击一些扩展的时候，会发现有个小弹窗出现,比如我们一开始的例子中。这个弹窗可以

包含任何HTML内容，他的大小也是和内容自适应的。

给Browser Action增加弹窗可以在manifest的default_popup定义弹窗中显示的html文

件名字，当然也可以使用setPopup()函数。

几个小提醒

为了扩展更加美观，请遵守下列守则：

仅在这个扩展需要在大部分页面运行的时候才使用browser action

仅在小部分页面起作用的话就不要用browser action，而是用page actions。

使用显眼的图标

不要试图模仿chrome浏览器原有的扳手/页面图标，你的扩展要独特一些。

你的图标边缘应该使用alpha透明，这样的话可以融合到各种不同的浏览器主题里。

例子解析

激动人心的时候来了，在这个文件夹下examples/api/browserAction有些browser action

的例子。其中有个set_page_color，我们试着重新编写他。

首先我们知道，首先新建一个文件夹myExtension用来存放所有文件，我们知道每个Chrome

扩展需要有个文件来描述这个扩展，新建文件，用文本编辑器打开，

输入：

 {

 "name": "我的扩展实例",

 "version": "1.0",

 "browser_action": {

 "default_title": "Set this page's color.",

 "default_icon": "",

 "popup": ""

 }

 }

复制代码

这是一个很简单的文件模板，其中browser_action就是这篇文章降到的东西，

default_title是描述，default_icon是图标，popup是弹窗。这里的弹窗调用了文

件，我们再创建一个文件，是个普通的HTML文件，内容如下：













复制代码

这个文件的内容有三种语言，HTML、CSS、JavaScript，这三种语言组成一个基本的网页，如

果你还不是很清楚的话可以以后慢慢学些。其中调用了Chrome接口函数

eScript，也是以后会看到的。整个文件的意思是：1、显示四格不同颜色的矩

形框，2、当点击这些矩形框的时候变换页面背景色。

我们还需要一个图标显示在工具栏上，把这个图片保存到文件夹中

好了，我们的扩展制作完成了，载入他们测试一下吧!

如果有一些JavaScript知识，可以修改这些扩展，创建一些丰富多彩的效果。

比如把中的

 function click(color) {

 eScript(null,

 {code:"oundColor='" + + "'"});

 ();

。

 }











复制代码

换成

 function click(color) {

 eScript(null,

 {code:"mentById('lg').getElementsByTagName('img')[0].src='"

+ "'"});

 ();

 }











复制代码

+

id="red"

在百度主页上打开这个扩展，点击第一个按钮"Google"，可以把百度的logo换成google的。

Chrome扩展开发指南(4)——Options Pages（选项页面）

你可以提供一个选项页面(Options Pages)让用户自定义你的扩展。如果设置了选项页面，那么

扩展管理页chrome://extensions将会有一个链接指向选项页面。

定义选项页面包括两步：

1、在manifest中定义选项页













{

"name": "My extension",

...

"options_page": "",

...

}

复制代码

上例中，options_page代表选项页面，是具体的文件地址。

2、编写选项页面

选项页面是一个典型的网页，下面是一个选项页面的例子：













 Favorite Color:





red



green



blue



yellow







 Save





复制代码

注意事项

早期版本的chrome可能不支持这个功能。

我们正计划提供一个默认的css来使得不同扩展的选项页面保持风格一致，你可以从这里

(/25317)查看最新的进展。

知识补充

上面的例子中使用LOCALSTORAGE保存数据，具体介绍可以查看《使用LOCALSTORAGE

保存数据》

Chrome扩展开发指南(5)——Override Pages(重置页面)

重置是一种用自己提供的页面替换Google Chrome默认页面的方法。一个重置页面常常是用

HTML、JavaScript、CSS组成。

当前，能够替换的页面只有新标新标签页，新标签页就是我们打开一个新标签时出现的页面。

我们可以把默认的新标签页：

替换成这种样式：

重置页面非常简单，只需在Manifest中定义自己的页面地址。比如下面的例子中，我们使用了

来重定义新标签页。

















{

"name": "My extension",

...

"chrome_url_overrides": {

"newtab": ""

},

...

}

复制代码

几点注意事项

为了让你定义的新标签页看起来不错，请遵循下面几点建议：

 保持页面简洁，使得能够快速加载

由于新标签页经常出现，外观就显得特别重要。比如我们要避免从远程调用数据，或者读取数据

库资源。

 确保有

 不要让键盘焦点在页面上

我们应该让用户新建标签页的时候键盘焦点在地址栏上。

 不要模仿默认的新标签页面

创建默认标签页的API（比如最近关闭的标签、最常访问的网站等等）不存在！你必须做出一些

完全不同的东西。

例子

这儿examples/api/override有一些重置新标签页的例子。

其中有个我们至学习以来碰到的最简单的例子，把新标签页面换成空白页面

新建文件：

 {

 "name": "空白的新标签页",

 "version": "0.1",

 "chrome_url_overrides": {

 "newtab": ""

 }

 }

复制代码

新建文件作为默认标签页，我们可以只写这样一句话：



复制代码

好的，看看效果吧，就这么简单，你现在就可以动手DIY了。

原文 /chrome/extensions/

由ChromeChina翻译，转载注明出处/

Chrome扩展开发指南(6)——Page Actions(地址栏图标)

地址栏图标代表的是页面内功能，这种功能只能在特地的当前页面发生，而不是所有页面都有这

种功能，也就是并不是所有页面上都能显示这样一个图标。

比如以下功能只在特定页面才有：

RSS订阅图标(仅在有rss订阅功能的网页中才显示)

幻灯片显示照片（仅在特定的照片分享网页中有这种功能）

下面是个显示RSS订阅图标的图：

如果你希望能够一直显示这个图标，可以使用扩展图标。

Manifest

定义地址栏图标使用类似下面的manifest文件：



















{

"name": "My extension",

...

"page_action": {

"default_icon": "icons/", // required

"default_title": "Do action", // optional; shown in tooltip

"default_popup": "" // optional

},

...

 }

复制代码

其中page_action代表地址栏图标相关参数，也就是页面功能的参数。

图标部分

类似于扩展图标，地址栏图标需要一个图片，同时也可以有提示和弹出窗口。但是他们不能带有

徽标，但是地址栏图标能够显示/隐藏。有关提示和弹出窗口的更多谢谢可以查看扩展图标。

我们可以用show()和hide() 函数分别使地址栏图标显示和隐藏。默认情况下，地址栏图标是

隐藏的。当你要显示这个图标的时候，你必须指定哪一个tab页面可以显示，这时候只有关闭了标签

页或者打开了一个不一样的网页地址地址栏图标才会不显示。

几点注意

请遵守以下几点约定：









在一部分页面中起作用的功能才使用地址栏图标

大部分页面起作用的功能请使用扩展图标。

请使用比扩展图标更小的图标，一般来说地址栏图标都小于19px，并且边缘会有模糊效果。

不要总是激活你的图标，那是很讨厌的。

实例

你可以在examples/api/pageAction文件夹下找到一些例子。

原文 /chrome/extensions/

由ChromeChina翻译，转载注明出处/

Chrome扩展开发指南(7)——Themes(主题制作)

在Chrome中，主题当做一个特殊的插件处理。主题要像普通文件一样打包，但是主题中不包

含HTML或者JavaScript代码。

你可以在主题库里找到一些主题下载。

下面只是简单介绍下主题制作，详细的内容可以参考

/p/chromium/wiki/ThemeCreationGuide

主题是在Manifest文件中定义的。下面是个定义主题的典型例子：











{

"version": "2.6",

"name": "camo theme",

"theme": {

"images" : {









"theme_frame" : "images/theme_frame_",

"theme_frame_overlay" : "images/theme_frame_",

"theme_toolbar" : "images/theme_toolbar_",

"theme_ntp_background" : "images/theme_ntp_background_",

 "theme_ntp_attribution" : "images/"

 },

 "colors" : {

 "frame" : [71, 105, 91],

 "toolbar" : [207, 221, 192],

 "ntp_text" : [20, 40, 0],

 "ntp_link" : [36, 70, 0],

 "ntp_section" : [207, 221, 192],

 "button_background" : [255, 255, 255]

 },

 "tints" : {

 "buttons" : [0.33, 0.5, 0.47]

 },

 "properties" : {

 "ntp_background_alignment" : "bottom"

 }

 }

 }

复制代码

我们看到在theme类下有几个元素，分为为images、colors、tints、properties。下面分别

介绍他们。

colors

用来定义基本颜色。颜色需要用RGB格式表示，你可以在browser_theme_查

看到底可以定义哪些内容。

images

图片需要用相对地址引用，你设置browser_theme_文件中

kThemeableImages数组的所有元素。去掉IDR_并且转化成小写格式后就是你需要设置的东西，

比如IDR_THEME_NTP_BACKGROUND 需要转化为theme_ntp_background。

properties

这个地方用来定义诸如背景定位方式、背景重复等属性。browser_theme_里面

可以看到有哪些属性可以定义。

tints

你可以给部分UI着色，比如按钮、框架、背景tab标签。(这里翻译可能有问题，chromechina

注)

原文 /chrome/extensions/由ChromeChina翻

译，转载注明出处/

Chrome扩展开发指南(8)——Bookmarks(书签操作)

我们可以用rks模块来对书签做创建、组织等操作。

Manifest

要对书签进行操作，必须要再Manifest文件中设置允许调用书签接口(bookmarks API)。一

般像下面这样写：

















{

"name": "My extension",

...

"permissions": [

"bookmarks"

],

...

}

复制代码

书签对象和属性

书签以树形机构组织，节点或是一个书签或者是个文件夹(可以包含多个书签)。每个节点都是一

个BookmarkTreeNode对象。BookmarkTreeNode对象在接口中会常常用到。比如我们调用

create()来创建书签的时候，我们要传递一个这个新节点的父节点(parentId属性)，另外还可以传

递index(兄弟节点中的排序，0开始), title(标题), url(地址)。

例子

下面代码调用create()创建了一个书签文件夹取名“Extension bookmarks”，第一个参数是个

json格式的对象，第二个参数定义了一个函数，这个函数将在创建完书签后调用。

 ({'parentId': ,

 'title': 'Extension bookmarks'},

 function(newFolder) {

 ("added folder: " + );

 });

复制代码

下面的例子里创建了一个指向这份开发文档的书签。这代码里面没有定义回调函数(callback

function).

 ({'parentId': extensionsFolderId,

 'title': 'Extensions doc',

 'url': '/chrome/extensions'});

复制代码

更多操作书签的例子可见在basic bookmarks sample找到。

有关BookmarkTreeNode对象的完整定义以及所有的书签函数可以点击这里查看，这部分的

内容计划放到最后翻译。

本文翻译自/chrome/extensions/

由ChromeChina翻译，欢迎到交流Chrome扩展开发技术。

Chrome扩展开发指南(9)——Events(事件)

事件(Event)就是当某些行为发生后要触发的函数。这些行为包括打开了一个新标签、点击了一

个按钮等。下面是利用ted行为(创建一个新标签页)，只要打开了一个新标签

页相应的事件就会被触发。

这个例子中，我们用addListener()来注册函数，addListener()的参数总是一个函数，但是这

个函数的参数根据事件类型不一样而不同。点击这里查看ted的更多信息，

你会发现这个函数有一个参数tab：一个用来描述新标签页的Tab对象。

下面的三个函数在任何事件中都可以使用：







void addListener(function callback(...))

void removeListener(function callback(...))

bool hasListener(function callback(...))

复制代码

本文翻译自/chrome/extensions/

由ChromeChina翻译，欢迎到交流Chrome扩展开发技术。