使用 Chrome 扩展移除或替换 Google Ads

使用 chrome 扩展移除或替换 google ads

本文旨在指导开发者通过 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 = '

yourcustomInnerHTML

';}

这段代码会遍历所有 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": [""]  }]}

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() 函数创建一个 元素,将其 src 属性设置为 pageScript.js 的 URL,并将其插入到网页的 或 元素中。

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(); });

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 = '

yourcustomInnerHTML

'; }}// Run the function after the DOM is loadeddocument.addEventListener('DOMContentLoaded', function() { customHTML();});

注意事项:

确保在 manifest.json 文件中正确配置了 permissions 和 host_permissions。pageScript.js 中的代码将在目标网站的上下文中执行,因此可以访问网站的 DOM 和 JavaScript 对象。为了确保代码在广告加载后执行,可以使用事件监听器或延迟执行。

总结

通过以上步骤,你可以创建一个 Chrome 扩展程序,用于移除或替换网页中的 Google Ads。根据网站使用的广告服务类型,选择相应的 JavaScript 代码,并将其集成到 pageScript.js 文件中。请务必仔细阅读代码中的注释,并根据实际情况进行调整。

以上就是使用 Chrome 扩展移除或替换 Google Ads的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1516644.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 10:12:36
下一篇 2025年12月20日 10:12:43

