最近花了些时间,做一个浏览器上实现夜间模式的扩展。目前已在谷歌、火狐、360浏览器中上架,从浏览器扩展/附加组件中搜索“夜间助手”即可安装使用。
一些演示
为什么要做这个扩展?
就我们程序员的工作而言,需要长时间地接触浏览器,或在浏览器上进行开发,或搜寻一些资料、教程等。但长时间的白底黑字,以及在晚上浏览时,屏幕会让人感觉比较刺眼,这样既不利于我们舒适地上网,也不利于眼睛的健康。
不过浏览器中早有一些夜间/护眼的扩展,为什么还要自己开发呢?按照我的使用经验,它们大多有以下一些问题:
- 平台单一,很多扩展只出现在一个浏览器上。如果想在其他浏览器上得到类似的效果,只能寻找其他扩展。
- 过渡效果不佳,刷新页面或打开一个新标签时,会有很明显的白色背景一闪而过,这是一个比较致命的问题(这里指页面已经加载完成后的空白,扩展受限于浏览器,页面还未加载时的空白暂无解决办法,在某些浏览器中安装深色主题可以缓解这一问题)。
- 侵入性强,直接改变了原网页的背景、文字颜色等。合理的搭配在某些时候可以起到良好的效果,但也可能造成原网页模糊不清,色彩混乱。
所以作为开发浏览器扩展的小白,也觉得有必要自己做一个夜间模式扩展,毕竟这跟自己的工作、生活息息相关。
由于这里不是“从零开始做一个浏览器扩展”的教程,关于技术就不过多解释,实际上该扩展的代码也十分简单。下面可以分享一些参考文档,以及在谷歌、火狐、360浏览器中开发扩展的一些异同,供感兴趣的小伙伴们参考。
在谷歌、火狐、360浏览器中开发扩展的区别
各浏览器的扩展开发文档
- 谷歌浏览器: developer.chrome.com/extensions/…
- 火狐浏览器: developer.mozilla.org/zh-CN/docs/…
- 360浏览器: open.se.360.cn/open/extens…
按照作者的经历,它们之间大同小异。谷歌浏览器扩展可以不加修改地发布在360浏览器上,而在火狐浏览器上,基本上把chrome对象改为browser就可以正常运行了,所以上面的文档只学习一个就差不多了。
由于作者刚接触浏览器扩展开发不久,上面的表述还只是泛泛而谈,更多的还是需要自行探索。
最后
此扩展的功能还不是太完善,目前只实现了拖动调节屏幕亮度的功能。欢迎大家使用(夜间助手),如有建议欢迎提出,后续会考虑改进。
源码地址:Night-Mode