Chrome扩展MV3中能否使用Google Picker API？CSP问题求助

可以在MV3中使用Google Picker API，但需要针对MV3的CSP（内容安全策略）限制调整配置和实现方式，以下是具体可行方案：

1. 配置Manifest.json的CSP与权限 #

首先需要在manifest.json中调整CSP规则，允许加载Google Picker相关的外部资源，并配置必要的权限：

{
  "manifest_version": 3,
  "name": "Google Picker Demo",
  "version": "1.0",
  "permissions": ["identity"],
  "oauth2": {
    "client_id": "你的Google OAuth客户端ID.apps.googleusercontent.com",
    "scopes": ["https://www.googleapis.com/auth/drive.readonly"]
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://apis.google.com; object-src 'none'; style-src 'self' 'unsafe-inline' https://ssl.gstatic.com; img-src 'self' data: https://*.googleusercontent.com;",
    "sandbox": "sandbox allow-scripts allow-popups allow-forms; script-src 'self' https://apis.google.com; style-src 'self' 'unsafe-inline' https://ssl.gstatic.com;"
  },
  "sandbox": {
    "pages": ["sandbox.html"]
  }
}

• extension_pages：允许扩展自身页面加载Google API脚本，同时允许必要的样式资源。
• sandbox：为沙盒页面单独配置宽松的CSP，避免与扩展主页面的严格规则冲突。
• sandbox.pages：声明用于加载Picker的沙盒页面路径。

2. 创建沙盒页面加载Google Picker #

由于MV3对扩展页面的CSP限制严格，最优方式是将Picker逻辑放在沙盒页面中，避免触发CSP错误：

创建sandbox.html #

<!DOCTYPE html>
<html>
<head>
  <script src="https://apis.google.com/js/api.js"></script>
  <script>
    let authToken;

    // 监听来自扩展主页面的初始化消息
    window.addEventListener('message', (e) => {
      if (e.data.type === 'INIT_PICKER') {
        authToken = e.data.token;
        initPicker();
      }
    });

    function initPicker() {
      gapi.load('picker', {
        callback: () => {
          const picker = new google.picker.PickerBuilder()
            .addView(google.picker.ViewId.DOCUMENTS) // 可根据需求调整视图类型
            .setOAuthToken(authToken)
            .setCallback(handlePickerResult)
            .build();
          picker.setVisible(true);
        }
      });
    }

    // 处理Picker选择结果，发送回扩展主页面
    function handlePickerResult(data) {
      if (data.action === google.picker.Action.PICKED) {
        const selectedFile = data.docs[0];
        window.parent.postMessage({
          type: 'PICKER_RESULT',
          file: {
            id: selectedFile.id,
            name: selectedFile.name,
            url: selectedFile.url
          }
        }, '*');
      }
    }
  </script>
</head>
<body></body>
</html>

3. 在扩展页面中调用沙盒Picker #

以弹出页（popup.html）为例，嵌入沙盒iframe并通过消息通信触发Picker、接收结果：

创建popup.html #

<!DOCTYPE html>
<html>
<head>
  <style>
    button { padding: 8px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <button id="open-picker-btn">打开Google文件选择器</button>
  <iframe id="picker-sandbox" src="sandbox.html" style="display: none;"></iframe>

  <script>
    const sandboxIframe = document.getElementById('picker-sandbox');
    const openBtn = document.getElementById('open-picker-btn');

    openBtn.addEventListener('click', () => {
      // 获取Google OAuth令牌
      chrome.identity.getAuthToken({ interactive: true }, (token) => {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message);
          return;
        }
        // 向沙盒iframe发送初始化指令
        sandboxIframe.contentWindow.postMessage({
          type: 'INIT_PICKER',
          token: token
        }, '*');
      });
    });

    // 监听沙盒返回的选择结果
    window.addEventListener('message', (e) => {
      if (e.data.type === 'PICKER_RESULT') {
        console.log('选中的文件:', e.data.file);
        // 在这里添加你的业务逻辑处理
        alert(`选中文件：${e.data.file.name}`);
      }
    });
  </script>
</body>
</html>

为什么之前的方案失败？ #

• 弹出窗口直接加载：MV3弹出页属于extension_pages，默认CSP不允许加载未授权的外部脚本，且Google Picker初始化依赖的inline代码会被CSP拦截。
• 内容脚本注入iframe：目标页面的CSP可能限制加载Google资源，且内容脚本无法直接跨域操作iframe内容，导致Picker无法正常初始化。
• 扩展内部非沙盒iframe：非沙盒iframe继承扩展页面的严格CSP，同样会拦截Google Picker的脚本加载和inline代码执行。

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