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

Question

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

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

Answer 1

是的，你可以！查看其他StackOverflow answer，其中介绍了如何使用google-api-javascript-client库将数据发送到Google Drive API。

您可能还对此blog post感兴趣，解释如何混搭Web Intents和Google Drive API。

Answer 2

是的，这是一个简短指南：）

---

设置项目

首先，您需要：

1. 按照官方Google Drive API docs中概述的步骤创建一个“ Cloud Platform项目” 并启用“ Drive API” 。
2. 按照官方Chrome Extension developer docs中概述的步骤获取扩展的“ 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云端硬盘API！

---

文档

可以在此处找到使用Google API的文档（并非特定于Google云端硬盘）：

1. How to make API requests using the JavaScript Client Library
2. How to use CORS to access Google APIs

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

注意：与上述文档中使用的方法相比，在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))
    });
});

---

进一步阅读：

Cross-Origin XMLHttpRequest in Chrome Extensions

OAuth 2.0 for JavaScript Web Apps

Answer 3

尼克·帕克（Nick Park）的回答是正确的，但是我已经学会了痛苦的方式，即简单地设置项目并不像听起来那样简单。如果您从Chrome文档中遵循此tutorial，则第一步可能会面面俱到。

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

上传到开发人员仪表板

1. 将您的项目文件压缩为zip文件
2. 转到Developer Dashboard创建一个新项目。
3. 上传zip文件，填写必填字段，然后返回到仪表板。
4. 这就是窍门： 在撰写本文时，“开发人员信息中心”将始终默认为新界面，该界面没有您需要包含在项目中的公钥。

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

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

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

加载解压后的扩展程序

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

创建OAuth客户端ID

1. 转到Google Api Console并为您的扩展名创建一个新项目。
2. 导航到新创建的项目，然后单击左侧栏中的凭据。
3. 点击创建凭据，然后选择 OAuth客户端ID 。
4. 在下一个屏幕上，选择应用程序类型下的 Chrome应用程序，然后输入您的应用程序ID。

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

1. 准备就绪后，点击“保存”按钮，您应该会看到您应用的客户端ID。单击左侧边栏的“凭据”选项卡可以随时访问它。

在清单文件中注册OAuth

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

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

请注意，年份是2020年，您不能再像古代文档所述将Scopes字段留空。

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

这些都是棘手的，耗时的。现在，您可以按照本教程的其余部分，以及尼克·帕克（Nick Park）对想要的任何Google API发出HTTP请求的回答。