AdBlockPlus 插件检测

广告屏蔽插件是一把双刃剑,本意是为了屏蔽哪些弹窗低品质的广告,但是绝大多数情况下都会被一刀切,即屏蔽了所有的站点的所有广告,而且是尽可能的多屏蔽,其实只要是不影响浏览情况下的侧边栏广告,我都不会屏蔽。

基于特征检测

一般来说,AdBlock 的工作机制是它会维护一个规则列表,如果页面中的元素命中了某个规则,则就会将其屏蔽。

有一个网站专门提供了检测服务来检测是否被 AdBlock 命中🎯,

https://easylist-downloads.adblockplus.org/easylist.txt 这个文档列举了会被屏蔽的关键字。

因此我只要创建一个 affiliate_link.js 文件,并写入:

var isBlock = 1;

然后在业务JS里去判断该变量是否存在即可:

if (!window.isBlock) {
    var article = document.querySelector('article[role="main"]');
    if (!article) return;
    var prompt = document.createElement('div');
    prompt.style = 'border: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 16px;text-align:center';
    prompt.innerHTML = '<p>您使用了广告拦截器,导致本站内容无法显示,生存不易,请高抬贵手。</p><p>请将 www.noxxxx.com 加入白名单,解除广告屏蔽后,刷新页面,谢谢。</p>';
    article.innerHTML = '';
    article.appendChild(prompt);
}

将上述文件和代码写入一个 test.html 文件中,访问该文件并切换 AdBlock 状态来查看运行效果。据此就可以判断出当前用户是否适用屏蔽插件了!