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

金钏
• 阅读 119

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

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

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

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

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

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

介绍两个我日常工作中使用的 Chrome 护眼扩展
所以我在留意一些能够修改浏览器背景色的工具。

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

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

Dark Reader

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

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

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

介绍两个我日常工作中使用的 Chrome 护眼扩展
开启之后的效果:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看来这位作者即使在法国居住,也时刻心系祖国,连变量命名都采用自己的母语,令人尊敬。
介绍两个我日常工作中使用的 Chrome 护眼扩展

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

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

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

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

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

点赞
收藏
评论区
推荐文章
九路 九路
4年前
一篇文章带你了解CSS 渐变知识
CSS3渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候,你必须使用图像实现这些效果。然而,通过使用CSS3渐变可以减少下载时间和带宽的使用.此外,缩放的元素在缩放时看起来更好,因为渐变是由浏览器生成的。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。(来源于百度)数字后面的w
Karen110 Karen110
4年前
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
Python进阶者 Python进阶者
3年前
一篇文章带你了解CSS 文本样式
大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。一、文本颜色Color颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定:十六进制值如"#FF0000"。一个RGB值"RGB(255,0,0)"。颜色的名称如"红"。一个网页的文本颜色是指在主体内的选择:
Stella981 Stella981
3年前
2021年了,Python开发者不容错过的7个VS Code扩展
VisualStudioCode(简称VSCode)是一个由微软开发,同时支持Windows、Linux和macOS等操作系统的免费代码编辑器,它支持测试,并内置了Git版本控制功能,同时也具有开发环境功能,例如代码补全、代码片段和代码重构等。VSCode是程序员常用的代码编辑器之一,是一个可在所有平台上使用的开源、可扩展和轻量级的
可莉 可莉
3年前
2021年了,Python开发者不容错过的7个VS Code扩展
VisualStudioCode(简称VSCode)是一个由微软开发,同时支持Windows、Linux和macOS等操作系统的免费代码编辑器,它支持测试,并内置了Git版本控制功能,同时也具有开发环境功能,例如代码补全、代码片段和代码重构等。VSCode是程序员常用的代码编辑器之一,是一个可在所有平台上使用的开源、可扩展和轻量级的
Stella981 Stella981
3年前
AssemblyScript 入门指南[每日前端夜话0xEB]
每日前端夜话0xEB每日前端夜话,陪你聊前端。每天晚上18:00准时推送。正文共:2459 字预计阅读时间:10分钟作者:DannyGuo翻译:疯狂的技术宅来源:logrocket!(https://oscimg.oschina.net/oscnet/b880277c594152a503
Wesley13 Wesley13
3年前
HTML小游戏
开发工具:VisualStudioCode游戏介绍:已知有3个方块,前面的2个方块涂有相近的两种颜色,你需要根据这两种颜色序列的递减情况猜测第三个方块的颜色是什么,并从下面的方块中选择你觉得最接近的颜色。程序设计步骤:1.编写html代码2.编写js代码html代码编写设置css文件importurl('https://fon
Stella981 Stella981
3年前
Node.js 12中的ES模块[每日前端夜话0x9E]
每日前端夜话0x9E每日前端夜话,陪你聊前端。每天晚上18:00准时推送。正文共:2552字预计阅读时间:10 分钟作者:BrianDeSousa翻译:疯狂的技术宅来源:logrocket!(https://oscimg.oschina.net/oscnet/2ccaf94cecd3
Wesley13 Wesley13
3年前
R语言颜色综合运用与色彩方案共享
今天这篇主要讲解R语言颜色综合运用,主要跟大家介绍如何提取那些专业色彩包中的颜色搭配用于在基础绘图系统和高级绘图系统中共享。其实无论是R语言的预设配色系统、自定义颜色表还是哪些专属配色包,我们所使用(或者R语言识别的)的仅仅就是一组字符向量所代表的色值而已,并不神秘。通过scales中的色彩获取函数,我们可以将专属配色主题(R
Wesley13 Wesley13
3年前
ubuntu文件夹颜色设置及vim颜色配置
Linux系统中ls文件夹的痛苦我就不说了,为了不伤眼睛,一般ssh终端背景都用的黑色,文件夹又是你妈的深蓝色,每次看文件夹都要探头仔细去看。这下彻底解决这个问题。因为ubuntu下的/etc/目录里没有DIR\_COLORS,所以费了点劲儿。方法一:1.利用dircolors命令,查看我们的系统当前的文件名称显示颜色的值,然后利用
单元格颜色设置
单元格颜色单元格内中经常用到颜色的地方有单元格内的字体颜色和背景颜色,以及边框颜色,当然报表提供一些基本颜色,当这些基本颜色满足不了你的需求时,就可以用到自定义颜色。使用RBG颜色表来调节,并且可以调节色调,饱和度以及亮度。可以通过输入相应的颜色数字来调节
金钏
金钏
Lv1
君自故乡来,应知故乡事。
文章
3
粉丝
0
获赞
0