本教程深入解析Chrome扩展替换Google广告的技术细节，旨在帮助开发者构建专业的广告拦截或替换解决方案。文章详细阐述了如何针对Google Ad Manager (GPT) 和 AdSense 两种主流广告类型，通过脚本注入的方式，在Chrome扩展中实现对网页广告内容的识别与替换。内容涵盖manifest.json的配置、后台服务工作线程 (service-worker.js) 的作用，以及核心页面脚本 (pageScript.js) 如何监听广告加载事件并动态替换内容。同时，本文也强调了识别Google广告DOM结构的重要性，并提供了相应的替换策略，包括针对GPT广告的googletag API利用，以及针对AdSense广告的CSS选择器定位方法。通过本教程，开发者能够全面掌握Chrome扩展替换Google广告的关键技术，并打造高效、合规的广告管理工具。

本教程详细阐述了如何在Chrome扩展中识别并替换网页上的Google广告内容。文章涵盖了针对Google Ad Manager (GPT) 和 AdSense 两种主要广告类型的处理方法，并深入探讨了在Chrome扩展中通过脚本注入实现此功能的关键技术，包括 manifest.json 配置、后台服务工作线程 (service-worker.js) 的作用以及核心页面脚本 (pageScript.js) 如何监听广告加载事件并动态替换内容，旨在提供一套完整的专业级解决方案。

1. 理解Google广告的DOM结构与替换策略

在网页中，Google广告通常以特定的DOM元素形式存在。识别这些元素是替换或移除它们的第一步。根据广告服务类型的不同，定位广告元素的方法也有所区别。

1.1 针对Google Ad Manager (GPT) 广告

Google Ad Manager (原DoubleClick for Publishers) 广告通常通过 googletag JavaScript API进行管理和渲染。这些广告位在页面上会有特定的DOM ID，可以通过 googletag.pubads().getSlots() 获取所有已定义的广告位，并进一步通过 getSlotElementId() 方法获取其对应的DOM元素ID。

一旦获取到广告位的DOM ID，即可直接操作该元素的内容，将其替换为自定义的HTML。

// 遍历所有已定义的GPT广告位
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 = '
您的自定义HTML内容
';
    }
}

注意事项：

• 此方法仅适用于使用了Google Publisher Tag (GPT) 库的网站。
• googletag 对象必须在页面DOM中可用，这在Chrome扩展的 content-script 中可能无法直接访问，需要特殊的脚本注入机制（详见下文）。

1.2 针对Google AdSense 广告

AdSense 广告通常通过 标签嵌入。虽然它们本身是 ins 标签，但实际的广告内容通常渲染在其内部或其父级容器中。我们可以通过CSS选择器 ins.adsbygoogle 来定位这些广告块。

由于AdSense广告的实际渲染可能发生在 ins 标签内部，或者其父级容器是实际的广告占位符，因此通常需要替换其父级元素的内容。

// 查找所有AdSense广告块
const adsenseBlocks = document.querySelectorAll('ins.adsbygoogle');
for (let i = 0; i < adsenseBlocks.length; i++) {
    const parentElement = adsenseBlocks[i].parentNode;
    // 确保父元素存在且有ID，或直接替换其内容
    if (parentElement) {
        parentElement.innerHTML = '
您的自定义HTML内容
';
    }
}

注意事项：

• 这种方法依赖于AdSense广告的常见DOM结构。如果网站使用了非标准的AdSense集成方式，可能需要调整选择器。
• 同样，此操作需要在页面DOM加载完成后执行。

2. 在Chrome扩展中实现广告替换

在Chrome扩展中直接通过 content-script 操作页面DOM是常见的做法。然而，像 googletag 这样的页面级JavaScript对象通常只存在于页面的独立JavaScript上下文中，无法直接被 content-script 访问。因此，为了能够访问 googletag 或在广告加载完成后立即替换内容，我们需要采用脚本注入的方式，将核心逻辑注入到页面的DOM环境中。

2.1 manifest.json 配置

首先，需要在 manifest.json 文件中声明必要的权限和可访问资源。

{
  "name": "您的扩展名称",
  "action": {},
  "manifest_version": 3,
  "version": "0.1",
  "description": "一个用于替换Google广告的Chrome扩展。",
  "permissions": [
    "activeTab",
    "webNavigation",
    "scripting"
  ],
  "host_permissions": [
    ""
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "web_accessible_resources": [{
    "resources": ["pageScript.js"],
    "matches": [""]
  }]
}

关键配置项解释：

• permissions:
  • activeTab: 允许扩展临时访问当前活动标签页的权限。
  • webNavigation: 允许扩展监听浏览器导航事件，例如页面加载完成。
  • scripting: 允许扩展在指定上下文中执行脚本。
• host_permissions: 允许扩展在所有URL上运行，这是注入脚本所必需的。
• background: 定义后台服务工作线程，负责监听事件和执行脚本注入。
• web_accessible_resources: 声明 pageScript.js 文件是可从网页访问的。这是通过 document.createElement('script') 方式注入脚本的关键，它允许页面加载并执行该文件。

2.2 service-worker.js (后台脚本)

service-worker.js 负责监听页面加载完成事件，并在适当的时机将核心逻辑脚本 (pageScript.js) 注入到目标网页中。

// 监听webNavigation.onCompleted事件，确保页面DOM和所有资源加载完毕
chrome.webNavigation.onCompleted.addListener((details) => {
  // 确保是主框架加载完成，避免重复注入（例如iframe）
  if (details.frameId === 0) {
    chrome.scripting.executeScript({
      target: { tabId: details.tabId },
      func: () => {
        // 创建一个script元素并将其添加到DOM中
        // s.src 必须使用 chrome.runtime.getURL 获取 pageScript.js 的完整URL
        const s = document.createElement('script');
        s.src = chrome.runtime.getURL('pageScript.js');
        s.onload = function() {
          this.remove(); // 脚本加载并执行后，从DOM中移除script标签
        };
        (document.head || document.documentElement).appendChild(s);
      }
    });
  }
});

工作原理：

• chrome.webNavigation.onCompleted.addListener: 这是一个事件监听器，当一个页面的所有资源（包括图片、脚本等）加载完成时触发。我们只关心主框架（details.frameId === 0）的完成事件，以避免在iframe中重复注入。
• chrome.scripting.executeScript: 这是Manifest V3中执行脚本的主要API。它允许在指定的 tabId 和 frameId 中执行一个函数。
• func: () => {...}: 在此函数内部，我们动态创建