本文将从个人经验出发，讲述为什么需要Chrome插件，如何开发，如何调试，到哪里找资料，会遇到怎样的问题以及如何解决等，同时给出一个个人认为的比较典型的例子——获取网页内容，和服务器交互，再把信息反馈给用户。OK，准备开始吧，我尽量把文章写得好看点，以免读者打瞌睡。
目录
1. 2. 3. 4. 5. 6. 7. 8. 9.
为什么需要 为什么是Chrome 需要准备什么 如何开始 Page Action Chrome插件结构 学习资料 我的例子 调试
? ? ? ?
10.
总结
调试Content Scripts 调试Background 调试Popup 一些问题
为什么需要
简单地说，浏览器插件，可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能：捕捉特定网页的内容，捕捉HTTP报文，捕捉用户浏览动作，改变浏览器地址栏/起始页/书签/Tab等界面元素的行为，与别的站点通信，修改网页内容……给你增加许多想象空间，试想想看，你可以用它来识别一些网站上的广告代码，并直接把这些代码删掉，这样你就不会受到广告的困扰了，没错，如你所愿，这样的插件别人已经开发好了，你可以直接用。不过，也要说浏览器插件的弊端，那就是：会带来一些安全隐患，也可能让你的浏览器变得缓慢甚至不稳定。
为什么是Chrome
因为Chrome的插件开发起来最简单，总体上看没什么新的技术，开发语言就是javascript，web前端工程师能很快上手；而Firefox的插件开发则复杂许多，涉及到环境的搭建和一些WEB以外的技术；IE的插件开发就更复杂了，需要熟悉C++和COM技术，当然还要装微软的Visual Studio。
这里有篇老外写的文章，对比Chrome、Opera和Firefox的插件开发的：
http://blog.nparashuram.com/2011/10/writing-browser-extensions-comparing.html。
应该说Chrome和Opera的插件的开发都不难，但Firefox的则比较棘手，也许你要问，那为什么Firefox的插件是最丰富的？我想这有些历史原因，Chrome出来毕竟比较晚，另外几种浏览器提供的插件的功能也是不尽相同的，OK，我们还是言归正传吧。
需要准备什么
几乎是零需求。Chrome浏览器和一个文本编辑器即可，文本编辑器最好是带语法高亮的那种。谷歌对我们做技术的人来说真是太大度了。
如何开始
强烈建议看看官方的说明：https://developer.chrome.com/extensions/getstarted.html。
文章不长，照着文章去做，完成后，你就成功开发了第一个Chrome插件，这个插件会弹出一个小窗口，上面显示些阿猫阿狗的小图片。如图：
这个插件一共有4个文件：
? ? ? ?
manifest.json - 所有插件都要有这个文件，这是插件的配置文件，可看作插件的“入口”。
icon.png - 小图标，推荐使用19*19的半透明png图片，更好的做法是同时提供一张38*38的半透明的png图片作为大图标，在我后面提供的例子中，我就是那么干的。
popup.html - 就是你所看到的那个阿猫阿狗的弹出页面。 popup.js - 阿猫阿狗页面所引用的javascript文件。
这里千万千万注意了，我当初没仔细看popup.html里有一小段注释，这一小段注释说：出于安全考虑，javascript必须与html分开存放。而我想嘛，一个小测试程序，没必要分开吧，直接写一起不就行了吗？结果javascript死活执行不了，我翻来覆去找不到原因，还以为弹出的小窗口不支持javascript，在网上搜索了半天又没有结果，最后才发现是这个原因，浪费了许多时间，这个事情也一定程度上说明了：细节决定成败。 manifest.json中的内容也非常显而易见，我选择其中几个属性讲一下：
{
\,
\,
\action with kittens.\, \,
\: [
\ ],
\: {
\, \ } }
\：现在应该总是2。
\：很重要的东西，即允许插件做哪些事情，访问哪些站点，假如一个插件的\里写有“http://*.hacker.com/”，那么这个插件就被允许访hacker.com上的所有内容，包括可能会把你的一些个人信息提交给hacker.com，危险性不言而喻，查看一个插件能访问那些站点的方法是：在chrome的地址栏里输入“chrome://extensions/”（注意：这个页面我们之后要频繁用到，请收藏一下），然后点对应插件的旁边的那个“权限”，如：
\：用来指定点击小图标后弹出的小窗口中默认显示的是哪个html，这个弹出的小窗口就叫做“popup”。
\：这是一个浏览器级的动作，也就是说，不管你现在在访问哪个页面，那个小按钮总是显示出来，而我们的插件如果仅仅是针对某些页面的话，就不适合用这个\了。下面我们来弄一个只有访问博客园（www.cnblogs.com）才会出现的小按钮。 Page Action
chrome-plugin-page-action-demo.7z
这个插件只有4个文件，其中两个还是图标，那就只剩下一个必须的manifest.json和一个background.js了。 mainifest.json：
{
\,
\,
\,
\] }, \], \: {
\: {
\, \ },
\\article information\ } }
注意：这里是“page_action”而不是“browser_action”属性了。
“permissions”属性里的“tabs”是必须的，否则下面的js不能获取到tab里的url，而这个url是我们判断是否要把小图标show出来的依据。background是什么概念？这是一个很重要的东西，可以把它认为是chrome插件的主程序，理解这个很关键，一旦插件被启用（有些插件对所有页面都启用，有些则只对某些页面启用），chrome就给插件开辟了一个独立的javascript运行环境（又称作运行上下文），用来跑你指定的background script，在这个例子中，也就是background.js。 background.js
function getDomainFromUrl(url){ var host = \;
if(typeof url == \null == url) url = window.location.href; var regex = /.*\\:\\/\\/([^\\/]*).*/; var match = url.match(regex);
if(typeof match != \null != match) host = match[1]; return host; }
function checkForValidUrl(tabId, changeInfo, tab) {
if(getDomainFromUrl(tab.url).toLowerCase()==\com\){
chrome.pageAction.show(tabId); } };
chrome.tabs.onUpdated.addListener(checkForValidUrl);
代码中，我们使用了一个正则表达式去匹配url，获取出其中的domain部分，如果domain部分是“www.cnblogs.com”的话，就把小图标show出来，效果如下：
相关推荐：
loading