Manifest V3 Gmail Chrome扩展CSP脚本违规问题求解

问题根源 #

你之前两种写法触发CSP报错的核心原因，是试图把代码注入到Gmail页面自身的主执行上下文运行，自然会被Gmail配置的严格CSP规则拦截。
Chrome扩展的content script默认运行在独立的隔离沙箱（Isolated World）中，和页面原生上下文完全隔离，沙箱内的DOM操作、事件绑定不受页面自身CSP规则约束，根本不需要放宽CSP配置、开启unsafe-inline这类存在安全风险的选项。

正确实现逻辑 #

• 完全放弃inline事件绑定、向页面插入script标签加载扩展脚本这两种思路，所有逻辑直接在content script中完成。
• 由于Gmail是单页应用，新建邮件的编辑界面是动态插入DOM的，需要通过MutationObserver监听DOM变化，在编辑窗口渲染完成后再注入复选框，避免找不到注入节点。
• 复选框创建完成后，直接在content script上下文中通过addEventListener绑定change事件，全程不触碰CSP禁令。

代码实现 #

首先配置扩展清单文件manifest.json（Manifest V3版本，符合当前Chrome扩展规范）：

{
  "manifest_version": 3,
  "name": "Gmail复选框扩展",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

在同目录下创建content.js，写入注入和事件逻辑：

// 监听DOM动态渲染，捕捉新建邮件窗口
const domObserver = new MutationObserver(() => {
  // 定位邮件编辑区工具栏，可根据实际想要注入的位置调整选择器
  const editToolbar = document.querySelector('.aDh .G-tF');
  // 避免重复注入复选框
  if (editToolbar && !document.getElementById('mautic-custom-check')) {
    // 创建复选框容器
    const checkWrap = document.createElement('div');
    checkWrap.style.cssText = 'display:inline-flex;align-items:center;margin:0 8px;';
    // 创建复选框元素
    const customCheck = document.createElement('input');
    customCheck.type = 'checkbox';
    customCheck.id = 'mautic-custom-check';
    // 直接绑定事件，无inline代码、无页面脚本注入，完全符合CSP要求
    customCheck.addEventListener('change', (e) => {
      if (e.target.checked) {
        console.log('checked');
      }
    });
    // 创建选项文字标签
    const checkLabel = document.createElement('span');
    checkLabel.textContent = '自定义选项';
    checkLabel.style.marginLeft = '4px';

    checkWrap.appendChild(customCheck);
    checkWrap.appendChild(checkLabel);
    editToolbar.appendChild(checkWrap);
  }
});

// 启动DOM监听
domObserver.observe(document.body, {
  childList: true,
  subtree: true
});

方案合规性说明 #

• 全程未使用onchange这类inline事件属性，所有事件绑定通过标准DOM API在隔离沙箱中完成，不会触发inline脚本相关CSP报错
• 未向页面上下文插入任何script标签，不需要加载Gmail域下的脚本资源，不会触发script-src相关CSP报错
• 未修改扩展默认CSP配置，没有开启unsafe-inline/unsafe-eval等危险权限，完全符合Chrome扩展安全审核要求

补充：只有当你需要调用Gmail页面自身定义的JS变量、函数时，才需要考虑向主世界注入脚本，你当前的需求仅涉及DOM注入和简单事件监听，完全在content script能力范围内，不需要多余操作。

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