折腾·使网页检测到Dark Reader插件
序
偶然接触到了一款Web浏览器夜间插件——Dark Reader。虽说有了这个工具,晚上看网页不会很伤眼睛,但毕竟会对网页的样式进行修改,可能本站也会有一些样式错误。
果然。
虽说不影响体验,但有一大块黑着,真的看着很不爽。遂寻找解决方案。
尝试·访问Chrome-Extention中的资源以达到检测插件的目的
原以为国内互联网那三兄贵查到AdBlock启用的方法可能就藏在控制台中,但事实上这是不可行的。连一个有关的函数都没有。
可以找到的,(仅)适用于Chromium系浏览器的检测插件的方法,大概是这样的:
graph TB CatchResources[抓取chrome-extention://下的贴图资源]---->IfResourceExist{资源存在} IfResourceExist{资源存在}--Y-->ExtentionAvailable[该扩展启用] IfResourceExist{资源存在}--N-->ExtentionUnvailable[该扩展不可用]
1 | // 作者:小马_wolf |
但事实上,不知道是单独Chromium Edge的问题还是谷歌自家也是在这么整。
这些插件本质上是html页面。在Edge导航栏中点开对应的插件并在这里面右键,就会跳出“检查”的菜单项,从而进入对应插件页面的DevTools页。使用location.href
就可以获取到插件对应的chrome-extention://
头的路径。
选取一部分资源尝试进行访问,就是网上提供的方法。
一段原理相同的实现:
1 | var i = new Image() |
但出现的问题也很奇葩。
可能是浏览器为了用户隐私着想把这种请求屏蔽了……大概……
正确的方法
偶然受到B乎某个相似的问题的启发。
百度插件应该会修改页面源代码,写入插件标识,js可以检测这个标识来判断。——匿名
既然没有直接检测插件的方法,那么不妨换个角度思考。诸如AdBlock这些插件,包括Dark Reader,都会对页面的源文件进行修改。Dark Reader大概就是在原本的HTML中插入了一些样式,以达到夜间的效果。
在DevTools页的元素选项卡中,Ctrl + F,查找关键字dark
,在head中找到了插入的style标签。
而每个style标签都有一个darkreader的类。这就是我们所需要的。
JavaScript:
1 | if(document.getElementsByClassName('darkreader').length != 0) |
jQuery只需要将document.getElementsByClassName('darkreader')
替换为$('.darkreader')