相关推荐

  • 页面加载时图表显示异常,刷新后恢复正常,是怎么回事?

    样式延迟加载导致图表显示异常 问题: 在加载页面时,图表不能正常显示,刷新后才恢复正常。这是什么原因? 答案: 图表绘制时,CSS 样式文件或数据尚未加载完成,导致容器没有尺寸,只能使用默认最小值进行渲染。刷新时,由于缓存,加载速度很快,因此样式能够及时加载,图表就能正常渲染。 解决方案: 指定容器…

    2025年12月24日
    000
  • 使用 React 构建 Fylo 云存储网站

    介绍 在这篇博文中,我们将逐步介绍如何使用 react 创建一个功能丰富的云存储网站。该网站受 fylo 启发,提供了主页、功能、工作原理、感言和页脚等部分。在此过程中,我们将讨论用于构建这个完全响应式网站的结构、组件和样式。 项目概况 该项目由多个部分组成,旨在展示云存储服务。每个部分都是用 re…

    2025年12月24日 好文分享
    000
  • 使用 React 构建食谱查找器网站

    介绍 在本博客中,我们将使用 react 构建一个食谱查找网站。该应用程序允许用户搜索他们最喜欢的食谱,查看趋势或新食谱,并保存他们最喜欢的食谱。我们将利用 edamam api 获取实时食谱数据并将其动态显示在网站上。 项目概况 食谱查找器允许用户: 按名称搜索食谱。查看趋势和新添加的食谱。查看各…

    2025年12月24日 好文分享
    200
  • 黑暗主题的力量和性能优化:简单指南

    在当今的数字时代,用户体验是关键。增强这种体验的一种方法是在您的网站或应用程序上实施深色主题。它不仅看起来时尚,而且还可以提高现代设备的性能并节省电池寿命。让我们探索如何使用深色主题优化您的网站并提高性能。 为什么选择黑暗主题? 减少眼睛疲劳:深色主题对眼睛更温和,尤其是在弱光条件下。这使用户可以更…

    2025年12月24日 好文分享
    300
  • 不可变数据结构:ECMA 4 中的记录和元组

    不可变数据结构:ecmascript 2024 中的新功能 ecmascript 2024 引入了几个令人兴奋的更新,但对我来说最突出的一个功能是引入了不可变数据结构。这些新结构——记录和元组——改变了 javascript 中数据管理的游戏规则。它们提供了一种令人满意的方式来保持我们的数据健全、安…

    2025年12月24日
    100
  • 不惜一切代价避免的前端开发错误

    简介 前端开发对于创建引人入胜且用户友好的网站至关重要。然而,在这方面犯错误可能会导致用户体验不佳、性能下降,甚至出现安全漏洞。为了确保您的网站是一流的,必须认识并避免常见的前端开发错误。 常见的前端开发错误 缺乏计划 跳过线框 跳过线框图过程是一种常见的疏忽。线框图有助于在任何实际开发开始之前可视…

    2025年12月24日
    000
  • 如何克服响应式布局的不足之处

    如何克服响应式布局的不足之处 随着移动设备的普及和互联网的发展,响应式布局成为了现代网页设计中必不可少的一部分。通过响应式设计,网页可以根据用户所使用的设备自动调整布局,使用户在不同的屏幕尺寸下都能获得良好的浏览体验。 然而,尽管响应式布局在提供多屏幕适应性方面做得相当出色,但仍然存在一些不足之处。…

    2025年12月24日
    000
  • 掌握响应式布局的关键技巧和实践经验

    掌握响应式布局的关键技巧和实践经验 随着移动设备的普及和多样性,越来越多的用户选择使用手机、平板等移动设备浏览网页,这就使得响应式布局成为了现代前端开发中的重要技术之一。响应式布局的目标就是让网页能够自适应不同尺寸的屏幕,确保在任何设备上都能提供良好的用户体验。 要掌握响应式布局的关键技巧和实践经验…

    2025年12月24日
    200
  • 研究响应式布局的问题和优化方法

    响应式布局存在的问题及优化方法研究 随着移动互联网的飞速发展,越来越多的人使用移动设备来浏览网页。为了让网站在不同设备上都能提供良好的用户体验,响应式布局已经成为了现代网页设计的标准之一。然而,响应式布局在实践中还存在一些问题,本文将对这些问题进行探讨,并提出一些优化方法。 首先,对于较大规模的网站…

    2025年12月24日
    000
  • 如何通过响应式布局改善用户体验?

    响应式布局如何提升用户体验? 随着移动设备的普及,越来越多的用户习惯使用不同尺寸的屏幕来浏览网页。为了在各种设备上呈现出良好的用户体验,响应式布局应运而生。响应式布局是一种能够根据设备的屏幕尺寸和特性来自动调整网页布局的技术。通过响应式布局,可以实现在不同屏幕上的内容可读性和可用性的优化,从而提升用…

    2025年12月24日
    200
  • CSS属性实现响应式图片延迟加载的方法

    CSS属性实现响应式图片延迟加载的方法 在网页开发中,经常会遇到需要加载大量图片的情况,特别是在移动设备上。为了提高页面的加载速度和用户体验,延迟加载(lazy loading)图像成为一种常见的优化方法。 延迟加载是指在页面加载时,只加载可见区域的图像,而不加载整个页面上的所有图像。这样可以大大减…

    2025年12月24日
    000
  • css中的浏览器私有化前缀有哪些

    css中的浏览器私有化前缀有:1、谷歌浏览器和苹果浏览器【-webkit-】;2、火狐浏览器【-moz-】;3、IE浏览器【-ms-】;4、欧朋浏览器【-o-】。 浏览器私有化前缀有如下几个: (学习视频分享:css视频教程) -webkit-:谷歌 苹果 background:-webkit-li…

    2025年12月24日
    300
  • 如何利用css改变浏览器滚动条样式

    注意:该方法只适用于 -webkit- 内核浏览器 滚动条外观由两部分组成: 1、滚动条整体滑轨 2、滚动条滑轨内滑块 在CSS中滚动条由3部分组成 立即学习“前端免费学习笔记(深入)”; name::-webkit-scrollbar //滚动条整体样式name::-webkit-scrollba…

    2025年12月24日
    000
  • css如何解决不同浏览器下文本兼容的问题

    目标: css实现不同浏览器下兼容文本两端对齐。 在 form 表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 解决过程: 立即学习“前端免费学习笔记(深入)”; 1、首先想到是能不能直接靠 css 解决问题 css .test-justify { text-align: just…

    2025年12月24日 好文分享
    200
  • 关于jQuery浏览器CSS3特写兼容的介绍

    这篇文章主要介绍了jquery浏览器css3特写兼容的方法,实例分析了jquery兼容浏览器的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery浏览器CSS3特写兼容的方法。分享给大家供大家参考。具体分析如下: CSS3充分吸收多年了web发展的需求,吸收了很多新颖的特性。例如border-…

    好文分享 2025年12月24日
    000
  • 360浏览器兼容模式的页面显示不全怎么处理

    这次给大家带来360浏览器兼容模式的页面显示不全怎么处理,处理360浏览器兼容模式页面显示不全的注意事项有哪些,下面就是实战案例,一起来看一下。  由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览…

    好文分享 2025年12月24日
    000
  • 如何解决css对浏览器兼容性问题总结

    css对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了ie7,6与fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且doctype 影响 css 处理,作为w3c的标准,一定要加 doctype声名.…

    好文分享 2025年12月23日
    000
  • 关于CSS3中选择符的实例详解

    英文原文: www.456bereastreet.com/archive/200601/css_3_selectors_explained/中文翻译: www.dudo.org/article.asp?id=197注:本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的…

    好文分享 2025年12月23日
    000
  • 阐述什么是CSS3?

    网页制作Webjx文章简介:CSS3不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。            CSS3不是新事物,更不是只是围绕border-radius属性实现              …

    好文分享 2025年12月23日
    000
  • 用CSS hack技术解决浏览器兼容性问题

    什么是CSS Hack?   不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。 CSS Hack 形式   CSS Hack大致有3种表现形…

    好文分享 2025年12月23日
    000

发表回复

登录后才能评论
关注微信