简单的Chrome 扩展开发

一、入门

这是制作chrome扩展插件的入门指南，不需要任何编程基础，看完这个后，我们就着手做自己的Chrome插件了。好吧，我们现在就开始，其实我也是个新手。

准备工具

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

• 记事本，用来编写代码
• Chrome浏览器，这个不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本，Mac下载dev版本。

开始制作第一个插件

• 在计算机中创建一个目录来存放插件代码。
• 在目录里面创建文件manifest.json(注意后缀名是.json)，用记事本打开，写入如下代码
  1. {
  2.   "name": "第一个Chrome插件",
  3.   "version": "1.0",
  4.   "description": "我的第一个Chrome插件，还不错吧",
  5.   "browser_action": {
  6.     "default_icon": "icon.gif"
  7.   }
  8. }

  
  
• 把下面两张图片保存到文件夹中，分别取名icon.gif和smile.gif
  图片一：      图片二： 
• 安装这个插件:
  a.点击右上角扳手，选择扩展程序，打开扩展中心。
  b.点击右上角的“开发人员模式”，使得前面的“+”变成“-”，打开相应的菜单。如果一开始就是“-”，那么不用点击。
  c.点击“载入正在开发的扩展程序按钮”，导入刚才创建的文件夹。

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

给第一个插件增加新功能

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

• 编辑manifest.json这个文件，用下面的代码替换现有的代码，其实我们只是加了一行代码和一个逗号而已。
  1. { 
  2.    "name": "第一个Chrome插件", 
  3.    "version": "1.0", 
  4.    "description": "我的第一个Chrome插件，还不错吧", 
  5.    "browser_action": { 
  6.       "default_icon": "icon.gif", 
  7.       "popup": "popup.html" 
  8.    }
  9. }
• 下面我们创建一个文本文件popup.html，用记事本打开，将下面的代码写进去
  1. <p>Hello,Chrome!</p>
  2. <p>我的名字叫ChromeChina!</p>
  3. <p><a href="http://www.chromechina.com" target="_blank">Chrome中文论坛欢迎你</a>
  4. <p><img src="smile.gif" /></p>

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

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

打包插件

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

• 回到Chrome的插件扩展中心，点击“打包扩展程序”按钮。
• 选择刚才创建的文件夹，点击确定生成后缀为crx和cpm文件各一个。

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

你可以修改里面的文字图片，制作出极具个性的扩展来了。

要是在制作过程中有任何问题，欢迎到http://dev.chromechina.com来讨论交流。本文参考官方指南http://code.google.com/chrome/extensions/编写。

二、概述

这篇文章翻译自http://code.google.com/chrome/extensions/overview.html。

只要看完这篇文章，并且做过入门指南中的例子，你就可以真正开始开发属于自己的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中有个图片myimage.png，我们可以这样调用它

1. <img src="images/myimage.png">

复制代码

其中images/myimage.png表示这个文件。

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

1. chrome-extension://<extensionID>/<pathToFile>

复制代码

这个地址中，<extensionID>是你制作的扩展的唯一标示符，也就是扩展的身份证编号。<pathToFile>是文件相对扩展顶级文件夹得位置。

manifest文件

主文件取名manifest.json，用来描述这个扩展，包括扩展名字、版本、调用的文件、可用域等信息。下面是个典型的manifest文件，这个扩展可以调用google.com的内容。

1. {
2.   "name": "My Extension",
3.   "version": "2.1",
4.   "description": "Gets information from Google.",
5.   "icons": { "128": "icon_128.png" },
6.   "background_page": "bg.html",
7.   "permissions": ["http://*.google.com/", "https://*.google.com/"],
8.   "browser_action": {
9.     "default_title": "",
10.     "default_icon": "icon_19.png",
11.     "popup": "popup.html"
12.   }
13. }

复制代码

扩展结构组成结构

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

上面这个图片显示的浏览器至少安装了两个扩展：一个浏览器行为扩展(黄色的图标),页面行为扩展(蓝色的图标)。这个浏览器行为扩展的background文件是用一个HTML文件定义的(background.html)，这个background文件中有JavaScript代码控制整个浏览器的活动。

HTML页面

background不是唯一存在的HTML文件，比如浏览器行为可能是弹出一个小窗口，这个小窗口的内容就可以调用一个HTML文件。Chrome扩展也能够用chrome.tabs.create() or window.open()这种函数来显示HTML文件。

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

下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。这个弹出窗口的内容是一个HTML的web文件，这个弹出窗口不需要包含background文件中的代码，因为，popup.html和background是可以互相访问的。

