浏览器对于前端来说，基本就是一个吃喝拉撒等等都能干的地方。其中Chrome又是多数人的最佳选择，除开性能、速度、简洁的界面，它庞大而无所不能的extensions生态圈亦让人觉得很实用很牛x，这几天略看了下Chrome的插件，试了一试，先分享一下入门开发过程。
以自己做的一个非常简易的词典来说明吧。
先看目录结构：
插件的入口就是manifest.json,这是一个配置文件，里面声明了插件的名字、版本、脚本类型、权限等等一系列信息。直接看内容：
manifest_version这个值现在必须是2了，如果是1的话，chrome会提示版本不对。name,version,description之类的就不用说了，browser_action即浏览器行为，与之对应的是一个page_action，我这里没有使用。区别在与browser_action一般使用在所有页面（或）多个页面共有行为的情况，如果一段代码或者功能只使用在一个页面上，推荐使用page_action。直观上的区别在于browser_action的icon会显示在地址栏的右边外部，而page_action会显示在地址栏内部，意思是，我只对这个地址的page生效哟。
然后就是里面的popup.html，这个就是点击你的插件图片，会弹出来的小页面，写法就是html+css，这个人人都会啦。
接着看，permission，这是一个很重要的配置项，里面规定了插件能起作用的范围，有很多配置选项，我这个例子里只选择了两个，一个是一个匹配表达式，对所有页面，二是右键菜单contextMenus。
下面是background，说到这里，要提一下插件的几个作用域，分为 background script，content script，还有就是页面里的script了，background script即插件运行的环境，这是chrome专门给插件开辟的一块地方，与页面的脚本分开，一般我们browser级别的逻辑就会写在这里。content script顾名思义，就是可以对页面内容进行操作的脚本了，它可以访问DOM里的内容，但又受到很多限制，比如并不能访问web页面或其它content script中定义的函数和变量，它默认是在网页加载完了和页面脚本执行完了，页面转入空闲的情况下（Document Idle）就会运行，但这个是可以改变的。content script和我们扩展的background script处于不同的环境，它们需要之间通过message机制来进行通信。我的理解是，content script其实算是插件与page操作交互的一个桥梁了。具体情况可以参考官方文档。
我这里因为并没有对页面dom或变量进行操作，所以只用了一个background。最后就是icon了，用于在不同地方显示的图标。当然，还有很多选项没有列出来，但这几项已经足够我们做一个小小的词典。
popup.html之前说过，是点击插件icon时出来的小气泡页面，另外两个help.html和about.html是我自己加的，用于在里面搞个小小的跳转。如图：
最后我们来看background.js里的内容：
很简单，就是调用了chrome.contextMenus.create方法，在右键里显示一个菜单，绑定一个函数，在函数里面写入自己的handle就ok了。这里我使用的是youdao的API。效果如图：
还有什么，貌似没有了。。。。- -！
剩下就是安装调试了，在扩展设置里选择开发者模式，然后“加载正在开发的插件”，选择文件夹，即可使用了。调试ok后，“打包扩展程序”，就会得到一个常见的crx文件还有一个证书类的东西，然后你就可以拿这个crx出去妹子面前装x了哈哈。。。友情提示：表白啥的，就可以做个插件哟。
最后放上我的插件链接:)，个人不喜欢那种一选中就自动出现意思的词典，感觉鼠标旁老有个图标很蛋疼，所以我这个感觉还是比较实用的，要翻译点一下就ok。欢迎试用：
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
