谷歌浏览器扩展开发入门

训练：入门 (Hello, World!)
这个训练会带你创建一个简单的扩展。您将在谷歌浏览器上添加一个图标，点击它后会显示一个自动生成的页面。这个图标和这个页面将会呈现类似的样子：


准备好您的浏览器
谷歌浏览器在Windows内一般的“stable channel”版本中支持扩展。如果想在Linux或Mac下开发扩展，您需要获取最新版本的谷歌浏览器。
- Windows: 使用谷歌浏览器的任何正式版本皆可
- Linux: 订阅 Beta channel
- Mac: 订阅 Dev channel

创建并载入一个扩展
在这个阶段，您将编写一个扩展，这个扩展在谷歌浏览器的工具栏上添加了一个浏览器动作。
1. 在您的电脑中任意位置创建一个文件夹用以包含您的扩展代码。
2. 在您的扩展文件夹中创建一个叫做manifest.json的文本文件，并且输入：
 

{
   "name": "My First Extension",
   "version": "1.0",
   "description": "The first extension that I made.",
   "browser_action": {
     "default_icon": "icon.png"
   },
   "permissions": [
     "http://api.flickr.com/"
   ]
 }

3. 把这个图标复制到相同的文件夹中：
下载图片
4. 载入这个扩展
a. 通过点选“工具”菜单里的“扩展”按钮，打开扩展管理页面。
b. 如果开发者模式有一个“+”号，则点击“+”将其改变为“-”，这样就弹出了更多的按钮和信息。
c. 点击“载入未打包的扩展”按钮，会弹出一个文件选择对话框。
d. 在这个对话框中，找到您的扩展文件所在的文件夹并点击OK。
如果您的扩展是有效的，则它的图标会紧挨着地址栏显示出来，且扩展的相关信息会出现在如下图的扩展页面中：


为扩展添加代码
在这个阶段，您将让您的扩展做些什么以看起来更好一些。
1. 编辑manifest.json，加入下列代码：
 

...
 "browser_action": {
   "default_icon": "icon.png",
   "popup": "popup.html"
 },
 ...

在您的扩展文件夹中，创建一个叫做popup.html的文本文件，并且加入如下代码：
CSS and JavaScript code for hello_world
2. 回到扩展管理页面，点击“重新载入”按钮载入一个新版本的扩展。
3. 点击扩展的图标。则一个弹窗会出现并且显示popup.htm的内容。
看起来的样子如下：

如果您没有看到弹窗，情重新按照这个步骤再仔细试一试。请不要载入扩展以外的HTML文件——那是不会正常工作的。

接下来做什么？
这里有一些接下来的建议：
- 阅读概述 (http://code.google.com/chrome/extensions/overview.html)
- 随着调试训练 (http://code.google.com/chrome/extensions/tut_debugging.html)
学习如何调试扩展
- 坚持关注最新的消息：订阅谷歌浏览器扩展消息 (http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe)
- 查阅一些扩展实例 (http://code.google.com/chrome/extensions/samples.html)
- 观看一些视频 (http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B)
，比如《如何创建一个扩展》 (http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101D6A85FE9D4B&index=3)