23

無料のサードパーティからのデータのマッシュアップです。拡張機能用のサーバーを維持していません。

Google ドライブを使用して、ユーザー アカウントを使用してユーザーのデータを保存し、異なるコンピューターで共有できるようにすることはできますか?

4

3 に答える 3

21

はい、できます!google-api-javascript-client ライブラリを使用してデータを Google ドライブ API に送信する方法を説明している、この他のStackOverflow の回答を確認してください。

Web Intents と Google Drive API をマッシュアップする方法を説明しているこのブログ投稿にも興味があるかもしれません。

于 2012-08-08T23:46:35.220 に答える
8

はい、ここに短いガイドがあります:)


プロジェクトの設定

まず、次のことを行う必要があります。

  1. Google Drive APIの公式ドキュメントに記載されている手順に従って、「Cloud Platform プロジェクト」を作成し、 「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 ドライブに固有のものではありません)。

  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 ウェブアプリ向け OAuth 2.0

于 2020-04-06T16:01:52.260 に答える