如何通过Chrome扩展程序替换Google广告内容-js教程-PHP中文网

如何通过Chrome扩展程序替换Google广告内容

碧海醫心

发布： 2025-08-20 22:24:20

原创

622人浏览过

如何通过Chrome扩展程序替换Google广告内容

本文旨在详细阐述如何开发Chrome扩展程序，以检测并替换网页中的Google广告（包括Google Ad Manager和AdSense），将其替换为自定义内容。教程将涵盖识别广告元素的DOM操作技巧、Chrome扩展程序的Manifest V3配置、背景脚本的注入逻辑，以及如何利用Google Publisher Tag (GPT) 事件监听器处理动态加载的广告，确保自定义内容在广告加载后即时显示。

一、识别并替换Google广告元素

替换网页中的google广告内容，首先需要准确识别这些广告元素。google广告通常通过两种主要方式集成：google ad manager (gpt) 和 google adsense。识别它们的方法有所不同。

1.1 针对Google Ad Manager (GPT) 广告

对于使用Google Publisher Tag (GPT) 库投放的广告，googletag 对象在页面全局可用，它提供了访问广告位信息的方法。

// 遍历所有已定义的广告位，并替换其内容
for (let i = 0; i < googletag.pubads().getSlots().length; i++) {
    const slotDomId = googletag.pubads().getSlots()[i].getSlotElementId();
    document.getElementById(slotDomId).innerHTML = '<h1>您的自定义HTML内容</h1>';
}

登录后复制

说明：

googletag.pubads().getSlots() 返回页面上所有已注册的广告位对象数组。
getSlotElementId() 方法用于获取每个广告位对应的DOM元素的ID。
通过 document.getElementById() 获取到广告位元素后，即可修改其 innerHTML。

注意事项： 此方法仅适用于使用了Google Publisher Tag (GPT) 的网站。如果网站未使用GPT，googletag 对象将不存在，导致脚本错误。

1.2 针对Google AdSense 广告

对于通过Google AdSense 代码嵌入的广告，通常可以通过其特有的CSS类名来识别。AdSense广告单元通常包含在 ins 标签中，并带有 adsbygoogle 类。

// 查找所有带有 'adsbygoogle' 类的 <ins> 元素
const adsenseBlocks = document.querySelectorAll('ins.adsbygoogle');
for (let i = 0; i < adsenseBlocks.length; i++) {
    // AdSense广告通常会将其父元素作为广告容器，或者直接修改ins元素
    // 这里假设需要替换的是其直接父元素的内容，或直接ins元素的内容
    const adContainer = adsenseBlocks[i].parentNode; // 或者直接 adsenseBlocks[i]
    if (adContainer && adContainer.id) { // 确保父元素有ID以便选择
        document.querySelector('#' + adContainer.id).innerHTML = '<h1>您的自定义HTML内容</h1>';
    } else {
        // 如果父元素没有ID，直接替换 <ins> 元素本身的内容
        adsenseBlocks[i].innerHTML = '<h1>您的自定义HTML内容</h1>';
    }
}

登录后复制

说明：

document.querySelectorAll('ins.adsbygoogle') 可以高效地找到所有AdSense广告单元。
根据网站的具体结构，可能需要替换 ins 元素的父元素内容，或者直接替换 ins 元素本身。

二、在Chrome扩展程序中注入脚本

由于 googletag 对象是页面级别的全局变量，直接在Chrome扩展程序的 content-script 中访问它会导致 undefined 错误。这是因为 content-script 运行在隔离的环境中，无法直接访问页面脚本创建的变量。为了解决这个问题，我们需要将替换逻辑作为普通的 <script> 标签注入到页面的DOM中。

2.1 Manifest V3 配置 (manifest.json)

首先，配置您的 manifest.json 文件，声明必要的权限和可访问的资源。

{
  "name": "自定义广告替换扩展",
  "action": {},
  "manifest_version": 3,
  "version": "0.1",
  "description": "替换网页中的Google广告为自定义内容。",
  "permissions": [
        "activeTab",
        "webNavigation",
        "scripting"
    ],
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "web_accessible_resources": [{
        "resources": ["pageScript.js"],
        "matches": ["<all_urls>"]
  }]
}

登录后复制

权限解释：

activeTab: 允许扩展程序访问当前活动标签页的信息。
webNavigation: 允许扩展程序监听导航事件，例如页面加载完成。
scripting: Manifest V3 中用于程序化注入脚本的核心权限。
host_permissions: <all_urls> 允许扩展程序在所有网站上运行。根据需求可以限制为特定域名。
web_accessible_resources: 声明 pageScript.js 可以被网页访问。这是将脚本注入到页面DOM的关键。

2.2 背景脚本 (service-worker.js)

背景脚本负责监听页面加载完成事件，并执行注入逻辑。

通义听悟

阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。

查看详情

chrome.webNavigation.onCompleted.addListener((details) => {
    // 确保只在主框架加载完成时执行
    if (details.frameId === 0) {
        chrome.scripting.executeScript({
            target: { tabId: details.tabId },
            func: injectPageScript // 使用 func 属性直接传入函数
        });
    }
});

