我可以使用Google drive进行chrome扩展吗(不是App)

Question

我有一个chrome扩展（不是App），它是来自免费第三方的数据的混搭。我没有为我的扩展维护服务器。

我可以使用Google drive通过用户帐户保存用户数据，以便在不同的计算机上共享吗？

Answer 1

Nick Park的答案是正确的，但是我已经了解了简单地设置项目并不像听起来那么简单的痛苦方式。如果你按照Chromedoc的教程，你可能会在第一步就被种脸。

因此，这里有一个概述，介绍了如何设置项目，并进行了一些修改以使其工作。

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

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

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

如果您转到扩展程序的Chrome网络商店URL，例如https://chrome.google.com/webstore/detail/abcdefghjik，您将看到404未找到错误。不要担心。您尚未发布您的应用程序，因此该URL当然不存在。但您仍然可以使用应用程序ID向Google OAuth注册未发布的扩展程序。

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

请注意，这一年是2020年，您不能再像古代医生所说的那样将范围字段留空。

您需要添加上述范围，因为您的应用会要求用户选择其中一个 Gmail 帐户。这意味着你的应用将能够查看用户的电子邮件地址，我们需要提前了解这一点。

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

Answer 2

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

首先，您需要:

1. 按照官方 Google 云端硬盘 API 文档中概述的步骤创建“云平台项目”并启用“云端硬盘 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了！

有关使用谷歌API的文档可以在这里找到（这不是特定于谷歌云端硬盘的）：

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

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

注意:与上述文档中使用的方法相比，chrome extensions中用户认证的处理方式会有所不同。参考下面的例子，了解Chrome身份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

是的，你可以！查看另一个StackOverflow答案，它解释了如何使用google api javascript客户端库将数据发送到google Drive api。

您可能还对这篇解释如何将Web意图和Google Drive API混合在一起的博客文章感兴趣。