Chrome扩展Manifest V3中使用Google Drive Picker API遇阻求助

由于Manifest V3严格禁止扩展页面加载外部脚本，直接本地化Google API脚本后仍会触发其加载外部资源的逻辑，导致CSP报错。以下是两种可行的解决方式：

方式一：用沙盒（Sandbox）页面承载Picker逻辑 #

沙盒页面的CSP限制更宽松，允许加载外部资源，适合放置需要调用远程API的可视化组件。

1. 调整manifest.json配置 #

更新content_security_policy和sandbox字段，为沙盒页面开放必要的外部资源权限：

"content_security_policy": {
  "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline';",
  "sandbox": "sandbox allow-scripts allow-same-origin; default-src 'self' https://apis.google.com https://accounts.google.com; script-src 'self' https://apis.google.com https://accounts.google.com 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
},
"sandbox": {
  "pages": ["sandbox-picker.html"]
}

2. 创建沙盒页面sandbox-picker.html #

在这个页面中直接引入官方的远程脚本，正常初始化Picker：

<!DOCTYPE html>
<html>
<head>
  <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  <script>
    let pickerApiLoaded = false;
    let gisReady = false;

    function onApiLoad() {
      gapi.load('picker', () => {
        pickerApiLoaded = true;
        initIfReady();
      });
    }

    function gisLoaded() {
      gisReady = true;
      initIfReady();
    }

    function initIfReady() {
      if (!pickerApiLoaded || !gisReady) return;
      // 监听主页面的打开Picker请求
      window.addEventListener('message', (event) => {
        if (event.origin !== chrome.runtime.getURL('/')) return;
        if (event.data.type === 'OPEN_PICKER') {
          openPicker();
        }
      });
    }

    function openPicker() {
      // 配置Picker（替换为你的客户端ID和所需视图）
      const picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.DOCUMENTS)
        .setOAuthToken(chrome.runtime.getURL('/')) // 实际需通过OAuth获取token，可从主页面传递
        .setCallback(pickerCallback)
        .build();
      picker.setVisible(true);
    }

    function pickerCallback(data) {
      if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
        const file = data[google.picker.Response.DOCUMENTS][0];
        // 将结果传递给主页面
        window.parent.postMessage({
          type: 'PICKER_RESULT',
          data: { id: file.id, name: file.name }
        }, chrome.runtime.getURL('/'));
      }
    }
  </script>
</head>
<body></body>
</html>

3. 在主页面中嵌入沙盒iframe并通信 #

以setup.html为例，嵌入沙盒iframe并通过postMessage传递指令和接收结果：

<button onclick="openPicker()">打开文件选择器</button>
<iframe id="picker-sandbox" src="sandbox-picker.html" style="display: none;"></iframe>

<script>
function openPicker() {
  document.getElementById('picker-sandbox').contentWindow.postMessage(
    { type: 'OPEN_PICKER' },
    chrome.runtime.getURL('/')
  );
}

// 接收沙盒页面返回的Picker结果
window.addEventListener('message', (event) => {
  if (event.origin !== chrome.runtime.getURL('/')) return;
  if (event.data.type === 'PICKER_RESULT') {
    console.log('选中的文件:', event.data.data);
    // 这里处理文件结果
  }
});
</script>

方式二：直接调用Google Drive REST API（无可视化界面） #

如果不需要Picker的可视化选择界面，可通过OAuth2授权后直接调用Drive的REST API，完全规避外部脚本加载问题。

1. 配置manifest.json的OAuth权限 #

"oauth2": {
  "client_id": "你的Google Cloud OAuth客户端ID",
  "scopes": ["https://www.googleapis.com/auth/drive.readonly"]
},
"permissions": ["identity"]

2. 在后台脚本中发起授权并调用API #

// 请求用户授权获取访问令牌
chrome.identity.getAuthToken({ interactive: true }, (token) => {
  if (chrome.runtime.lastError) {
    console.error('授权失败:', chrome.runtime.lastError);
    return;
  }
  // 调用Drive API获取文件列表
  fetch('https://www.googleapis.com/drive/v3/files?pageSize=10', {
    headers: { 'Authorization': `Bearer ${token}` }
  })
  .then(res => res.json())
  .then(data => {
    console.log('文件列表:', data.files);
    // 处理文件数据
  })
  .catch(err => console.error('API调用失败:', err));
});

注意事项 #

• 使用沙盒页面时，必须验证postMessage的消息来源，避免跨域安全风险
• OAuth客户端ID需在Google Cloud控制台中配置，添加你的扩展ID作为授权来源（格式：chrome-extension://<你的扩展ID>/）

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