Js如何判断AdBlock/AdBlockPlus开启状态

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里面随便找到几个简单的脚本规则🤣

jietu00003.png

举例：

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

.ads.controller.js$script
...

-ad-manager/$~stylesheet
- 拦截路径中包含 -ad-manager/ 的资源。
- $~stylesheet 表示排除样式表（即不拦截样式表）。
- 例如：https://example.com/ad-manager/script.js 会被拦截，但 https://example.com/ad-manager/style.css 不会被拦截。
-ad-sidebar.$image
- 拦截路径中包含 -ad-sidebar 的图片资源。
- $image 表示只拦截图片。
- 例如：https://example.com/ad-sidebar/banner.jpg 会被拦截。
.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默认规则拦截了。

Js如何判断AdBlock/AdBlockPlus开启状态