如何在Manifest V3版本Chrome扩展中接入Google Analytics

1. 修正Manifest配置 #

Manifest V3的extension_pages规则禁止在script-src中添加远程脚本地址，这是你之前配置CSP报错的核心原因，只需放开上报请求的地址权限即可，正确配置参考：

{
  "manifest_version": 3,
  "name": "Hello World",
  "description": "Teste",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' https://www.google-analytics.com https://www.googletagmanager.com"
  },
  "permissions": ["tabs"]
}

无需额外配置web_accessible_resources和注入内容脚本，移除你原来引入的fullScript.js相关冗余配置即可。

2. 替换GA上报逻辑 #

Manifest V3禁止动态加载外部gtag脚本，推荐用Google Analytics 4的测量协议直接上报数据，无CSP冲突，兼容性最好。
将你的analytics.js内容替换为以下代码：

// 替换为你自己的GA4测量ID和API密钥
const GA4_MEASUREMENT_ID = 'G-XXXXXXXXXX';
const GA4_API_SECRET = '你的GA4测量协议密钥';

// 通用上报函数
function sendGAEvent(eventName, eventParams = {}) {
  const url = `https://www.google-analytics.com/mp/collect?measurement_id=${GA4_MEASUREMENT_ID}&api_secret=${GA4_API_SECRET}`;
  // 生成并存储客户端唯一标识
  let clientId = localStorage.getItem('ga_client_id');
  if (!clientId) {
    clientId = crypto.randomUUID();
    localStorage.setItem('ga_client_id', clientId);
  }
  const payload = {
    client_id: clientId,
    events: [{
      name: eventName,
      params: eventParams
    }]
  };
  // 优先用sendBeacon保证上报可靠性
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(payload));
  } else {
    fetch(url, {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true
    });
  }
}

// 页面加载时上报页面访问事件
document.addEventListener('DOMContentLoaded', () => {
  sendGAEvent('page_view', {
    page_title: document.title,
    page_location: window.location.href
  });
  // 绑定按钮点击追踪
  const testBtn = document.getElementById('my-button');
  if (testBtn) {
    testBtn.addEventListener('click', () => {
      sendGAEvent('button_click', {
        button_id: 'my-button'
      });
    });
  }
});

3. 获取GA配置参数 #

登录Google Analytics后台，创建GA4媒体资源后进入对应数据流设置：

1. 复制G开头的测量ID替换上述代码中的GA4_MEASUREMENT_ID
2. 在测量协议设置板块生成API密钥，替换GA4_API_SECRET

4. 验证效果 #

打开扩展的开发者检查视图，切换到网络标签，操作扩展即可看到向谷歌分析地址发起的上报请求，GA后台的实时报告板块也能同步看到对应数据。

内容的提问来源于stack exchange，提问作者Hidemitsu Goncalves Hashimoto