火狐扩展的文件结构

之所以对这个问题感兴趣，是因为打算用火狐的插件机制来实现端信息跳变的客户端的，借助插件来改变火狐客户端的访问IP和端口。

原先有个插件版本，是直接把功能都写在插件里了，那个时候火狐还支持add-on形式的插件，nodejs的机制能实现的功能还蛮多。

现在这一版，需求多了，写在插件里是实现不了，而且火狐插件现在统一只能用webExtension了，效仿谷歌那一套，好像以后的插件在各大浏览器（火狐，谷歌，edge）间稍微一改，能通用了。这样一来，方便了，安全了，当然牺牲的就是能实现的功能了。

所以这一版是打算写成代理，然后用这个webExtension来执行本地文件，这个还是可以实现的。

原本对这个webextension的形式还是比较讨厌的，毕竟要增加工作量，但是在学习了之后，我觉得它的结构和代码逻辑很清晰，蛮喜欢。

文件结构

我举一个简单的栗子，MDN上的一个插件notify-link-clicks-i18n，作用是记录下网页的点击事件，当点击一个链接时，它会给出一个通知像是“you clicked 'your link' ”这种格式。看下它的文件结构：

Screenshot from 2018-03-03 22-28-06.png

icons是用到的图标，locales是不同语言的转换。manifest.json是配置文件，README.md是说明。我觉得最好的地方是background-script.js和content-script.js所代表的不同的含义。

background-script.js的作用，我引用MDN说明文档：

扩展常常需要独立于任何浏览器窗口或特定网页来维持一种长期的状态或者执行长期的操作。background scripts的存在就是为了这个。

而content-script.js的作用：

使用content scripts来访问和操作页面。Content scripts会被加载到页面中并运行在页面的特定环境下。
Content scripts是由扩展提供的脚本，与页面本身的脚本以及标签中的脚本是不同的。

两种不同的脚本类型分工明确，而且两者之间可以进行通讯，从而使得contentscript也可以使用backgroundscript中的web api来实现一些强大的功能，我觉得这种设计简洁而且很舒服，有种莫名的好感。

参考

参考1