Javascript 我可以使用Google drive进行chrome扩展吗（不是应用程序）

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

---

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

可以！查看另一个，它解释了如何使用GoogleAPI javascript客户端库将数据发送到GoogleDriveAPI

---

您可能还对解释如何将Web意图和Google Drive 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'}));
});

按照官方文件中概述的步骤创建“云平台项目”并启用“驱动API”

按照官方文件中概述的步骤获取扩展的“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特有的）：

可以找到GoogleDriveAPI的参考资料和示例

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

获取文件内容：

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'}));
});

覆盖现有文件内容：

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.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'}));
});

---

尼克·帕克的回答是正确的，但我从痛苦的经历中学到，简单地设置项目并不像听起来那么简单。如果你在Chrome文档中遵循这一点，你可能会在第一步就被植入面部

因此，这里有一个关于设置您的项目的概述，以及一些使其工作的修改

上载到开发人员仪表板

将项目文件压缩为zip文件

转到以创建新项目

上载zip文件，填写必填字段并返回到仪表板

这是诀窍： 在我撰写本文时，开发人员仪表板将始终默认为新界面，而新界面并不附带需要包含在项目中的公钥

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

在legacy dashboard视图中，找到您的扩展并单击more info（更多信息）。

复制公钥并将其作为值粘贴到解压目录中清单文件的

key

字段中

加载未打包的扩展插件

导航到

chrome://extensions

，启用开发人员模式并上载解压缩的目录。您应该看到此页面上的应用程序id与开发人员仪表板上的应用程序id匹配

创建OAuth客户端ID

转到并为扩展创建新项目

导航到新创建的项目，然后单击左侧栏上的凭据

单击创建客户机ID，然后选择OAuth客户端ID

在下一个屏幕上，选择应用程序类型下的Chrome App，然后输入您的应用程序id

如果您转到扩展的Chrome webstore URL，例如

https://chrome.google.com/webstore/detail/abcdefghjik

，您将看到404未找到错误。别担心。你还没有发布你的应用程序，所以这个URL当然不存在。但您仍然可以使用应用程序id向Google OAuth注册未发布的扩展

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

在清单文件中注册OAuth

在工作目录的清单文件中，包括

oauth2

字段并添加以下信息：

“oauth2”：{
“客户id”：，
“范围”：[“https://www.googleapis.com/auth/userinfo.email"]
}

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

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

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