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

Question

所以我已经为此搜索了几个小时，但在浏览器中找不到适用于当前 Google 工作表 API (v4) 的任何内容。我可以 100% 通过 Postman 甚至浏览器地址栏获取数据。我有一个 public Google 电子表格。我有一把 API 钥匙。我可以成功 return 所有的行数据。

当我尝试在浏览器扩展程序中这样做时，我一无所获。

有人知道如何配置 JavaScript fetch() 调用以在 public Google 电子表格上获得成功的 return 吗？没有编辑，没有删除。只是一个 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"
        }
    });

我注意到两件事：

如果 mode 在 fetch() 中没有设置为 no-cors，我会得到一个 NetworkError
在 Postman 中如果没有 Host header，我会得到一个错误响应

Answer 1

请记住，这是一个专门与编写浏览器 Extensions/Addons 有关的问题，而不仅仅是浏览器中的典型 fetch() 用法。

为了解决这个问题，我必须在 manifest.json 文件中添加主机权限，以允许 URL 用于 Google API sheets.googleapis.com 我我正在打电话，像这样：

{
    "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": [
    [...]

至于获取调用，我只需要 URL。无需设置任何选项。

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

How to retrieve a Google Sheet in a Browser Extension with a JS fetch() call?

javascript

fetch

google-sheets-api

browser-extension

manifest.json