分享一个实现夜间模式的浏览器扩展

最近花了些时间，作一个浏览器上实现夜间模式的扩展。目前已在谷歌、火狐、360浏览器中上架，从浏览器扩展/附加组件中搜索“夜间助手”便可安装使用。

一些演示

为何要作这个扩展？

就咱们程序员的工做而言，须要长时间地接触浏览器，或在浏览器上进行开发，或搜寻一些资料、教程等。但长时间的白底黑字，以及在晚上浏览时，屏幕会让人感受比较刺眼，这样既不利于咱们温馨地上网，也不利于眼睛的健康。

不过浏览器中早有一些夜间/护眼的扩展，为何还要本身开发呢？按照个人使用经验，它们大多有如下一些问题：

1. 平台单一，不少扩展只出如今一个浏览器上。若是想在其余浏览器上获得相似的效果，只能寻找其余扩展。
2. 过渡效果不佳，刷新页面或打开一个新标签时，会有很明显的白色背景一闪而过，这是一个比较致命的问题（这里指页面已经加载完成后的空白，扩展受限于浏览器，页面还未加载时的空白暂无解决办法，在某些浏览器中安装深色主题能够缓解这一问题）。
3. 侵入性强，直接改变了原网页的背景、文字颜色等。合理的搭配在某些时候能够起到良好的效果，但也可能形成原网页模糊不清，色彩混乱。

因此做为开发浏览器扩展的小白，也以为有必要本身作一个夜间模式扩展，毕竟这跟本身的工做、生活息息相关。

因为这里不是“从零开始作一个浏览器扩展”的教程，关于技术就不过多解释，实际上该扩展的代码也十分简单。下面能够分享一些参考文档，以及在谷歌、火狐、360浏览器中开发扩展的一些异同，供感兴趣的小伙伴们参考。

在谷歌、火狐、360浏览器中开发扩展的区别

各浏览器的扩展开发文档

• 谷歌浏览器： developer.chrome.com/extensions/…
• 火狐浏览器： developer.mozilla.org/zh-CN/docs/…
• 360浏览器： open.se.360.cn/open/extens…

按照做者的经历，它们之间大同小异。谷歌浏览器扩展能够不加修改地发布在360浏览器上，而在火狐浏览器上，基本上把chrome对象改成browser就能够正常运行了，因此上面的文档只学习一个就差很少了。

因为做者刚接触浏览器扩展开发不久，上面的表述还只是泛泛而谈，更多的仍是须要自行探索。

最后

此扩展的功能还不是太完善，目前只实现了拖动调节屏幕亮度的功能。欢迎你们使用(夜间助手)，若有建议欢迎提出，后续会考虑改进。

源码地址：Night-Mode