谷歌浏览器如何识别网站代码的广告，被观看者通过插件禁用了?-CSDN博客

本文链接：https://blog.csdn.net/suny2020/article/details/148247669

广告拦截器通常会阻止加载来自已知广告服务器的脚本、图片或CSS文件。谷歌浏览器如何识别网站代码的广告，被观看者通过插件禁用了?

内容检测:

原理： 网站会创建一个看起来像广告的隐藏HTML元素（例如，一个div标签，其class或id包含ad、banner等关键词，或者其尺寸设置为常见的广告尺寸，如300x250px、728x90px等）。
检测方式： 广告拦截器通常会根据其内置的过滤规则（例如EasyList）来隐藏或移除这些“诱饵”元素。网站加载后，通过JavaScript检查这些“诱饵”元素是否存在于DOM中，或者其display属性是否为none或visibility是否为hidden。如果被隐藏或移除，则认为用户启用了广告拦截器。

<div class="ad-container" style="width:1px; height:1px; overflow:hidden;">
  </div>

<script>
  setTimeout(function() {
    const adContainer = document.querySelector('.ad-container');
    // 检查元素是否被隐藏或移除
    if (!adContainer || window.getComputedStyle(adContainer).display === 'none') {
      console.log('检测到广告拦截器！');
      // 可以在这里显示提示信息或采取其他措施
    } else {
      console.log('未检测到广告拦截器。');
    }
  }, 500); // 稍等片刻，让广告拦截器有时间处理
</script>

使用 MutationObserver 监控 DOM 变化这种方法可以更实时地检测DOM的变化，例如广告元素被移除或隐藏。示例：

function detectAdBlockerMutation() {
    return new Promise(resolve => {
        // 创建一个将被广告拦截器隐藏的元素
        const adBait = document.createElement('div');
        adBait.id = 'ad-bait-observer';
        adBait.className = 'ad-container banner-ad-unit';
        adBait.style.cssText = 'width:1px;height:1px;position:absolute;left:-9999px;top:-9999px;';
        document.body.appendChild(adBait);

        let adBlockDetected = false;

        const observer = new MutationObserver((mutationsList, observerInstance) => {
            for (const mutation of mutationsList) {
                // 检查是否移除了诱饵元素
                if (mutation.type === 'childList' && Array.from(mutation.removedNodes).includes(adBait)) {
                    console.log('AdBlocker检测到：MutationObserver - 诱饵元素被移除。');
                    adBlockDetected = true;
                    observerInstance.disconnect();
                    resolve(true);
                    return;
                }
                // 检查诱饵元素的样式是否被修改为隐藏
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    const computedStyle = window.getComputedStyle(adBait);
                    if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden' || computedStyle.height === '0px' || computedStyle.width === '0px') {
                        console.log('AdBlocker检测到：MutationObserver - 诱饵元素样式被修改为隐藏。');
                        adBlockDetected = true;
                        observerInstance.disconnect();
                        resolve(true);
                        return;
                    }
                }
            }
        });

        // 配置观察器：观察 body 及其子元素的属性变化和子节点增删
        observer.observe(document.body, {
            attributes: true, // 观察属性变化
            childList: true,  // 观察子节点增删
            subtree: true     // 观察所有后代节点
        });

        // 设置一个超时，如果在规定时间内没有检测到变化，就假定没有广告拦截
        setTimeout(() => {
            if (!adBlockDetected) {
                observer.disconnect(); // 停止观察
                console.log('AdBlocker未检测到：MutationObserver - 未发现明显拦截迹象。');
                resolve(false);
            }
            // 清理元素，无论是否检测到
            if (document.body.contains(adBait)) {
                document.body.removeChild(adBait);
            }
        }, 500); // 500ms 延迟，给插件时间处理
    });
}

// 调用示例
window.addEventListener('load', () => {
    detectAdBlockerMutation().then(isAdBlocked => {
        if (isAdBlocked) {
            console.log('网站检测到您启用了广告拦截器（通过MutationObserver）！');
        } else {
            console.log('网站未检测到广告拦截器（通过MutationObserver）。');
        }
    });
});

我的原创内容推荐

视频应用

视频二维码应用

热门原创推荐

AI工具类文章

视频加密/防下载/防录屏

FFmpeg视频编码

谷歌浏览器

ThinkPad电脑

视频直播