第一次制作火狐扩展

由于Chrome在我可怜的Surface Pro3上一打开风扇就很响而且很多扩展无法获取或者同步更新，而火狐推出了新版量子火狐（Firefox Quantum），大大提升了启动和访问网页的速度，同时开启后风扇不怎么响，自己便动手试试在新的火狐上写一个扩展。

由于量子火狐采用了新的架构，为了速度牺牲之前的扩展兼容性，故扩展只支持WebExtension API，一个Chrome、Edge也支持的API，那么写个扩展就有可能改动不大就可以可以移植到其他浏览器，同时安卓的火狐也可以同时使用这个扩展，很棒~

示例是WebExtension API中一个函数在各个浏览器兼容性表

那么如何开始呢？参考下Mozilla的wiki呗。[MDN]https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension

下图是火狐插件的具体架构：

老实说，根据MDN的例子Step by Step基本上就可以写一个扩展。主要的就是如何写逻辑呗。自己便使用自己之前写的一个油猴脚本[护眼脚本]

：https://boke.hongweihou.com/you-hou-hu-yan-jiao-ben/ 作为基础改为火狐扩展。当你需要写个扩展是，需要有3部分：manifest.json、代码（js、css、html）、图标。下图是我扩展的目录结构。

而具体的manifest.json是一个json文件，告诉浏览器扩展的名称、版本、需要哪些权限、哪些部分运行哪些文件等。火狐的wiki很好地告诉开发者如何做。 下面是我的扩展例子：

可以看到，像名称属性：name，描述：description采用了__前缀，这个是扩展的国际化的要求，具体看这里[国际化]https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization

剩下的就是按照wiki来编写对应的文件啦。

我的脚本是改自自己之前做的油猴护眼脚本，是需要修改访问页面的背景色的，这个就需要将主要逻辑放到content scripts对应的脚本里。同时，因为需要与用户交互，所以需要添加browser_action对应的配置中，这个会在浏览器的工具栏添加对应的图标以及下拉菜单与用户做交互。

而如何将用户的按钮事件与页面改变逻辑做关联起来呢？聪明的你应该想到，对了，就是消息机制。火狐扩展的消息机制非常简单，发送消息browser.runtime.sendMessage()以及注册消息接收事件的回调函数browser.runtime.onMessage.addListener(listener)。而消息内容就是任何的JSON对象。

同时，需要注意扩展需要的权限是否在manifest.json里声明完全，同时留意conent scripts的权限限制（比如无法使用notification权限来提醒用户操作失误）。

后面就是开心的码代码了。。。

如果需要调试，建议使用web-ext工具，直接npm install web-ext使用就可。什么？你不知道npm是什么？？？给你一个Mozilla链接[web-ext]https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext，错了，是[npm是什么的链接]https://www.npmjs.com/，

嗯，基本上，一个插件就可以开始制作了，有啥问题先搜素下[火狐的wiki]https://developer.mozilla.org/en-US/

欢迎使用我的插件[护眼扩展]https://addons.mozilla.org/zh-CN/firefox/addon/protect-eye/，或者在火狐的扩展中心直接搜索护眼扩展。