本教程详细阐述了如何在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 = '<h1>您的自定义HTML内容</h1>'; } }
注意事项：
- 此方法仅适用于使用了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 = '<h1>您的自定义HTML内容</h1>'; } }
注意事项：
- 这种方法依赖于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": [ "<all_urls>" ], "background": { "service_worker": "service-worker.js" }, "web_Accessible_resources": [{ "resources": ["pageScript.js"], "matches": ["<all_urls>"] }] }
关键配置项解释：
- 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: () => {…}: 在此函数内部，我们动态创建 <script> 标签，将其 src 设置为 pageScript.js 的URL（通过 chrome.runtime.getURL 获取），然后将其添加到页面的 <head> 或 <html> 元素中。这种方式使得 pageScript.js 在页面的原生JavaScript上下文中运行，从而可以访问 googletag 等全局对象。</script>
2.3 pageScript.js (注入的页面脚本)
pageScript.js 包含实际的广告替换逻辑。由于广告可能是异步加载或懒加载的，仅仅在DOM加载完成时执行一次替换可能不足以覆盖所有广告。因此，最佳实践是监听GPT的 slotOnload 事件，确保在广告实际加载并渲染后进行替换。
/** * 执行广告替换的核心函数。 * 针对Google Ad Manager (GPT) 广告，遍历所有已定义的广告位并替换其内容。 */ function replaceGoogleAds() { // 检查 googletag 是否已定义且可用 if (typeof googletag !== 'undefined' && googletag.pubads) { // 遍历所有已定义的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 = '<h1>您的自定义HTML内容</h1>'; console.log(`已替换GPT广告位: ${slotDomId}`); } } } else { // 如果googletag不可用，尝试替换AdSense广告 const adsenseBlocks = document.querySelectorAll('ins.adsbygoogle'); adsenseBlocks.forEach(block => { const parentElement = block.parentNode; if (parentElement) { parentElement.innerHTML = '<h1>您的自定义HTML内容</h1>'; console.log('已替换AdSense广告块'); } }); } } // 首次加载时尝试替换一次，以防广告在 slotOnload 事件之前就已存在 document.addEventListener('DOMContentLoaded', replaceGoogleAds); window.addEventListener('load', replaceGoogleAds); // 添加GPT事件监听器，以检测广告刷新和懒加载的广告 // 确保 googletag.pubads() 存在才添加监听器 if (typeof googletag !== 'undefined' && googletag.pubads) { googletag.pubads().addEventListener("slotOnload", (event) => { // 当一个广告位加载完成时触发 const slot = event.slot; const slotDomId = slot.getSlotElementId(); const adElement = document.getElementById(slotDomId); if (adElement) { adElement.innerHTML = '<h1>您的自定义HTML内容</h1>'; console.log(`通过 slotOnload 事件替换GPT广告位: ${slotDomId}`); } }); // 也可以监听 slotRenderEnded 事件，如果需要更精细的控制 // googletag.pubads().addEventListener("slotRenderEnded", (event) => { // // ... // }); }
核心逻辑解释：
- replaceGoogleAds() 函数封装了广告替换的具体逻辑，它首先尝试处理GPT广告，如果 googletag 不可用，则回退到处理AdSense广告。
- DOMContentLoaded 和 load 事件监听：确保在页面DOM结构和所有资源加载完毕后，至少执行一次替换操作，以覆盖那些在GPT事件监听器建立之前就已渲染的广告。
- googletag.pubads().addEventListener(“slotOnload”, …): 这是处理动态加载和懒加载广告的关键。每当一个GPT广告位成功加载并渲染到页面时，这个事件就会触发。在事件回调中，我们可以再次获取到对应的广告位元素并替换其内容。这保证了即使广告是异步加载的，也能被及时替换。
- 错误处理/健壮性：在访问 googletag 对象之前进行 typeof googletag !== ‘undefined’ 检查，以避免在不使用GPT的网站上出现错误。
3. 总结与注意事项
通过上述步骤，您可以在Chrome扩展中有效地识别并替换网页上的Google广告内容。
关键点回顾：
- 识别广告类型： 根据网站使用的广告服务（GPT或AdSense）选择合适的DOM定位策略。
- 脚本注入： 这是在Chrome扩展中访问页面原生JavaScript对象（如 googletag）并进行DOM操作的核心。通过 web_accessible_resources 声明可访问的脚本，并使用 chrome.scripting.executeScript 将其注入到页面上下文中。
- 事件监听： 对于动态加载或懒加载的广告，仅仅在页面加载完成时执行一次替换是不够的。监听 googletag.pubads().addEventListener(“slotOnload”, …) 等事件是确保所有广告都能被及时替换的关键。
- 权限管理： 确保 manifest.json 中声明了 webNavigation 和 scripting 等必要权限，以及 host_permissions 和 web_accessible_resources 配置。
额外注意事项：
- 性能考量： 频繁的DOM操作可能会影响页面性能。确保您的替换逻辑高效且只在必要时执行。
- 用户体验： 替换广告可能会改变页面布局，影响用户体验。考虑如何优雅地处理这些变化，例如保持原有广告位的大小，以避免页面跳动。
- 合法性与道德： 在生产环境中使用此类扩展时，请务必考虑相关的法律法规、网站的使用条款以及用户的隐私和选择权。本教程仅从技术角度探讨实现方法。
通过本指南，您应该能够构建一个健壮的Chrome扩展，以满足在网页上替换或移除Google广告的需求。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
