如何通过自研Chrome Extension移除Google Tag Manager ID？

• 员工在英国各地居家办公，需阻止其页面浏览数据被Google Tag Manager（GTM）所有追踪工具记录
• IP拦截方案不可行：员工数量多、IP地址不固定
• 核心需求：在GTM代码触发前移除其ID或完整代码
• 考虑自研Chrome扩展，但未找到具体实现方案；已知Chrome扩展构建方法，疑问：Chrome扩展是否在DOM完全加载后才触发？若是则该方案不可行
• 尝试过一款GTM禁用插件但无法正常工作，自行编写了manifest.json并修改页面代码，效果不佳

现有尝试代码 #

自研扩展的manifest.json #

{
    "name": " GTM Blocker",
    "version": "1.0.0",
    "description": "To block all tracking data",
    "manifest_version": 3,
    "author": "John Bell",
    "action":{
        "default_popup": "index.html",
        "default_title": " GTM Blocker"
    },

"icons": { "16": "images/favicon.ico",
           "48": "images/favicon.ico",
          "128": "images/favicon.ico" }

}

尝试的页面代码修改 #

<meta name="GTM-Blocker" content="enabled" />
<!-- Google Tag Manager -->
<script>
const GTMBlocker = document.querySelector('meta[name="GTM-Blocker"]');
const GTMBlockerEnabled = GTMBlocker.content === 'enabled'

if (GTMBlockerEnabled) { // DO NOT CONNECT TO GOOGLE TAG MANAGER
    alert("It does not fire");
}else{
    alert("It fires");
    (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&amp;l=' + l : '';
        j.async = true;
        j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', '<?php echo set_header_codes(TAG_MANGER_CODE); ?>');
}
</script>
<!-- End Google Tag Manager -->

方案一：Chrome扩展（Manifest V3）前置拦截GTM #

Chrome扩展可通过**内容脚本（Content Scripts）**配置run_at: "document_start"，在DOM开始解析前注入代码，完全能在GTM触发前完成拦截。具体步骤：

1. 修改manifest.json，添加内容脚本权限与配置：

{
    "name": "GTM Blocker",
    "version": "1.0.0",
    "description": "阻止GTM追踪员工浏览数据",
    "manifest_version": 3,
    "author": "John Bell",
    "action":{
        "default_popup": "index.html",
        "default_title": "GTM Blocker"
    },
    "icons": { 
        "16": "images/favicon.ico",
        "48": "images/favicon.ico",
        "128": "images/favicon.ico" 
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"], // 可根据需求限定目标域名
            "js": ["block-gtm.js"],
            "run_at": "document_start", // 关键：DOM解析前注入
            "world": "MAIN" // 注入页面主上下文，而非隔离环境
        }
    ],
    "permissions": ["activeTab"]
}

2. 创建block-gtm.js文件，实现拦截逻辑：

// 拦截GTM脚本加载
document.addEventListener('beforescriptexecute', function(e) {
    const src = e.target.src;
    if (src && src.includes('googletagmanager.com/gtm.js')) {
        e.preventDefault(); // 阻止GTM脚本加载
        console.log('GTM脚本已拦截');
    }
});

// 覆盖GTM数据推送函数
window.dataLayer = window.dataLayer || [];
window.dataLayer.push = function() {
    console.log('GTM数据推送已拦截');
};

// 移除页面中已存在的GTM脚本标签
const gtmScripts = document.querySelectorAll('script[src*="googletagmanager.com/gtm.js"]');
gtmScripts.forEach(script => script.remove());

// 移除页面中的GTM noscript标签
const gtmNoscripts = document.querySelectorAll('noscript iframe[src*="googletagmanager.com/ns.html"]');
gtmNoscripts.forEach(noscript => noscript.parentElement.remove());

方案二：企业级Chrome政策强制拦截 #

若使用企业管理的Chrome浏览器，可通过Chrome Enterprise Policies配置全局拦截规则，无需员工手动安装扩展，适合大规模部署：

• 配置URLBlocklist策略，添加*://*.googletagmanager.com/*
• 该方式系统层面生效，员工无法绕过

方案三：优化内部网站代码逻辑 #

若有权限修改公司内部网站代码，可直接在GTM初始化前判断员工身份（如企业SSO标识、内部域名识别），跳过GTM加载：

// 示例：通过域名或Cookie判断是否为内部员工
const isInternalEmployee = window.location.hostname.endsWith('.your-company-domain.com') || document.cookie.includes('internal_employee=1');

if (!isInternalEmployee) {
    // 仅非员工加载GTM
    (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', '<?php echo set_header_codes(TAG_MANGER_CODE); ?>');
}

关键说明 #

• Chrome扩展的run_at: "document_start"配置可确保代码在GTM脚本加载前执行，完全可行，无需担心DOM加载时机问题
• 内容脚本的world: "MAIN"配置是Manifest V3新特性，确保代码注入页面主上下文，能够覆盖window.dataLayer等全局对象

内容的提问来源于stack exchange，提问作者William