本文旨在详细阐述如何开发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 = '您的自定义HTML内容
';}
说明：
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' 类的 元素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 = '您的自定义HTML内容
'; } else { // 如果父元素没有ID，直接替换 元素本身的内容 adsenseBlocks[i].innerHTML = '您的自定义HTML内容
'; }}
说明：
document.querySelectorAll(‘ins.adsbygoogle’) 可以高效地找到所有AdSense广告单元。根据网站的具体结构，可能需要替换 ins 元素的父元素内容，或者直接替换 ins 元素本身。
二、在Chrome扩展程序中注入脚本
由于 googletag 对象是页面级别的全局变量，直接在Chrome扩展程序的 content-script 中访问它会导致 undefined 错误。这是因为 content-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": [ "" ], "background": { "service_worker": "service-worker.js" }, "web_accessible_resources": [{ "resources": ["pageScript.js"], "matches": [""] }]}
权限解释：
activeTab: 允许扩展程序访问当前活动标签页的信息。webNavigation: 允许扩展程序监听导航事件，例如页面加载完成。scripting: Manifest V3 中用于程序化注入脚本的核心权限。host_permissions: 允许扩展程序在所有网站上运行。根据需求可以限制为特定域名。web_accessible_resources: 声明 pageScript.js 可以被网页访问。这是将脚本注入到页面DOM的关键。
2.2 背景脚本 (service-worker.js)
背景脚本负责监听页面加载完成事件，并执行注入逻辑。
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(); }; // 将脚本添加到页面的 或 元素中 (document.head || document.documentElement).appendChild(s);}
说明：
chrome.webNavigation.onCompleted.addListener: 监听当一个框架或标签页完成加载时触发的事件。我们通过 details.frameId === 0 确保只在主框架加载完成时执行。chrome.scripting.executeScript: Manifest V3 中注入脚本的标准方法。func 属性允许您直接传递一个函数，该函数将在目标页面的上下文中执行。injectPageScript 函数：这个函数本身会在页面的DOM环境中运行，它负责创建并添加 标签，将 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 = '您的自定义HTML内容 (GPT)
'; } } } // 2. 替换Google AdSense 广告 const adsenseBlocks = document.querySelectorAll('ins.adsbygoogle'); adsenseBlocks.forEach(adBlock => { // 可以选择替换 元素本身，或者其父元素 // 这里以替换 元素本身为例 adBlock.innerHTML = '您的自定义HTML内容 (AdSense)
'; });}// 首次页面加载时执行替换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广告内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516642.html
微信扫一扫 
支付宝扫一扫 