内容脚本(Content scripts)

如果你插件需要和网页交互，那么他就需要一个内容脚本(Content scripts)，内容脚本常由JavaScript编写，会在网页载入完成后调用。完全可以把内容脚本看做是网页的一部分，而不是扩展的一部分。

内容脚本可以访问到当前浏览器浏览的页面，而且还可以改变网页的显示方式(油猴脚本就是内容脚本)。下面的图片中，内容脚本可以读取、更改网页的DOM。注意，他不能更改background.html中的内容。

内容脚本也不是和父扩展完全隔离开来，他也可以和父级扩展交换信息。如下图中所示，内容脚本在发现一个RSS Feed地址后将会给background.html发送一个信息。或者background.html给内容脚本发送一个信息要求改变网页外观。

不同页面间的交互

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

可以使用类似chrome.extension methods such as getViews() and getBackgroundPage()这样的方法引用扩展中的方法。一旦页面中引用了另外的页面，第一个页面就可以调用其他页面的函数，甚至可以控制DOM。

结束语

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

本文由ChromeChina翻译，转载注明出处http://dev.chromechina.com/

三、扩展图标

这是扩展开发指南的第三篇，前面我们首先作了第一个扩展，然后学习了Chrome扩展的大概结构，看完后可能会有些迷惑，别担心，相信随着我们学习的深入，我们渐渐发现我们已经可以做扩展了。当然为了做出优秀的扩展，我们还需要学习一些HTML、CSS、JavaScript的基础知识，http://www.w3school.com.cn/网站就不错。

今天的文章翻译自http://code.google.com/chrome/extensions/browserAction.html，介绍Browser Action，即右侧的扩展图标。这节的内容还是挺有趣的。(同样，有翻译需要改进的地方请指出来)

Browser Actions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一个图标的功能外，还可以设置提示文字、图标标记、弹出窗口。

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

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

Browser Action在Manifest文件中的位置

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

1. {
2.   "name": "My extension",
3.   ...
4.   "browser_action": {
5.     "default_icon": "images/icon19.png", // required
6.     "default_title": "Google Mail",      // optional; shown in tooltip
7.     "default_popup": "popup.html"        // optional
8.   },
9.   ...
10. }

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扩展需要有个manifest.json文件来描述这个扩展，新建文件manifest.json，用文本编辑器打开，输入：

1. {
2.   "name": "我的扩展实例",
3.   "version": "1.0",
4.   "permissions": [
5.     "tabs", "http://*/*", "https://*/*"
6.   ],
7.   "browser_action": {
8.       "default_title": "Set this page's color.",
9.       "default_icon": "icon.png",
10.       "popup": "popup.html"
11.   }
12. }

这是一个很简单的manifest.json文件模板，其中browser_action就是这篇文章降到的东西，default_title是描述，default_icon是图标，popup是弹窗。这里的弹窗调用了popup.html文件，我们再创建一个文件popup.html，popup.html是个普通的HTML文件，内容如下：

1. <style>
2. body {
3.   overflow: hidden;
4.   margin: 0px;
5.   padding: 0px;
6.   background: white;
7. }
9. div:first-child {
10.   margin-top: 0px;
11. }
13. div {
14.   cursor: pointer;
15.   text-align: center;
16.   padding: 1px 3px;
17.   font-family: sans-serif;
18.   font-size: 0.8em;
19.    100px;
20.   margin-top: 1px;
21.   background: #cccccc;
22. }
23. div:hover {
24.   background: #aaaaaa;
25. }
26. #red {
27.   border: 1px solid red;
28.   color: red;
29. }
30. #blue {
31.   border: 1px solid blue;
32.   color: blue;
33. }
34. #green {
35.   border: 1px solid green;
36.   color: green;
37. }
38. #yellow {
39.   border: 1px solid yellow;
40.   color: yellow;
41. }
42. </style>
43. <script>
44. function click(color) {
45.   chrome.tabs.executeScript(null,
46.       {code:"document.body.style.backgroundColor='" + color.id + "'"});
47.   window.close();
48. }
49. </script>
50. <div onclick="click(this)" id="red">red</div>
51. <div onclick="click(this)" id="blue">blue</div>
52. <div onclick="click(this)" id="green">green</div>
53. <div onclick="click(this)" id="yellow">yellow</div>

这个文件的内容有三种语言，HTML、CSS、JavaScript，这三种语言组成一个基本的网页，如果你还不是很清楚的话可以以后慢慢学些。其中调用了Chrome接口函数chrome.tabs.executeScript，也是以后会看到的。整个文件的意思是：1、显示四格不同颜色的矩形框，2、当点击这些矩形框的时候变换页面背景色。

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

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

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

