谷歌表格API和Chrome扩展程序一起使用，如何操作？

Question

我正在开发我的第一个Chrome扩展程序。我的想法是调用Google Sheets API，从我的扩展程序向谷歌电子表格中追加一行。我参考了这个链接并成功地尝试了API，以在我希望的工作表中追加行。

现在我正在尝试从我的Chrome扩展程序代码文件中实现同样的功能。由于我们的扩展程序不允许使用内联JS，所以如何在您的扩展程序中使用相同的示例代码？任何示例或基本样板将会有所帮助。

非常感谢您提前的帮助。

- Shyam Kansagra

---

查看这个 https://dev59.com/oL7pa4cB1Zd3GeqP9PHN#74358255 - Parth Kapadia

Answer 1

您收到该错误是因为内联JavaScript。
Chrome扩展程序不允许任何内联脚本。阅读此处。

不会执行内联JavaScript
不会执行内联JavaScript。此限制禁止内联块和内联事件处理程序（例如）。

因此，任何JavaScript都必须来自它自己的.js文件。
通常使用popup.html以及在popup.js中为该页面提供所有JavaScript。
对于options.html和options.js也是如此。

---

有用的链接：
Chrome扩展和Google Sheets
使用OAuth的教程

- Jay A. Little

---

谢谢你的回答。我知道我应该只在js中编写onclick等内容...但问题是，我不知道如何使用'async'和'defer'关键字。我该如何在我的js中为script src使用onload？ - Shyam Kansagra

我正在尝试使用js编写<script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script>，以便在html文件中不再有任何内联js。我该如何将其转换为js，以便可以从html中删除此标记？ - Shyam Kansagra

这只是为了解决您的内容安全策略错误。我不确定您是否真的想像这样使用https://apis.google.com/js/api.js来访问Google表格。我会在我的回答中添加一些链接，以帮助您后续的问题。 - Jay A. Little

我明白你的想法。很抱歉我不能提供更多帮助，我建议你发布一个新问题，具体询问如何在Chrome扩展程序中使用与该网站演示相同的方法，理解现在你不能像他们展示的那样使用内联JS。 - Jay A. Little

好的，我会发一个新问题。同时你分享的链接也非常有用。非常感谢 :) - Shyam Kansagra

Answer 2

https://github.com/malik55khan/speardsheet-reader/

演示：https://www.loom.com/share/d7d432c513a44b05a615fa0bd170fb23

在 Google 控制台中创建客户端认证密钥并选择 Chrome 扩展程序。然后将项目 ID 提交并保存，您将获得客户端 ID。接下来的步骤是创建 API 密钥。

添加一个新项目。 - 选择 Google Cloud 或电子表格 - 启用 API。

希望这会更有帮助。

- MALIK KHAN

---

这里使用了 eval()，所以它不兼容清单 v3。你（或其他人）有没有提示可以在清单 v3 中执行此操作？ - César Rodriguez

@CésarRodriguez 你找到了在manifest v3中将sheets/docs API与Chrome扩展程序连接的方法吗？ - Parth Kapadia

我将我的Chrome扩展程序（清单v3）与Google文档连接起来 - 请查看https://dev59.com/oL7pa4cB1Zd3GeqP9PHN#74358255。 - Parth Kapadia

是的。谷歌实现了一个身份验证API（https://developer.chrome.com/docs/extensions/reference/identity/），它允许您处理来自已登录浏览器的用户的身份验证。 - César Rodriguez

Answer 3

我假设你的问题是获取有效的 API 密钥（因为对我来说这是棘手的部分）。如果你有其他问题，只需在下面留言，我会给出更详细的示例。

我使用了身份验证 API 在这里记录。通过它，您可以从浏览器中已登录的用户获取身份数据，包括令牌。我所需要做的就是：

//manifest.json
//...
"permissions": [
    "identity",
    //...
],
//...
"key": "__Really_long_gibberish_token_string__",

"oauth2": {
    "client_id": "__some_token_string__.apps.googleusercontent.com",
    "scopes": [ "https://www.googleapis.com/auth/spreadsheets.readonly" ]
}

所有内容都与Google项目相关联，因此有关密钥和clientId生成的详细信息可以在这里找到。 并创建了一个函数来检索令牌：

// This function is inside a component which ends up bundled in my worker.js; I didn't tried it in content scripts, nor popups.
async function fetchGoogleToken() {
    const tokenObj = await chrome.identity.getAuthToken({interactive: true})
    return tokenObj.token
}

interactive: true选项非常棒。如果用户没有在浏览器中登录，它将为您显示一个登录表单和授权确认窗口。

这是我发送给API的令牌。

- César Rodriguez