本文旨在详细阐述如何开发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中。</script>
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: 允许扩展程序在所有网站上运行。根据需求可以限制为特定域名。
- 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();
};
// 将脚本添加到页面的 <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 注入到页面中。</script>
- 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但尚未被替换的情况。
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容