前端如何判断浏览器 AdBlock/AdBlock Plus等广告屏蔽插件已开启拦截

2个月前AdBlock/AdBlock Plus疑似升级了一次

因为自己主要负责面对海外的用户项目，发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了，于是专门研究了一下。并尝试了很多方法。

已失效的老方法

// 定义一个检测 AdBlock 的函数
function checkAdBlock() {
  // 请求一个可能被 AdBlock 拦截含有/ad的路径接口
  fetch('xxxx/xxxx/ad')
    .then(response => {
      if (!response.ok) {
        // 如果响应状态码不是 2xx，可能是被拦截了
        console.log('AdBlock 可能已启用，请求被拦截');
      } else {
        // 请求成功，AdBlock 未拦截
        console.log('AdBlock 未启用，请求成功');
      }
    })
    .catch(error => {
      // 如果请求失败，可能是被拦截了
      console.log('AdBlock 可能已启用，请求失败', error);
    });
}

// 调用检测函数
checkAdBlock();

尝试方法1(亲测后全部无用)

github上开源的一些方法基本都试了都不行

1，f**kAdblock

2，adblockDetector

3，AdBlock Warning

4，AdGuard Detector

5，blockadblock
...

尝试方法2(亲测后也无用)

创建一个div元素并添加一个可能被AdBlock识别的类名 ad,ads之类的

// 创建一个div元素并添加一个可能被AdBlock识别的类名
var adTest = document.createElement('div');
adTest.className = 'ad ads ad-test1 adblock-test'; // ad,ads之类的
adTest.style.display = 'block'; // 明确设置display为block以检测是否被覆盖
adTest.style.position = 'absolute'; // 绝对定位以避免影响页面布局
adTest.style.top = '-9999px'; // 将元素移出视口以避免干扰用户
adTest.style.left = '-9999px';
adTest.style.width = '1px';
adTest.style.height = '1px';

// 将元素添加到DOM中
document.body.appendChild(adTest);

// 立即检查元素是否被隐藏（即display属性是否被更改为none）
var adblockActive = (adTest.offsetWidth <= 0 && adTest.offsetHeight <= 0) || adTest.style.display === 'none';

// 根据检测结果执行相应操作
if (adblockActive) {
    console.log('检测到AdBlock开启了');
    // 这里可以添加代码来处理AdBlock被检测到的情况
} else {
    console.log('AdBlock没有开启');
    // 清理：从DOM中移除测试元素（可选，因为已经移出视口）
    document.body.removeChild(adTest);
}

思考

静下心来好好看了看adblcok plus官网说明，原来AdBlock 和 AdBlock Plus等等默认拦截规则原来是 EasyList。

EasyList是什么

EasyList 是什么？ EasyList 是一个开源的广告过滤规则集，由社区维护和更新。 它包含了大量的规则，用于屏蔽网页上的广告元素（如横幅广告、弹窗广告、视频广告等）。 EasyList 是 AdBlock、AdBlock Plus 和其他广告屏蔽工具（如 uBlock Origin）的基础规则集。

那么猜测老的检测方法失效应该是EasyList规格有更新，顺着这个思路又看看当前已有的EasyList规则都有啥（文件有点大你忍一下🤣）？发现这个规则太多了，看的人眼花.....没关系用DeepSeek帮忙分析😄

EasyList里面随便找到几个简单的脚本规则🤣

举例：

! *** easylist:easylist/easylist_general_block.txt ***
-ad-manager/$~stylesheet
-ad-sidebar.$image

.ads.controller.js$script
...

1. -ad-manager/$~stylesheet

   • 拦截路径中包含 -ad-manager/ 的资源。
   • $~stylesheet 表示排除样式表（即不拦截样式表）。
   • 例如：https://example.com/ad-manager/script.js 会被拦截，但 https://example.com/ad-manager/style.css 不会被拦截。

2. -ad-sidebar.$image

   • 拦截路径中包含 -ad-sidebar 的图片资源。
   • $image 表示只拦截图片。
   • 例如：https://example.com/ad-sidebar/banner.jpg 会被拦截。

3. .ads.controller.js$script

   • 拦截路径中包含 .ads.controller.js 的脚本资源。
   • 例如：https://example.com/ads.controller.js 会被拦截。
     拦截路径中包含 .ads.controller.js 的脚本资源。

拦截路径中包含 -ad-manager/和.ads.controller.js 的资源我们亲测一下规则...

尝试1（验证成功!-ad-manager/确实被AdBlock/AdBlock Plus拦截了）

<script>
  var script = document.createElement('script');
  script.src = './a-ad-manager/script.js'; // 本地随便建一个测试路径
  script.onload = function() {
    console.log('脚本加载成功');
  };
  script.onerror = function() {
    console.log('脚本加载失败，被AdBlock/AdBlock Plus拦截了'); // 验证成功
  };
  document.head.appendChild(script);
</script>

尝试2（验证成功!.ads.controller.js也被AdBlock/AdBlock Plus拦截了）

<script>
  var script = document.createElement('script');
  script.src = './hahahaha.ads.controller.js'; // 本地随便建一个测试路径
  script.onload = function() {
    console.log('脚本加载成功');
  };
  script.onerror = function() {
    console.log('脚本加载失败，被AdBlock/AdBlock Plus拦截了'); // 验证成功
  };
  document.head.appendChild(script);
</script>

总结

验证成功

按照EasyList的默认拦截规则反着来，确实可以触发被AdBlock/AdBlock Plus拦截，只要检测对应的文件是否加载成功就能确定是否被AdBlock/AdBlock Plus默认规则拦截了。