教程：开始（Hello,World！）

这个教程先带着你做一个简单的Chrome插件。添加一个图标到Google Chrome上，当你点击的时候，将自动生成一个页面。如下图示例：

准备好浏览器

Window下可用一般的稳定版开发扩展，但是要在其他Linux或者Mac上开发扩展要使用其他的最新的Google Chrome分支。

编写和装载一个扩展

在这个部分，你将编写一个添加在Chrome工具栏的浏览器动作的扩展。.

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. 拷贝下图到你的扩展文件夹下:
   

   Download icon.png

   4.   装载扩展.

1. 点击打开扩展管理,点击"扩展管理程序".
2. 假如开发人员模式旁边有个"+",点击加号,打开开发的面板
3. 点击载入正在开发的扩展程序,一个本地文件选择打开
4. 在文件对话框中，找到你的扩展文件夹选中，点击确定。

如果你的扩展无措可用的话，那个图标将会出现在工具栏上，扩展信息出现在扩展管理页面上，如下图所示.

向扩展中添加代码

接下来，让你的扩展干点事情吧，它可不只是个装饰。

1. 向manifest.json添加一行:

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

   在扩展文件夹下，创建popup.html文件，添加如下代码:

   :

   CSS and JavaScript code for hello_world(查看源文件)

2. 回到Chrome的扩展控制面板，点击重新载入，刷新扩展程序.
3. 点击扩展图标，弹出的面板显示出了popup.html中的内容。看起来像这样子.

假如运行没有成功，在按照教程来一遍，保证操作正确，加载一个不属于扩展文件夹的Html文件是不行的!

 我当时参照教程写的插件：http://cssrain.cn/article.asp?id=1434

原文：http://code.google.com/chrome/extensions/getstarted.html
来自：http://www.cnblogs.com/island205/archive/2010/03/18/1688609.html

建议继续学习：

1. 浏览器的工作原理：新式网络浏览器幕后揭秘    (阅读：19200)
2. 浅析http协议、cookies和session机制、浏览器缓存    (阅读：15458)
3. Chrome和goagent的配置方法，你懂的    (阅读：15224)
4. 从输入 URL 到页面加载完成的过程中都发生了什么事情？    (阅读：14206)
5. 分享一个JQUERY颜色选择插件    (阅读：12379)
6. jQuery Color Animations颜色动画插件    (阅读：6914)
7. 程序员眼里IE浏览器是什么样的    (阅读：6586)
8. 浏览器的渲染原理简介    (阅读：6125)
9. 精于图片处理的10款jQuery插件    (阅读：6042)
10. 各种浏览器审查、监听http头工具介绍    (阅读：6002)