看了好多回答，基本上都是推荐的教程，然而 Google 的官方教程得翻墙才能看，360 的文档又太老，刚好最近兴趣来了想学习写 Chrome 扩展，就顺便写了个入门教程，有不对或者不完善的地方欢迎指正。

一个 Chrome 扩展其实就是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件的集合，所以只要有前端基础，写一个简单的 Chrome 扩展是分分钟的事情。

由于 html、css、js 及文件组织，跟普通的 web 开发一样，那写 Chrome 扩展主要就是 manifest 文件的编写和扩展的调试了，下面以一个股票信息查看 扩展和一个天气预报 扩展举例。

一、manifest 文件的编写

1. 基本属性

包括扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 manifest 版本（manifest_version）等信息。

其中，name、version 和 manifest_version 是必须的，而且 manifest_version 必须为 2

栗子：

{..."manifest_version": 2,"name": "Weather","description": "a currently clone","version": "0.1",...
}

2. browser_action

browser_action 指定扩展的图标放在 Chrome 工具栏中，它定义了扩展图标文件位置（default_icon）、悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）。

栗子：

{..."browser_action": {"default_icon": {"19": "images/icon19.png","38": "images/icon38.png"},"default_title": "stock helper","default_popup": "popup.html"},...
}

比如一个查看股票信息的扩展，点开图标后是这样的效果：

3. options_page

options_page 属性定义了扩展的设置页面，配置后在扩展图标点击右键可以看到 选项，点击即打开指定页面。对于没有图标（没有设置 browser_action ）的扩展，可以在 chrome://extensions/ 页面找到选项按钮。

栗子：

{..."options_page": "options.html",...
}

4. permissions

permissions 属性是一个数组，它定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）等，可以根据需要添加。

栗子：

{..."permissions": ["http://api.wunderground.com/api/""tabs","activeTab","notifications","storage"],...
}

5. background

background 可以使扩展常驻后台，比较常用的是指定子属性 scripts，表示在扩展启动时自动创建一个包含所有指定脚本的页面。

栗子：

{..."background": {"scripts": ["js/background.js"]},...
}

6. chrome_url_overrides

chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面，比如新标签页（newtab）、书签页面（bookmarks）和历史记录（history）。

栗子：

{..."chrome_url_overrides": {"newtab": "tab.html"},...
}

结合前面的 background 属性，可以做一个打开新标签页，就能看到天气和当前时间的扩展，如下图：

二、扩展的调试

打开 Chrome 设置-扩展程序（chrome://extensions/）页面，勾选 开发者模式，点击加载正在开发的扩展程序 按钮，选择扩展所在的文件夹，就可以在浏览器工具栏中看到自己写的扩展了。

如果是带图标的扩展，右键点击图标，点击审查弹出内容，在相应位置加断点，然后在控制台上，输入以下命令：

location.reload()

重新加载这个页面，就可以调试了。

如果是覆盖新标签页的应用，直接右键审查元素，加断点，刷新即可。

大致就这些了，想写复杂的 Chrome 扩展，再去自行深入了解吧~~

webstore开发本人其实也是新手，但些许经验应该能帮助到其他人：

1.如何优雅的调试

右键Chrome工具栏的小图标会弹出一个窗口，选择审查弹出内容即可调试。
但是这种方法极度低效，直接chrome://extensions/找到你插件的ID：

然后浏览器访问：

chrome-extension://<插件ID>/插件入口html文件

比如我的是：

chrome-extension://fnfchnalfnjbjbfeccpophocngdgapad/index.html

然后就可以愉快的调试了。

2.如何查看其他插件的源码

访问chrome://version 找到Chrome插件安装的本机目录:

然后找到extension目录，所有插件和数据都在这里，可以随便参考其他插件源码。

3.不要把JS代码写在html文件里

出于安全考虑，入口html文件中的JS代码只能通过script标签引用外部脚本文件，内嵌的JS代码会失效的。

4.注意国际化

webstore面向的是全球用户，你辛辛苦苦写的小工具肯定不想只限于国内用户吧，所以在你的项目里面加上_locales文件夹，写代码的时候时刻考虑到如何才能更好地支持国际化。

5.用好Google

开发遇到的问题Google一下一般能找到，StackOverflow 和Google网上论坛这两个站点要尤其留意，大部分问题这上面都有解决方案。

更多小技巧就不一一列举了，多看官方文档，有更详细的介绍。

应用发布

应用写好之后打包上传就好了，上传时Google会让你提供几张宣传图片（自己随便ps了一下）每一个需要填写的选项后面都有详细说明，需要认真阅读一下。

发布之后大概过上几个小时就能在webstore搜索到你的应用了：

iBookmark

至此大功告成，之后可以继续关注你的应用情况，适时更新。
最后附上自己写的一个Chrome收藏夹插件源码，仅供参考交流：

GitHub - 0326/iBookmark: Chrome extension for manage bookmarks

实际上，大家看我应用里面的截图写的是plug-in,实际上我写错了,Chrome 的plug-in和extension还是有区别的555