Dark Reader

点我空降至关键部分

偶然接触到了一款Web浏览器夜间插件——Dark Reader。虽说有了这个工具,晚上看网页不会很伤眼睛,但毕竟会对网页的样式进行修改,可能本站也会有一些样式错误。

果然。

老朽的萌娘封面没了?

虽说不影响体验,但有一大块黑着,真的看着很不爽。遂寻找解决方案。

尝试·访问Chrome-Extention中的资源以达到检测插件的目的

原以为国内互联网那三兄贵查到AdBlock启用的方法可能就藏在控制台中,但事实上这是不可行的。连一个有关的函数都没有。

可以找到的,(仅)适用于Chromium系浏览器的检测插件的方法,大概是这样的:

graph TB CatchResources[抓取chrome-extention://下的贴图资源]---->IfResourceExist{资源存在} IfResourceExist{资源存在}--Y-->ExtentionAvailable[该扩展启用] IfResourceExist{资源存在}--N-->ExtentionUnvailable[该扩展不可用]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 作者:小马_wolf
// https://my.oschina.net/u/1858920/blog/698502

var extensionid = '扩展的id';

var image = document.createElement('img');
image.src = 'chrome-extension://' + extensionid + '/icon.png';
image.onload = function () {
setTimeout(function () {
alert('installed-enabled');
}, 2000);
};
image.onerror = function () {
alert('not-installed');
};

但事实上,不知道是单独Chromium Edge的问题还是谷歌自家也是在这么整。

这些插件本质上是html页面。在Edge导航栏中点开对应的插件并在这里面右键,就会跳出“检查”的菜单项,从而进入对应插件页面的DevTools页。使用location.href就可以获取到插件对应的chrome-extention://头的路径。

RT.

选取一部分资源尝试进行访问,就是网上提供的方法。

一段原理相同的实现:

1
2
3
4
5
var i = new Image()
// 插件贴图资源的URL,这里是Dark Reader插件的路径
i.src='chrome-extension://ifoakfbpdcdoeenechcleahebpibofpc/ui/assets/images/darkreader-icon-256x256.png'
i.οnerrοr=function(){alert("not-installed")};
i.onload=function(){alert('installed-enabled')}

但出现的问题也很奇葩。

GET chrome-extension://invalid/ net::ERR_FAILED

可能是浏览器为了用户隐私着想把这种请求屏蔽了……大概……

正确的方法

偶然受到B乎某个相似的问题的启发。

百度插件应该会修改页面源代码,写入插件标识,js可以检测这个标识来判断。——匿名

既然没有直接检测插件的方法,那么不妨换个角度思考。诸如AdBlock这些插件,包括Dark Reader,都会对页面的源文件进行修改。Dark Reader大概就是在原本的HTML中插入了一些样式,以达到夜间的效果。

在DevTools页的元素选项卡中,Ctrl + F,查找关键字dark,在head中找到了插入的style标签。

而每个style标签都有一个darkreader的类。这就是我们所需要的。

JavaScript:

1
2
if(document.getElementsByClassName('darkreader').length != 0)
window.alert('DarkReader开启')

jQuery只需要将document.getElementsByClassName('darkreader')替换为$('.darkreader')

运用

SnackBar