本文介绍如何通过 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 扩展程序，您可以将这些方法集成到浏览器中，实现自动化的广告替换功能。请务必注意，修改他人网站的内容可能涉及法律和道德问题，请谨慎使用。
暂无评论内容