谷歌浏览器插件开发

例子：http://open.chrome.360.cn/extension_dev/samples.html#fbf0aa1a09a15ff8cc4fc7de4fd176d6c663d07a

官方教程：https://developer.chrome.com/extensions/devguide

https://developer.chrome.com/extensions

官方例子： http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/

调试 http://open.chrome.360.cn/extension_dev/tut_debugging.html

这个指南会向您介绍如何使用Chromium的内建开发工具进行应用（扩展）调试。

查看应用（扩展）信息

1.加载Hello World应用（扩展）。如果这个应用（扩展）正在运行中，你将在浏览器右边的地址栏上看到Hello World的图标。
如果这个应用（扩展）并未运行，你可以找到应用（扩展）文件，并且加载它们。如果你没有应用（扩展）文件，可以在这里下载它的zip文件，然后按创建扩展范例的方法加载它。

2.前往扩展页，地址 chrome://extensions，确认这个页面在开发者模式下。

3.查看Hello World应用（扩展）的信息，你能看到应用（扩展）的名称、描述、应用（扩展）ID。

观察popup页面

1.前往扩展页，地址 chrome://extensions，确认这个页面在开发者模式下，扩展页并不需要被打开，只要浏览器记住了这个设置即可。

2.右键点击Hello World 图标 ，然后选择“审查弹出内容”菜单项，popup.html将会被显示在开发工具窗口中。

3.如果脚本按钮没有被选中了，点击它。

4.点击控制台按钮 ，（在开发者窗口的左下角，第二个按钮就是）这样你可以即看到代码，又看到控制台。

使用调试器

1.搜索”img.src”，然后在这个位置设置断点，只要在行号上单击即可设置。（比如：37行）。

2.确认你能看到popup.html标签，它将显示20个“hello world”图片。

3.在控制台上，重新加载这个页面。命令：location.reload(true);

> location.reload(true)

4.在工具窗口的右上方，你能看到局部变量。在这个例子中，它会显示出所有当前范围所见的变量。例如：在下面的屏幕截图上，变量i=0，photos则列出了一部分的Element列表。实际上，它包含了20个元素，每个代表一个图片。

5.点击play/pause按钮 （在开发者工具窗口的上右方）做一次图像处理循环，每次你点击这个按钮，i会加1，popup页面会显示更多另外的图标，当i是10的时候，popup页看起来像如下图所示：

6.点击play/pause按钮后面的的按钮，可以步进到函数调用的上层，为了让页面完成加载，点击之前的第37行，禁用之前设置的断点，接着按下play/pause按钮继续执行。

总结

这个指南示范了简单的应用（扩展）调试，总结一下：

1.在扩展管理页面上(chrome://extensions)，找到应用（扩展）ID;

2.查看应用（扩展）中的文件，使用类似这样的格式访问 chrome-extension://extensionId/filename

3.使用开发者工具设置脚本断点，单步调试，查看变量

4.使用控制台命令 location.reload(true)来重新加载当前的调试页面

Chrome插件开发简单实战教程   转自：http://www.chromi.org/archives/13915

Chrome凭借其简单，稳定，快速的优点迅速风靡全球，占领浏览器市场，直逼IE的市场份额，超越也只是时间问题。初次打开Chrome浏览器，你会发现整个页面只有一个地址栏，一对箭头，刷新按钮和一把扳手，当然还有最重要的空白页面，这就是Chrome的整体构造，可以说是最简单的浏览器了，但是仔细深入你会Chrome的功能远不止这些，通过Chrome的扩展中心你可以安装成千上万的插件来丰富你的浏览器功能，这时你就会发现Chrome的强大之处。

Chrome的扩展中心地址是 https://chrome.google.com/webstore，里面有全球的开发者开发的插件，你只需要选择，然后点击添加到Chrome即可。目前从事Chrome开发的人非常少，我觉得可能是某种网络不稳定因素造成的Google服务不稳定，导致了大家都不愿意开发这片市场，所以在网络上关于Chrome开发的资料少之又少，目前官方的开发文档也都是英文的，阻挡了不少E文小白对Chrome开发的热情。
Chrome官方开发文档地址：http://code.google.com/chrome/extensions/dev/devguide.html 我大致看了一下，对他的结构也有所了解，这里将做一个简单的实战来检测一下我的开发水平。 学艺不精，多多包涵，老鸟路过，新手可以参考下，作为入门教程。

过去大家在添加插件后，图标会出现在地址栏的右边，点击即可快速打开插件，在新版的Chrome中，又多出了一个叫Apps的东西，如下图画红线的部分：

App的开发和扩展大同小异，为了满足大家的成就感快速开发出一个可用的App这里就从App讲解。

一个最简单的APP需要由一个图标和一个名为manifest.json的文件组成。

第一步：

新建一个文件夹，准备一个图标，建议128×128大小的。然后创建一个文件，命名为manifest.json，用记事本打开，复制以下代码：


{
"app": {
"launch": {
"web_url": "http://blog.sina.com.cn/eyeofming"
},
"urls": [ "http://blog.sina.com.cn/eyeofming" ]
},
"description": "Ming's China Blog",
"icons": {
"128": "eye.png"
},
"name": "Eye Of Ming",
"version": "1.0"
}


web_url和url是你要启动的网址，description是App的描述，icons下的128是图标的尺寸，比如说你的图标是16×16的，那么你就填16，建议128×128的大小，然后eye.png就是你的图标文件名。name是App的名字，下面的version是版本号，这个就自定义了，需要注意的是避免使用中文，一定要用utf-8。

第二步：

这一步可以称之为调式，在Chrome中输入chrome://settings/extensions 打开插件页，先勾选开发者模式，这样会出现一个载入插件的选项，如下图：

点击载入插件后，在路径中找到保存文件的文件夹然后打开就行了，如果顺利的打开，就说明你的插件没有任何问题，如果错误的话，他会提示你在哪里错了，然后按照他的提示修改就行了。来看看我的作品，如下图：

是不是很简单，如果你还没学会，不要急多试几次就好了，这里是打包的源码，大家可以自行修改。

第三步：

制作好App后，要想出现在Google的扩展中心你需要提交给Google进行审核，提交地址：https://chrome.google.com/webstore/developer/update 注意要压缩成zip格式后提交，不要用.crx格式。上传后，填写相关信息，然后就是等待审核上线。