本文介绍如何通过 chrome 扩展程序，利用 Google Publisher Tag (gpt) 和 Adsense 的特性，定位并替换网页中的 Google 广告。教程详细讲解了如何通过 JavaScript 代码实现广告位的查找与替换，并提供了完整的 Chrome 扩展程序示例，包括 manifest.JSon、service-worker.js 和 pageScript.js 的代码，帮助开发者快速构建自定义广告替换功能。
替换 Google Ad Manager 广告
如果网站使用 Google Ad Manager (以前的 DoubleClick for Publishers) 来投放广告，那么可以使用 googletag API 来定位和替换广告位。
for (i = 0; i < googletag.pubads().getSlots().length; i++) { var slotdomId = googletag.pubads().getSlots()[i].getSlotElementId(); document.getElementById(slotDomId).innerhtml = 'yourcustominnerHTML'; }
这段代码遍历所有通过 googletag.pubads().getSlots() 获取到的广告位，然后使用 getSlotElementId() 获取广告位的 DOM ID，最后通过 document.getElementById() 找到对应的 DOM 元素，并替换其 innerHTML。
注意事项：
- 此方法仅适用于使用 Google Publisher Tag (GPT) 的网站。
- 确保在 googletag 对象可用后执行此代码，通常需要在 DOM 加载完成后执行。
替换 Adsense 广告
如果网站使用 Adsense 投放广告，可以使用不同的方法来定位广告位。通常，Adsense 广告会被包裹在一个 ins.adsbygoogle 元素中。
var adsenseBlocks = document.querySelectorAll('ins.adsbygoogle'); for (i = 0; i < adsenseBlocks.length; i++) { var slotDomId = adsenseBlocks[i].parentNode.id; document.querySelector('#' + slotDomId).innerHTML = 'yourcustomInnerHTML'; }
这段代码首先使用 document.querySelectorAll(‘ins.adsbygoogle’) 找到所有 Adsense 广告的 ins 元素，然后获取其父元素的 ID，最后通过 document.querySelector() 找到对应的 DOM 元素，并替换其 innerHTML。
注意事项：
- 此方法假设 Adsense 广告位被包含在一个具有 ID 的父元素中。
- 确保在 Adsense 广告加载完成后执行此代码，否则可能无法找到广告位。
Chrome 扩展程序示例
为了在 Chrome 扩展程序中执行上述代码，需要将脚本注入到目标网页的 DOM 中。以下是一个完整的 Chrome 扩展程序示例：
manifest.json
{ "name": "Your Extension Name", "action": {}, "manifest_version": 3, "version": "0.1", "description": "blablabla", "permissions": [ "activeTab", "webNavigation", "scripting" ], "host_permissions": [ "https://*/" ], "background": { "service_worker": "service-worker.js" }, "web_Accessible_resources": [{ "resources": ["pageScript.js"], "matches": ["<all_urls>"] }] }
service-worker.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { function insertScript() { var s = document.createElement('script'); s.src = chrome.runtime.getURL('pageScript.js'); s.onload = function() { this.remove(); }; (document.head || document.documentElement).appendChild(s); } chrome.webNavigation.onCompleted.addListener((tab) => { chrome.scripting.executeScript( { target: { tabId: tabId }, func : insertScript }); }); });
pageScript.js
function customHTML() { for (i = 0; i < googletag.pubads().getSlots().length; i++) { var slotDomId = googletag.pubads().getSlots()[i].getSlotElementId(); document.getElementById(slotDomId).innerHTML = '<h1>yourcustomInnerHTML</h1>'; } } //add GPT Eventlisteners to detect refresh & lazyloaded ads googletag.pubads().addEventListener("slotOnload", (event) => { const slot = event.slot; customHTML(); });
代码解释：
- manifest.json: 定义了扩展程序的元数据，包括名称、版本、权限等。permissions 字段声明了扩展程序需要的权限，例如 activeTab、webNavigation 和 scripting。host_permissions 字段指定了扩展程序可以访问的域名。web_accessible_resources 字段允许网页访问扩展程序中的资源，例如 pageScript.js。
- service-worker.js: 是一个后台脚本，用于监听网页的加载事件。chrome.tabs.onUpdated.addListener 监听标签页的更新事件，并在网页加载完成后执行 insertScript 函数。insertScript 函数创建一个 <script> 元素，并将 pageScript.js 的 URL 设置为 src 属性，然后将该元素添加到网页的 <head> 或 <html> 元素中。</script>
- pageScript.js: 包含了实际的广告替换代码。customHTML 函数实现了替换广告位的逻辑。googletag.pubads().addEventListener(“slotOnload”, (event) => { … }); 添加 GPT 事件监听器来检测刷新和懒加载的广告，确保在广告加载后执行 customHTML 函数。
使用方法：
- 将上述代码保存到不同的文件中，确保文件名与代码中的引用一致。
- 在 Chrome 浏览器中打开 chrome://extensions/。
- 启用 “开发者模式”。
- 点击 “加载已解压的扩展程序”，选择包含上述文件的文件夹。
现在，当您访问包含 Google 广告的网页时，扩展程序会自动将广告替换为您自定义的内容。
总结：
通过上述方法，您可以有效地定位并替换网页中的 Google 广告。根据网站使用的广告服务（Google Ad Manager 或 Adsense），选择合适的方法来定位广告位。通过 Chrome 扩展程序，您可以将这些方法集成到浏览器中，实现自动化的广告替换功能。请务必注意，修改他人网站的内容可能涉及法律和道德问题，请谨慎使用。
