因为Chrome的插件开发起来最简单，总体上看没什么新的技术，开发语言就是javascript，web前端工程师能很快上手；而Firefox的插件开发则复杂许多，涉及到环境的搭建和一些WEB以外的技术；IE的插件开发就更复杂了，需要熟悉C++和COM技术，当然还要装微软的VisualStudio。
应该说Chrome浏览器和Opera的插件的开发都不难，但Firefox的则比较棘手，也许你要问，那为什么Firefox的插件是最丰富的？我想这有些历史原因，Chrome出来毕竟比较晚，另外几种浏览器提供的插件的功能也是不尽相同的，OK，我们还是言归正传吧。
几乎是零需求。Chrome浏览器和一个文本编辑器即可，文本编辑器最好是带语法高亮的那种。谷歌对我们做技术的人来说真是太大度了。
这个插件一共有4个文件：
manifest.json中的内容也非常显而易见，我选择其中几个属性讲一下：
"default_popup"：用来指定点击小图标后弹出的小窗口中默认显示的是哪个html，这个弹出的小窗口就叫做“popup”。
"browser_action"：这是一个浏览器级的动作，也就是说，不管你现在在访问哪个页面，那个小按钮总是显示出来，而我们的插件如果仅仅是针对某些页面的话，就不适合用这个"browser_action"了。下面我们来弄一个只有访问博客园（www.cnblogs.com）才会出现的小按钮。
1插件只有4个文件，其中两个还是图标，那就只剩下一个必须的manifest.json和一个background.js了。
mainifest.json：
“permissions”属性里的“tabs”是必须的，否则下面的js不能获取到tab里的url，而这个url是我们判断是否要把小图标show出来的依据。background是什么概念？这是一个很重要的东西，可以把它认为是chrome插件的主程序，理解这个很关键，一旦插件被启用（有些插件对所有页面都启用，有些则只对某些页面启用），chrome就给插件开辟了一个独立的javascript运行环境（又称作运行上下文），用来跑你指定的backgroundscript，在这个例子中，也就是background.js。
background.js
当然了，你现在点那个小图标的话，是没有任何反应的，我没有像官方提供的那个例子那样提供了popup。OK，现在是时候描述下chrome插件的结构了。
如图，manifest.json作为插件的配置文件，同时可以看作程序的“入口”，因为它指定了显示什么图标，backgroundscript有哪些文件，contentscript又有哪些文件，popup的页面是什么，等等。
什么是popup，什么是backgroundscript，相信大家都清楚了，那什么是contentscript呢？contentscript就是我们要注入到页面中的脚本，插件允许我们往网页中注入脚本，这是一个多么让人有想象力的功能，其功能之强大无需多解释，总的来说，就是让我们全面干预页面的内容！也许你马上会想到，这可能带来很大的安全隐患，没错，有些恶意插件会窃取你的页面信息，而有些有漏洞的插件则可能让你遭受跨站脚本注入（XSS）的攻击；另一个可能你会想到的问题是：往页面中注入自己的脚本，难道不会跟页面原本的脚本发生冲突吗？能想到这点说明你真的很厉害，如果我们的注入脚本和页面原本的脚本处于同一个运行环境中，确实会发生冲突，所以，Chrome是另外开辟了一个独立的运行空间，供我们的ContentScript使用的，ContentScript能访问DOM的内容，但却不能访问页面原本的脚本（我是说直接访问不行），反之，页面原本的脚本也不能直接访问ContentScript。在图中，浅红色的背景块代表ContentScript的运行环境，而浅蓝色的背景块代表页面运行环境，另外插件的运行环境我用浅绿色表示，注意，这是三个不同的运行环境，调试的时候你会充分体会到它们的不同。
由于处于不同的运行环境中，ContentScript和BackgroundScript不能直接互相访问，那它们之间如何通信？通过Message！这个之后的代码中会有。
遇到问题，怎么办？当然是用google去查找问题，但这里我最最最强烈推荐stackoverflow.com，这简直是解决问题的神器！不多解释了，用过便知。
学习过程基本上就是：看个大概，写点代码，调试调试。就可以了。哦，大前提当然是你得有javascript的基础。（你：呵呵，你在逗我吧！）
案例插件下载见本文下载地址：
这个插件一共有9个文件，新出现的文件有两个（其它相信大家都很熟悉了），一个是“content_script.js”，这就是前面提到的ContentScript，获取和修改页面的内容就靠它了；另一个是“jquery-2.0.0.min.js”，大名鼎鼎的jQuery，我很喜欢用的js库，其理念是“writeless，domore”，能帮我减少很多代码，这是目前最新的2.0.0版，这个版本跟以前的1.x.x的最大差别就是不再支持IE6、7和8，我个人是十分赞同这种做法的，微软的旧版浏览器都成了Web技术发展的绊脚石了，而且这次我们用的是Chrome浏览器，果断选择最新版了。另外还有一个服务器端，为了让问题简化，这次我用了php代码，一个php文件就是整个处理了，没有太多繁杂的配置，简洁，这是php最大的优势。系统结构如图：
另外还需说明的一点是我使用了jQuery做XMLHttpRequest，post的内容不是传统的html表单形式，而是json数据，所以在服务器端这边，就不能直接用$_REQUEST获取，而是通过读取“php://input”的内容获取。顺便谈谈个人对webapi的一个看法：“统一”大于“灵活”，这是我的观点，我确定我的接口的格式是json，使用utf-8编码，于是就一直用下去，调用者不用考虑用XML还是html表单还是别的，开发者也不必多考虑，让这成为一种统一的约定，在团队协助和以后的开发中会很省事。
程序开发，必定要涉及到调试，记得我刚开始做WEB开发前，问一些做了好久WEB开发的朋友，你们是怎样做javascript调试的，我发觉大多数人竟然回答：用alert一点点试吧——不是不行，是太原始，太低效了，对吧？其实Chrome直接支持javascript的调试，拥有了Chrome，就相当于拥有了一个强大的javascript调试器了。
Chrome打开开发者工具的方法是
我们这次需要关心的有“Elements”、“Sources”和“Console”这三个标签。Elements是用来做DOM分析的，功能有点类似Firebug，帮助我们分析页面的内容；而Sources，是我们用来调试javascript的；Console则是我们的Log的输出窗口，也是一个调试利器。
如我提供的这个例子，可在Sources的“CopntentScripts”下看到“content_script.js”然后设断点，执行到断点处时，Chrome会挺住，你可以观察到上面的值，如图：
太cool了，请问你还要一点点alert吗？
由于background和contentscript并不在同一个运行环境中，因此上面的方法是看不到Background的javascript的。要调试Background，还需要打开插件页，也就是“chrome://extensions”。点对应的插件的“generatedbackgroundpage.html”，就出现了调试窗口，接下来的操作就跟前面的类似了。如图：
至于你看到ID，“aajnhhjiia……”这一长串东西，这是chrome自动安排的一个ID。
虽然Popup和Background是处于同一运行环境中，但在刚才的Background的调试窗口中是看不到Popup的代码的。调试Popup还需要这样：
然后……就跟前面差不多了。
也许有时候你会发觉调试器不是很灵，至少我用下来感觉如此，比如你可能发现断点设不了，或者断点不起作用，或者看不到你自己的javascript文件。我的方法是在插件页中，把对应的插件的“已启用”这个复选框去掉，再重新勾上，然后再点一下“重新加载(Ctrl+R)”，通常能解决问题。当然了，还有些很古怪的问题，还不好重现，总体的解决思路就是重新载入一下，实在不行的话重启浏览器，或者清除浏览器缓存什么的，再试试看。
在做插件调试的时候我还遇到一个十分郁闷的问题，那就是我的Chrome使用了“GoAgent”，关于GoAgent是用来干嘛的，这个嘛，可以去google一下，我相信绝大多数程序员都会喜欢上它……可由于使用了这个东西，很可能会导致插件的XMLHttpRequest工作不正常，而且可能你会思索半天也找不到原因，好吧，暂时把GoAgent停用掉，甚至可能你需要重启下Chrome——我的经验。
我还是想说，我觉得Google对我们程序员来说是个很大度的公司，在Chrome这个产品上面就可见一斑。利用Chrome插件技术，我们可以做许多有用的东西，通过本文，相信你已经知道如何去开发一款Chrome插件了，当然了，Chrome插件的功能是很强大的，我用到的仅是冰山一小角。要深入，当然还需要更加充分地利用google和stackoverflow.com了。