// 这个函数将在目标页面的上下文中执行
function injectPageScript() {
    const s = document.createElement('script');
    s.src = chrome.runtime.getURL('pageScript.js');
    s.onload = function() {
        // 脚本加载并执行后，可以移除这个临时的script标签
        this.remove();
    };
    // 将脚本添加到页面的 <head> 或 <html> 元素中
    (document.head || document.documentElement).appendChild(s);
}

登录后复制

说明：

chrome.webNavigation.onCompleted.addListener: 监听当一个框架或标签页完成加载时触发的事件。我们通过 details.frameId === 0 确保只在主框架加载完成时执行。
chrome.scripting.executeScript: Manifest V3 中注入脚本的标准方法。func 属性允许您直接传递一个函数，该函数将在目标页面的上下文中执行。
injectPageScript 函数：这个函数本身会在页面的DOM环境中运行，它负责创建并添加 <script> 标签，将 pageScript.js 注入到页面中。
chrome.runtime.getURL('pageScript.js'): 获取扩展程序内部资源的完整URL。

2.3 注入的页面脚本 (pageScript.js)

这个脚本包含实际的广告替换逻辑。为了处理动态加载的广告（例如懒加载或刷新后出现的广告），我们还需要监听GPT的 slotOnload 事件。

function replaceAdContent() {
    // 1. 替换Google Ad Manager (GPT) 广告
    if (typeof googletag !== 'undefined' && googletag.pubads) {
        for (let i = 0; i < googletag.pubads().getSlots().length; i++) {
            const slotDomId = googletag.pubads().getSlots()[i].getSlotElementId();
            const adElement = document.getElementById(slotDomId);
            if (adElement) {
                adElement.innerHTML = '<h1>您的自定义HTML内容 (GPT)</h1>';
            }
        }
    }

    // 2. 替换Google AdSense 广告
    const adsenseBlocks = document.querySelectorAll('ins.adsbygoogle');
    adsenseBlocks.forEach(adBlock => {
        // 可以选择替换 <ins> 元素本身，或者其父元素
        // 这里以替换 <ins> 元素本身为例
        adBlock.innerHTML = '<h1>您的自定义HTML内容 (AdSense)</h1>';
    });
}

// 首次页面加载时执行替换
replaceAdContent();

// 监听GPT广告加载事件，以处理动态或懒加载的广告
// 确保 googletag 存在才添加监听器
if (typeof googletag !== 'undefined' && googletag.pubads) {
    googletag.pubads().addEventListener("slotOnload", (event) => {
        // 当一个广告位加载完成时，重新执行替换逻辑
        replaceAdContent();
    });
    // 还可以监听其他事件，例如 'slotRenderEnded'
    // googletag.pubads().addEventListener("slotRenderEnded", (event) => {
    //     replaceAdContent();
    // });
}

登录后复制

说明：

replaceAdContent(): 封装了识别和替换广告的逻辑，包括GPT和AdSense两种情况。
typeof googletag !== 'undefined': 在访问 googletag 对象之前进行类型检查，以避免在没有GPT的页面上报错。
googletag.pubads().addEventListener("slotOnload", ...): 这是处理动态广告的关键。当一个GPT广告位加载完成时，此事件会触发，此时可以再次运行替换逻辑，确保新加载的广告也被处理。
slotRenderEnded 也是一个有用的事件，它在广告内容渲染到页面上后触发。根据需求可以选择监听 slotOnload 或 slotRenderEnded。

三、总结与注意事项

通过上述步骤，您可以构建一个Chrome扩展程序，有效地检测并替换网页中的Google广告为自定义内容。

关键点回顾：

识别广告类型： 根据是Google Ad Manager (GPT) 还是 Google AdSense 来选择不同的DOM操作方法。
脚本注入： 由于 googletag 等页面全局对象无法直接在 content-script 中访问，必须通过 chrome.scripting.executeScript 配合 web_accessible_resources 将逻辑注入到页面的DOM环境中。
动态广告处理： 利用 googletag.pubads().addEventListener("slotOnload", ...) 等事件监听器，确保即使是动态加载或懒加载的广告也能被及时替换。
Manifest V3： 遵循最新的扩展程序开发规范，使用 scripting API 和 service_worker 作为背景脚本。

注意事项：

兼容性： 网页的HTML结构和Google广告的实现方式可能会随时间变化，这可能需要您更新识别广告元素的选择器或逻辑。
性能： 频繁地遍历DOM和修改内容可能会对页面性能产生轻微影响，但对于广告替换这种场景通常影响不大。
合法性与道德： 在开发和使用此类扩展程序时，请务必考虑其合法性、隐私政策以及对网站运营者的影响。本教程仅出于教育和技术探讨目的。
Ad Blocker： 许多广告拦截器在网络请求层面就阻止了广告的加载，因此您的脚本可能无法找到任何广告元素来替换。此教程主要针对广告已加载到DOM但尚未被替换的情况。

以上就是如何通过Chrome扩展程序替换Google广告内容的详细内容，更多请关注php中文网其它相关文章！