比如把popup.html中的

1. function click(color) {
2.   chrome.tabs.executeScript(null,
3.       {code:"document.body.style.backgroundColor='" + color.id + "'"});
4.   window.close();
5. }
6. </script>
7. <div onclick="click(this)" id="red">red</div>
8. <div onclick="click(this)" id="blue">blue</div>
9. <div onclick="click(this)" id="green">green</div>
10. <div onclick="click(this)" id="yellow">yellow</div>

换成

1. function click(color) {
2.   chrome.tabs.executeScript(null,
3.       {code:"document.getElementById('lg').getElementsByTagName('img')[0].src='" + color.title + "'"});
4.   window.close();
5. }
6. </script>
7. <div onclick="click(this)" id="red" title="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">Google</div>
8. <div onclick="click(this)" id="blue">blue</div>
9. <div onclick="click(this)" id="green">green</div>
10. <div onclick="click(this)" id="yellow">yellow</div>

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

四、选择页面

你可以提供一个选项页面(Options Pages)让用户自定义你的扩展。如果设置了选项页面，那么扩展管理页chrome://extensions将会有一个链接指向选项页面。

定义选项页面包括两步：

1、在manifest中定义选项页

1. {
2.   "name": "My extension",
3.   ...
4.   "options_page": "options.html",
5.   ...
6. }

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

2、编写选项页面

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

1. <html>
2. <head><title>My Test Extension Options</title></head>
3. <script type="text/javascript">
5. // Saves options to localStorage.
6. function save_options() {
7.   var select = document.getElementById("color");
8.   var color = select.children[select.selectedIndex].value;
9.   localStorage["favorite_color"] = color;
11.   // Update status to let user know options were saved.
12.   var status = document.getElementById("status");
13.   status.innerHTML = "Options Saved.";
14.   setTimeout(function() {
15.     status.innerHTML = "";
16.   }, 750);
17. }
19. // Restores select box state to saved value from localStorage.
20. function restore_options() {
21.   var favorite = localStorage["favorite_color"];
22.   if (!favorite) {
23.     return;
24.   }
25.   var select = document.getElementById("color");
26.   for (var i = 0; i < select.children.length; i++) {
27.     var child = select.children[i];
28.     if (child.value == favorite) {
29.       child.selected = "true";
30.       break;
31.     }
32.   }
33. }
35. </script>
37. <body onload="restore_options()">
39. Favorite Color:
40. <select id="color">
41. <option value="red">red</option>
42. <option value="green">green</option>
43. <option value="blue">blue</option>
44. <option value="yellow">yellow</option>
45. </select>
47. <br>
48. <button onclick="save_options()">Save</button>
49. </body>
50. </html>

注意事项

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

我们正计划提供一个默认的css来使得不同扩展的选项页面保持风格一致，你可以从这里(http://crbug.com/25317)查看最新的进展。

知识补充

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

原文 http://code.google.com/chrome/extensions/options.html

由ChromeChina翻译，转载注明出处http://dev.chromechina.com/

五、重置页面

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

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

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

替换成这种样式：

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

1. {
2.   "name": "My extension",
3.   ...
4.   "chrome_url_overrides": {
5.     "newtab": "newtab.html"
6.   },
7.   ...
8. }

几点注意事项

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

• 保持页面简洁，使得能够快速加载
  由于新标签页经常出现，外观就显得特别重要。比如我们要避免从远程调用数据，或者读取数据库资源。
• 确保有<title>标签
  如果没有<title>，大家讲会看到页面的URL，这会让人很迷惑，我们应该包含这样一句 <title>New Tab's Name</title>
• 不要让键盘焦点在页面上
  我们应该让用户新建标签页的时候键盘焦点在地址栏上。
• 不要模仿默认的新标签页面
  创建默认标签页的API（比如最近关闭的标签、最常访问的网站等等）不存在！你必须做出一些完全不同的东西。

例子

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

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

新建manifest.json文件：

1. {
2.   "name": "空白的新标签页",
3.   "version": "0.1",
4.   "chrome_url_overrides": {
5.     "newtab": "blank.html"
6.   }
7. }

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

1. <title>新标签页</title>

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

原文 http://code.google.com/chrome/extensions/override.html
由ChromeChina翻译，转载注明出处http://dev.chromechina.com/

以上文章均转自 Chrome扩展插件开发论坛