本文旨在指导开发者通过 Chrome 扩展移除或替换网页中的 Google Ads。针对使用 Google Publisher Tag (GPT) 和 Adsense 的两种情况，分别提供了相应的 JavaScript 代码示例。同时，本文还提供了完整的 Chrome 扩展代码，包括 manifest.json、service-worker.js 和 pageScript.js，指导开发者如何在扩展中注入脚本，实现对广告内容的定制化修改。
移除或替换 Google Ads 的方法
本教程将介绍如何使用 Chrome 扩展程序来移除或替换网页中的 Google Ads。根据网站使用的广告服务类型，我们将提供两种不同的方法：一种适用于使用 Google Publisher Tag (GPT) 的网站，另一种适用于使用 Adsense 的网站。
针对 Google Publisher Tag (GPT) 的方法
如果目标网站使用 Google Publisher Tag (GPT) 来展示广告，可以使用以下 JavaScript 代码来替换广告内容：
for (i = 0; i < googletag.pubads().getSlots().length; i++) {
var slotDomId = googletag.pubads().getSlots()[i].getSlotElementId();
document.getElementById(slotDomId).innerHTML = '<h1>yourcustomInnerHTML</h1>';
}
这段代码会遍历所有 GPT 定义的广告位，并将其内容替换为自定义的 HTML 内容。 googletag.pubads().getSlots() 获取所有广告位，getSlotElementId() 获取广告位对应的 DOM 元素的 ID，然后使用 innerHTML 属性修改其内容。
更多关于 getSlotElementId 的信息，请参考 Google Publisher Tag 文档。
注意事项：
- 此方法仅适用于使用 Google Publisher Tag (GPT) 的网站。
- 确保在 googletag 对象可用后执行此代码。
针对 Adsense 的方法
如果目标网站使用 Adsense 来展示广告，可以使用以下 JavaScript 代码来替换广告内容：
var adsenseBlocks = document.querySelectorAll('ins.adsbygoogle');
for (i = 0; i < adsenseBlocks.length; i++) {
var slotDomId = adsenseBlocks[i].parentNode.id
document.querySelector('#' + slotDomId).innerHTML = 'yourcustomInnerHTML';
}
这段代码会查找所有 ins.adsbygoogle 元素（Adsense 广告的常见标记），然后获取其父元素的 ID，并将其内容替换为自定义的 HTML 内容。
注意事项：
- 此方法假设 Adsense 广告位嵌套在一个父元素中，并且该父元素具有唯一的 ID。
- 此方法可能需要根据网站的 Adsense 集成方式进行调整。
Chrome 扩展程序实现
为了将上述代码应用到目标网站，需要创建一个 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>"]
}]
}
- permissions：声明扩展程序需要的权限，包括 activeTab、webNavigation 和 scripting。
- host_permissions：指定扩展程序可以访问的网站，”https://*/” 表示允许访问所有 HTTPS 网站。
- background：指定后台脚本，用于监听浏览器事件。
- web_accessible_resources：允许网页访问扩展程序中的资源，例如 pageScript.js。
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
});
});
});
- chrome.tabs.onUpdated.addListener：监听标签页更新事件。
- chrome.webNavigation.onCompleted.addListener：监听网页加载完成事件。
- chrome.scripting.executeScript：在指定标签页中执行脚本。
- insertScript() 函数创建一个 <script> 元素，将其 src 属性设置为 pageScript.js 的 URL，并将其插入到网页的 <head> 或 <html> 元素中。</script>
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();
});
- customHTML() 函数包含了用于替换 GPT 广告位的 JavaScript 代码。
- googletag.pubads().addEventListener(“slotOnload”, (event) => { … }); 添加了 GPT 事件监听器，用于检测广告刷新和延迟加载，并在广告加载后执行 customHTML() 函数。
使用 Adsense 的 pageScript.js 示例：
function customHTML() {
var adsenseBlocks = document.querySelectorAll('ins.adsbygoogle');
for (i = 0; i < adsenseBlocks.length; i++) {
var slotDomId = adsenseBlocks[i].parentNode.id
document.querySelector('#' + slotDomId).innerHTML = '<h1>yourcustomInnerHTML</h1>';
}
}
// Run the function after the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
customHTML();
});
注意事项：
- 确保在 manifest.json 文件中正确配置了 permissions 和 host_permissions。
- pageScript.js 中的代码将在目标网站的上下文中执行，因此可以访问网站的 DOM 和 JavaScript 对象。
- 为了确保代码在广告加载后执行，可以使用事件监听器或延迟执行。
总结
通过以上步骤，你可以创建一个 Chrome 扩展程序，用于移除或替换网页中的 Google Ads。根据网站使用的广告服务类型，选择相应的 JavaScript 代码，并将其集成到 pageScript.js 文件中。请务必仔细阅读代码中的注释，并根据实际情况进行调整。
暂无评论内容