在 background.js 中的 Chrome 扩展中的 Google Oauth2

Question

我正在构建一个供我个人使用的 Chrome 扩展程序（即它不会被打包和分发），以将数据从网站转储到 Google 表格中。我想点击扩展并让它处理数据到我的工作表。我相信这意味着我需要在 background.js 中执行 Oauth 流程。

我通过自定义此Google Sheets demo 完成了初始授权流程，但不知道如何使其在我的扩展程序中工作。

我尝试了多种方法，包括使用chrome.identity API 和gapi.client.init()，以及遵循Chrome App sample。没有骰子。

我的一些问题...提前致谢：

• Chrome 扩展程序在多大程度上镜像 Chrome 应用程序？我了解 Chrome 应用程序已被弃用，因此想知道文档是否不一致。
• 是否可以在不打包和上传我的应用程序的情况下执行此操作？控制台中的 Oauth 凭据页面要求提供网上商店 URL
• 是否可以在我的扩展程序中存储 Google 的 api.js 的副本，还是必须从 https://apis.google.com/js/client.js 加载它？如果是这样，
• 对于 Chrome 应用程序示例，我在哪里可以获得包含在 manifest.json 中的 key？我已经看到诸如“将已安装 manifest.json 中的密钥复制到源清单”之类的说明，但我不明白。
• 有人知道完整的、独立的 Chrome 扩展示例吗？

Answer 1

Chrome 扩展程序在多大程度上反映了 Chrome 应用程序？我了解 Chrome 应用程序已被弃用，因此想知道文档是否不一致。

扩展程序和应用程序在许多方面都相似，但是对于您的情况，要克服的主要障碍是两者处理 Google 身份验证的方式不同。扩展有权限限制，javascript 不能在某些地方运行。因此，Chrome 扩展使用 background.js 中的 chrome.identity 来建立安全连接和令牌。实现的一般流程如下：

1. 制作一个 Chrome 扩展程序，压缩它，上传到您的 Google Dev 帐户并获取 extensionID#
2. 在 Google API 控制台中，使用 extensionID# 注册 OAuth ClientID#
3. 更新您的 Chrome 扩展清单以包含一个带有 OAuth ClientID# 的“oauth2”部分以及您允许的范围，并在“权限：”下包含“身份”
4. 在 Google API 控制台中启用您选择的 API 并生成密钥。将此密钥包含在您的 background.js 文件中，以便您可以使用 API。

是否可以在不打包和上传我的应用的情况下执行此操作？控制台中的 Oauth 凭据页面要求提供网上商店 URL

不，主要是因为您需要 chrome 扩展程序和 API 相互了解并在某种意义上“链接”，这样它们才能安全并正常工作。但是，您仍然可以拥有一个私有应用程序，因为您只需要打包（.zip）并将其上传到您的开发人员仪表板，您可以通过简单地不发布将其排除在公共 Chrome 商店之外。它可以永远停留在“草稿”阶段供您个人使用。

是否可以在我的扩展程序中存储 Google 的 api.js 的副本，或者我必须从 https://apis.google.com/js/client.js 加载它？如果是这样的话， 对于 Chrome 应用示例，我从何处获取 manifest.json 中包含的密钥？我看过类似“将已安装 manifest.json 中的密钥复制到源清单”之类的说明，但我不明白。

您不需要在扩展中存储副本，您可以将以下内容添加到您的 manifest.json：

"content_security_policy": "script-src 'self' https://apis.google.com/; object-src 'self'"

然后在 popup.html 的底部：

 <script src="https://apis.google.com/js/client.js?onload=onGAPILoad"></script>

没有向导，这是一个相当混乱的过程； here is the one 终于让我明白了这一切。这个official example from Google 也不错。

有人知道一个完整的、独立的 Chrome 扩展示例吗？

'self-contained' 在这里有点棘手，因为清单需要引用特定于 OAuth ClientID 和您正在使用的 API 的密钥，但是 this（下载链接）以及上面的两个链接就足够了让您获得有效的扩展。