本文介绍如何通过 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": [""] }]}
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 = 'yourcustomInnerHTML
'; } } //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 函数创建一个 元素，并将 pageScript.js 的 URL 设置为 src 属性，然后将该元素添加到网页的 或 元素中。pageScript.js: 包含了实际的广告替换代码。customHTML 函数实现了替换广告位的逻辑。googletag.pubads().addEventListener(“slotOnload”, (event) => { … }); 添加 GPT 事件监听器来检测刷新和懒加载的广告，确保在广告加载后执行 customHTML 函数。
使用方法：
将上述代码保存到不同的文件中，确保文件名与代码中的引用一致。在 Chrome 浏览器中打开 chrome://extensions/。启用 “开发者模式”。点击 “加载已解压的扩展程序”，选择包含上述文件的文件夹。
现在，当您访问包含 Google 广告的网页时，扩展程序会自动将广告替换为您自定义的内容。
总结：
通过上述方法，您可以有效地定位并替换网页中的 Google 广告。根据网站使用的广告服务（Google Ad Manager 或 Adsense），选择合适的方法来定位广告位。通过 Chrome 扩展程序，您可以将这些方法集成到浏览器中，实现自动化的广告替换功能。请务必注意，修改他人网站的内容可能涉及法律和道德问题，请谨慎使用。
以上就是使用 Chrome 扩展替换 Google Ads的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516640.html
微信扫一扫 
支付宝扫一扫 
