介绍两个我日常工作中使用的 Chrome 护眼扩展

简介: 介绍两个我日常工作中使用的 Chrome 护眼扩展

程序员每天长时间对着电脑显示屏,时间一长眼睛都要废掉了。


我每天的代码编写在 Visual Studio Code 里完成,而技术分享文章,在网易云笔记里编写。


这些代码和文本编辑器,支持背景颜色的自定义,所以我可以不时更换颜色,避免长期看到一种颜色的审美疲劳。


而程序员每天使用电脑,很大一部分时间是花在浏览器上的。比如使用浏览器查阅资料,阅读文档,还有对自己开发的网站进行测试。


浏览器默认的白色背景,看久了眼睛就觉的刺痛。



所以我在留意一些能够修改浏览器背景色的工具。

Chrome Web Store 上能实现这个需求的 Extensions 不少,本文我介绍两个自己一直在用的 Free Extension.

如果大家平时也有用起来体验感觉不错的扩展,欢迎在评论区留言补充。

Dark Reader

Chrome Web Store 上超过 500 万用户,完全免费。

b7bba483b72503b915daa6ee2e59a53f_format,png.png

使用非常简单,将下图的开关设置成 On 即可开启暗黑模式。同时还支持设置网站白名单,调整页面的亮度,对比度,灰度和色调等参数。

d9095621189075404695bdba17bf751f_format,png.png

开启之后的效果:

ee0d0e8589dc9187f237d0ebb9a7962b_format,png.png

47129c44d4e1bf796c6f0d1c494f1b50_format,png.png

扩展的工作原理也不难理解。开启暗黑模式后,扩展会给网页动态创建并植入一个新的 style 元素,该元素即包含了实现页面暗黑视觉效果所需的 CSS 属性值,如下图所示:

b56ec46a2ff2f16de8fd5b9b0676710e_format,png.png

动态植入的详细源代码,在该扩展 Github 仓库的 style.ts 源文件里能找到。

8ce240f33d981d3ecc96bffed5af67d6_format,png.png

然而这种黑糊糊的背景,看久了难免还是感到乏味。

我记得自己刚上大学时,用的还是 Windows 98,大二时才升级成了 Windows XP.

当时网上流行着把操作系统背景色设置成所谓能够“护眼”的豆沙绿,即 RGB 值为 (202, 234, 206)的颜色方案。

2bf8703b554a08c1d5587954383291ec_format,png.png

不过 Chrome 的背景颜色无法直接在操作系统里修改,所以我在 Chrome Web Store 里找了一个扩展:Babu Background RGB Color

b8747615b39cc46fae1d3a0ff9d2a5bd_format,png.png

使用方法也是简单直接,就两个设置项,从上到下依次是网页的文本颜色值,以及背景颜色值。

77d212a67311a944a67470cde6ddd92b_format,png.png

设置之后,Chrome 背景色成为豆沙绿,效果如下:

1f5da3353447fab055281803e7bbec57_format,png.png

这个扩展的实现原理,仍然采取的动态植入 style 元素的做法。

有趣的是,在 Chrome Web Store 这个扩展的明细页面里,作者信息显示的是一位居住在法国的开发者。

5070dfc0a2614fb0b2afd1bb1313da5e_format,png.png

不过当我们查看该扩展植入的 style class 名称时,发现是 wangYeDeYanse, 即网页的颜色五个汉字的拼音。

看来这位作者即使在法国居住,也时刻心系祖国,连变量命名都采用自己的母语,令人尊敬。

0dab0d515868442941e48c8b7597073c_format,png.png

值得一提的是,有知乎大佬提出,豆沙绿能够“护眼”,其实是一个伪命题。


科学只能证实,绿色光处于可见光谱的中心位置,处于人眼最敏感的色彩频率范围内。同时色彩心理学认为,绿色能够让人感到舒适与平静。


然而并没有任何科学理论,提到绿色背景色能保护视力,也没有相关的科学研究支持这一论断。


所以护眼的最好办法,就是减少使用电子产品的时间,而非依赖这些所谓的护眼解决方案。

ecb518bec19b29e09a0e6d197e9da77b_format,png.png

相关文章
|
7天前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
6月前
|
Web App开发
chrome扩展:manifest.json文件相关字段
chrome扩展:manifest.json文件相关字段
30 0
|
7天前
|
Web App开发 搜索推荐
Chrome 扩展 AdBlock hide something on this page 功能介绍
Chrome 扩展 AdBlock hide something on this page 功能介绍
9 0
|
7天前
|
Web App开发 前端开发 JavaScript
Chrome 扩展 AdBlock 的 hide something on this page 背后的工作原理
Chrome 扩展 AdBlock 的 hide something on this page 背后的工作原理
10 0
|
7天前
|
Web App开发 存储 JavaScript
走进Chrome拓展开发,定制自己的图床扩展
走进Chrome拓展开发,定制自己的图床扩展
|
7天前
|
Web App开发 Windows
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
25 0
|
7天前
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
43 0
|
7月前
|
Web App开发 开发框架 前端开发
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
45 0
|
8月前
|
Web App开发
推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
168 0
|
10月前
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
247 0

热门文章

最新文章