Chrome扩展Manifest V3调用Google Sheets API遇404等错误求助

关键排查与修复步骤 #

• 修正API端点与权限范围

  • 创建Sheet文件依赖Drive API（https://www.googleapis.com/drive/v3/files），但batchUpdate/values.get属于Sheets API，端点格式为https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}，404错误大概率是端点拼写错误或spreadsheetId无效。
  • 补充OAuth权限：除了创建文件的https://www.googleapis.com/auth/drive.file，需添加Sheets操作权限，如读写权限https://www.googleapis.com/auth/spreadsheets或只读权限https://www.googleapis.com/auth/spreadsheets.readonly，权限缺失会导致操作被拒绝。

• 适配Manifest V3的安全配置

  • 在manifest.json的content_security_policy中，允许向Google API域名发起请求，配置示例：

    "content_security_policy": {
      "extension_pages": "script-src 'self'; object-src 'none'; connect-src https://sheets.googleapis.com https://www.googleapis.com;"
    }
    

  • 所有跨域API请求必须在后台Service Worker中发起，Manifest V3禁止内容脚本直接跨域请求，可通过chrome.runtime.sendMessage在内容脚本与后台间传递请求逻辑。

• 规范请求参数与身份验证

  • 所有Sheets API请求必须携带授权头：Authorization: Bearer {你的OAuth令牌}，缺失会导致权限验证失败。
  • batchUpdate请求示例（确保请求体结构正确）：

    async function updateSheet(spreadsheetId, oauthToken) {
      const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}:batchUpdate`;
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${oauthToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          requests: [
            {
              updateCells: {
                range: { sheetId: 0, startRowIndex: 0, startColumnIndex: 0 },
                rows: [{ values: [{ userEnteredValue: { stringValue: '测试数据' } }] }],
                fields: 'userEnteredValue'
              }
            }
          ]
        })
      });
      const result = await response.json();
      return result;
    }
    

  • values.get请求示例（确认路径参数正确）：

    async function getSheetValues(spreadsheetId, range, oauthToken) {
      const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}`;
      const response = await fetch(url, {
        headers: { 'Authorization': `Bearer ${oauthToken}` }
      });
      const result = await response.json();
      return result;
    }
    

• 调试技巧

  • 用Chrome开发者工具的Network面板查看请求详情：核对URL正确性、授权头是否存在、响应体中的错误描述（404可能是spreadsheetId对应文件不存在或用户无访问权限）。
  • 测试用的Sheet文件需确保当前OAuth登录用户拥有访问权限，避免使用其他用户的资源ID。

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