如何使用 JS fetch() 调用在浏览器扩展中检索 Google Sheet？

问题描述

因此，我对此进行了数小时的搜索，但在浏览器中找不到任何适用于当前 Google Sheets API (v4) 的内容。我可以 100% 通过 Postman 甚至浏览器地址栏获取数据。我有一个公开的 Google 电子表格。我有一个 API 密钥。我可以成功返回所有行数据。

一旦我尝试在浏览器扩展程序中这样做，我什么也得不到。

是否有人知道如何配置 JavaScript fetch() 调用以在公共 Google 电子表格上成功返回？不编辑，不删除。只是一个 GET。

这是我正在尝试但不起作用的方法：

var url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetId}?key=${key}`

var response = await fetch(url,{
        method: "GET",mode: "no-cors",headers: {
            "Host": "sheets.googleapis.com"
        }
    });

我注意到两件事：

1. 如果 mode 中的 no-cors 未设置为 fetch()，我会收到 NetworkError
2. 在 Postman 中，如果没有 Host 标头，我会收到错误响应

解决方法

请记住，这是一个与编写浏览器扩展/插件相关的问题，而不仅仅是浏览器中典型的 fetch() 用法。

要解决此问题，我必须在 manifest.json 文件中添加主机权限，以允许我调用的 Google API sheets.googleapis.com 的 URL，如下所示：

{
    "manifest_version": 2,"name": "Browser Extension","description": "description","version": "1.0.0","icons": {
        "64": "icons/icon.png"
    },"background": {
        "scripts": [
            "background_script.js"
        ]
    },"permissions": [
        "*://sheets.googleapis.com/*"
    ],"content_scripts": [
    [...]

就 fetch 调用而言，我只需要 URL。无需设置任何选项。