使用Chrome扩展替换Google Ads是前端开发者常见的需求场景，通过编写轻量的扩展程序，可以精准定位网页中加载的Google Ads广告元素，将其替换为自定义的内容，避免广告干扰正常浏览。
Chrome扩展基础结构搭建
首先我们需要创建Chrome扩展的基础目录和配置文件，所有扩展都需要一个manifest.json文件来声明扩展的权限、功能等信息。
创建项目目录ad-replace-extension，在目录下新建manifest.json文件，内容如下：
{
"manifest_version": 3,
"name": "Google Ads替换扩展",
"version": "1.0",
"description": "替换网页中的Google Ads广告",
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
这里我们使用manifest版本3，通过content_scripts字段声明在所有网页中注入content.js脚本，activeTab权限用于后续扩展功能升级时的页面操作支持。
核心替换逻辑实现
Google Ads的广告元素通常带有特定的类名或属性标识，我们可以通过DOM查询定位这些元素，再替换其内容和样式。新建content.js文件，编写如下代码：
// 定义Google Ads常见的标识特征
const adSelectors = [
// Google Ads常用广告容器类名
'.adsbygoogle',
// 广告iframe相关标识
'iframe[src*="googleads"]',
// 带广告标识的div
'div[id^="google_ads"]'
];
// 替换单个广告元素的函数
function replaceAdElement(element) {
// 清空原有内容
element.innerHTML = '';
// 修改样式为自定义提示块
element.style.width = '100%';
element.style.height = '120px';
element.style.backgroundColor = '#f5f5f5';
element.style.display = 'flex';
element.style.alignItems = 'center';
element.style.justifyContent = 'center';
element.style.border = '1px solid #e0e0e0';
element.style.borderRadius = '4px';
// 插入自定义内容
element.innerHTML = '<span style="color:#666;font-size:14px;">广告已被替换</span>';
}
// 执行广告替换的函数
function replaceGoogleAds() {
adSelectors.forEach(selector => {
const adElements = document.querySelectorAll(selector);
adElements.forEach(el => {
// 避免重复替换
if (!el.dataset.adReplaced) {
replaceAdElement(el);
el.dataset.adReplaced = 'true';
}
});
});
}
// 初始加载时执行替换
replaceGoogleAds();
// 监听DOM变化，处理动态加载的广告
const observer = new MutationObserver(() => {
replaceGoogleAds();
});
// 监听body下的子节点变化
observer.observe(document.body, {
childList: true,
subtree: true
});
代码逻辑说明
代码中首先定义了Google Ads常见的元素选择器，覆盖大部分广告场景。然后通过replaceAdElement函数处理单个广告元素，清空原有广告内容，替换为自定义的灰色提示块。replaceGoogleAds函数遍历所有选择器匹配的元素，标记已替换的元素避免重复操作。
由于很多网页的Google Ads是动态加载的，我们使用MutationObserver监听DOM变化，当页面新增节点时再次执行替换逻辑，确保后续加载的广告也能被替换。
扩展加载与测试
完成代码编写后，打开Chrome浏览器的扩展管理页面，开启右上角的开发者模式，点击加载已解压的扩展程序，选择我们创建的ad-replace-extension目录即可完成加载。
打开包含Google Ads的网页，等待页面加载完成后，原本的广告区域会被替换为自定义提示块，动态加载的广告也会在出现后自动被替换。
注意事项
- 不同网站的Google Ads实现方式可能有差异，若部分广告未替换，可以在
adSelectors数组中补充对应网站广告元素的特有选择器。 - manifest版本3对内容脚本的权限做了更严格的限制，若需要操作跨域资源，需要额外声明
host_permissions字段。 - 替换广告内容需要遵守相关网站的使用条款，避免用于违规用途。
以上实现方式仅用于技术学习场景，实际使用中请确保符合各平台的服务协议，不要用于绕过广告盈利等违规操作。
Chrome扩展Google_Ads广告替换JavaScript内容脚本修改时间：2026-07-10 11:09:29