我可以使用Google驱动器进行Chrome扩展(不是应用)

Question

我有一个chrome扩展(不是App),它是来自免费第三方的数据混搭.我不为我的扩展程序维护服务器.

我可以使用Google驱动器使用用户帐户保存用户数据,因此可以由不同的计算机共享吗？

Answer 1

是的你可以!查看此其他StackOverflow答案,该答案解释了如何使用google-api-javascript-client库将数据发送到Google Drive API.

您可能还对此博客文章感兴趣,该博客文章解释了如何混搭Web Intents和Google Drive API.

Answer 2

是的，这是一个简短的指南:)

设置您的项目

首先，您需要：

1. 按照官方Google Drive API 文档中概述的步骤创建“云平台项目”并启用“Drive API”。
2. 按照官方Chrome 扩展程序开发人员文档中概述的步骤为您的扩展程序获取“OAuth2 客户端 ID”并设置您的 manifest.json。

您的 manifest.json 现在应该有一些额外的字段，如下所示：

// manifest.json

"permissions": [
    "identity",
    "https://www.googleapis.com/*"
],

"oauth2": {
    "client_id": "YOUR_CLIENT_ID",
    "scopes": [
        "https://www.googleapis.com/auth/drive.appdata",
        "https://www.googleapis.com/auth/drive.file"
    ]
},

"key": "YOUR_APPLICATION_KEY",

您现在可以使用 Google Drive API 了！

文档

可以在此处找到使用 Google API 的文档（这不是特定于 Google Drive）：

1. 如何使用 JavaScript 客户端库发出 API 请求
2. 如何使用 CORS 访问 Google API

可以在此处找到 Google Drive API 的参考，并在此处找到示例。

注意：与上述文档中使用的方法相比，chrome 扩展中的用户身份验证处理方式可能有所不同。请参阅以下示例，了解如何使用 Chrome Identity API 进行身份验证。

例子

要创建文件：

chrome.identity.getAuthToken({interactive: true}, token => {
    var metadata = {
        name: 'foo-bar.json',
        mimeType: 'application/json',
        parents: ['appDataFolder'],
    };
    var fileContent = {
        foo: 'bar'
    };
    var file = new Blob([JSON.stringify(fileContent)], {type: 'application/json'});
    var form = new FormData();
    form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
    form.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart');
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.responseType = 'json';
    xhr.onload = () => {
        var fileId = xhr.response.id;
        /* Do something with xhr.response */
    };
    xhr.send(form);
});

获取文件内容：

chrome.identity.getAuthToken({interactive: true}, token => {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.googleapis.com/drive/v3/files/YOUR_FILE_ID?alt=media');
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.responseType = 'json';
    xhr.onload = () => {
        /* Do something with xhr.response */
    };
    xhr.send();
});

覆盖现有文件内容：

chrome.identity.getAuthToken({interactive: true}, token => {
    var xhr = new XMLHttpRequest();
    xhr.open('PATCH', 'https://www.googleapis.com/upload/drive/v3/files/YOUR_FILE_ID?uploadType=media&access_token=' + token);
    xhr.responseType = 'json';
    xhr.onload = () => {
        /* Do something with xhr.response */
    };
    xhr.send(JSON.stringify({foo: 'bar'}));
});

注意：以上示例均使用 CORS，但您也可以使用 javascript 客户端库。

例如，要使用库获取文件内容：

gapi.client.init({
    apiKey: 'YOUR_API_KEY',
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
}).then(() => {
    chrome.identity.getAuthToken({interactive: true}, token => {
        gapi.auth.setToken({
            'access_token': token,
        });

        gapi.client.drive.files.get({
            'fileId': 'YOUR_FILE_ID',
            'alt': 'media'
        }).then(res => console.log(res))
    });
});

进一步阅读：

Chrome 扩展中的跨域 XMLHttpRequest

用于 JavaScript Web 应用程序的 OAuth 2.0

Answer 3

尼克·帕克的答案是正确的，但我已经痛苦地认识到，简单地设置项目并不像听起来那么简单。如果您按照 Chrome 文档中的本教程进行操作，那么您可能会在第一步就陷入困境。

因此，这里是对项目设置的回顾，并进行了一些修改以使其正常工作。

上传至开发者仪表板

1. 将项目文件压缩为 zip 文件
2. 转到开发人员仪表板以创建新项目。
3. 上传 zip 文件，填写必填字段并返回仪表板。
4. 技巧如下：在我撰写本文时，开发人员仪表板将始终默认为新界面，该界面不附带您需要包含到项目中的公钥。

展开右下角的“欢迎”弹出窗口，然后单击选择退出以恢复到旧视图。

5. 在旧版仪表板视图中，找到您的扩展程序并单击更多信息。

6. 复制公钥并将其作为值粘贴到key解压缩目录中清单文件的字段中

加载解压后的扩展

7. 导航至chrome://extensions，启用开发者模式并上传解压的目录。您应该看到此页面上的应用程序 ID 与开发人员仪表板上的应用程序 ID 相匹配。

创建 OAuth 客户端 ID

8. 转到Google Api Console并为您的扩展创建一个新项目。
9. 导航到新创建的项目，然后单击左侧边栏上的Credentials 。
10. 单击创建凭据并选择OAuth 客户端 ID。
11. 在下一个屏幕上，在“应用程序类型”下选择“Chrome 应用程序”，然后输入您的应用程序 ID。

如果您访问扩展程序的 Chrome 网上应用店 URL（例如 ）https://chrome.google.com/webstore/detail/abcdefghjik，您将看到404 Not Found错误。别担心。您还没有发布您的应用程序，因此该 URL 当然不会存在。但您仍然可以使用应用程序 ID 向 Google OAuth 注册您未发布的扩展程序。

12. 准备好后，点击“保存”按钮，您应该会看到应用程序的客户端 ID。您可以随时通过单击左侧边栏上的“凭据”选项卡来访问它。

在清单文件中注册 OAuth

13. 在工作目录的清单文件中，包含oauth2字段并添加以下信息：

"oauth2": {
  "client_id": <your client id>,
  "scopes": ["https://www.googleapis.com/auth/userinfo.email"]
}

请注意，今年是 2020 年，您不能再按照古代文档的说法将“范围”字段留空。

您需要添加上述范围，因为您的应用程序将请求用户选择他们的 Gmail 帐户之一。这意味着您的应用程序将能够查看用户的电子邮件地址，我们需要提前告知这一点。

这就是棘手且耗时的部分。现在您可以按照本教程的其余部分以及 Nick Park 关于向您想要的任何 Google API 发出 HTTP 请求的答案进行操作。