Manifest V3下Chrome扩展加载外部脚本触发CSP报错求助

Manifest V3对内容安全策略（CSP）的限制比V2严格得多，extension_pages的CSP不允许直接添加外部脚本源，这就是你遇到报错的核心原因。以下是可行的解决方法：

方法1：动态注入脚本（推荐） #

不要在HTML中直接引入外部脚本，而是通过JavaScript动态创建脚本元素并加载，绕过extension_pages的CSP限制。

示例代码（可在content script或扩展页面脚本中执行）：

const loadGapiScript = () => {
  const script = document.createElement('script');
  script.src = 'https://apis.google.com/js/api.js';
  script.onload = () => {
    // 脚本加载完成后初始化Google API客户端
    gapi.load('client', () => {
      // 在此编写API初始化逻辑，比如授权、调用Google Docs接口
    });
  };
  script.onerror = (err) => {
    console.error('加载GAPI脚本失败:', err);
  };
  document.head.appendChild(script);
};

// 调用加载函数
loadGapiScript();

方法2：配置Host Permissions（必要前提） #

确保在manifest.json中添加Google API的域名权限，否则扩展无法与该域名通信：

{
  "host_permissions": [
    "https://apis.google.com/*",
    "https://www.googleapis.com/*" // 若需调用其他Google服务API，一并添加
  ]
}

方法3：使用Sandbox页面（备选） #

如果动态注入仍有问题，可以创建sandboxed页面，在这个页面的CSP中允许加载外部脚本，再通过postMessage与主扩展通信。

1. 在manifest.json中配置sandbox：

{
  "sandbox": {
    "pages": ["sandbox.html"],
    "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'none'"
  }
}

2. 创建sandbox.html页面：

<!DOCTYPE html>
<html>
<head>
  <script src="https://apis.google.com/js/api.js"></script>
  <script>
    // 加载并初始化GAPI后通知主扩展
    gapi.load('client', () => {
      window.parent.postMessage({ type: 'GAPI_READY' }, '*');
    });

    // 监听主扩展消息，处理API调用请求
    window.addEventListener('message', (event) => {
      if (event.data.type === 'CALL_GAPI') {
        // 执行GAPI操作，比如写入Google Docs
        // 完成后将结果返回给主扩展
        window.parent.postMessage({ type: 'GAPI_RESULT', data: '操作结果' }, '*');
      }
    });
  </script>
</head>
<body></body>
</html>

3. 在主扩展页面中嵌入sandbox并通信：

// 创建iframe嵌入sandbox页面
const sandboxIframe = document.createElement('iframe');
sandboxIframe.src = chrome.runtime.getURL('sandbox.html');
sandboxIframe.style.display = 'none';
document.body.appendChild(sandboxIframe);

// 监听sandbox的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'GAPI_READY') {
    // GAPI已准备好，发送API调用请求
    sandboxIframe.contentWindow.postMessage({ type: 'CALL_GAPI' }, '*');
  } else if (event.data.type === 'GAPI_RESULT') {
    // 处理返回结果
    console.log('GAPI操作结果:', event.data.data);
  }
});

关键说明 #

Manifest V3中extension_pages的CSP仅允许加载扩展自身资源（'self'）和少数Chrome内置资源，无法直接添加外部脚本源，因此必须通过动态注入或sandbox的方式加载外部脚本。

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