Chrome ExtensionsでOAuth2 Authorization

OAuth2 AuthorizationにはExtensionのKeyが必要です。Keyを入手するには、

まず、ベーシックなChrome Extensionを作成し、chrome://extensions/ページのPack Extensionでパックします。

crxファイルとpemファイルが作成されるので、chrome://extensions/ページ内にcrxファイルをドラッグするとExtensionがインストールされます。

macOSの場合は、/Users/{username}/Library/Application Support/Google/Chrome/Default/ExtensionsにIDと同じ名前のフォルダーが作成されています。その中のmanifest.jsonにあるkeyをコピーし、開発中のExtensionのmanifest.jsonにコピーペーストします。

“permissions”に”identity”と”identity,email”を追加します。

// manifest.json
{
    "manifest_version" : 3,
    "name" : "Save The Word",
    "version" : "1.0",
    "description" : "A word saving app",

    "background" : {
        "service_worker" : "scripts/background.js"
    },

    "permissions" : [
        "contextMenus",
        "identity",
        "identity.email"
    ],

    "icons" : {
        "16" : "images/book_16.png",
        "32" : "images/book_32.png",
        "48" : "images/book_48.png",
        "128" : "images/book_128.png"
    },

    "key": "YOUR_VERY_LONG_KEY_HERE",

    "content_scripts" : [
        {
            "js" : ["scripts/content.js"],
            "run_at" : "document_idle",
            "matches" : [
                "<all_urls>"
            ]
        }
    ]
}

次に、インストールされたExtensionを削除し、Load Unpackedから開発中のExtensionを開くことで、Extensionの開発を続けることができます。

background.js内に以下を記述し、service_workerのコンソールにidentity Objectがプリントすることで、上手く働いているかを確認出来ます。

console.log(chrome.identity);

次にhttps://console.cloud.google.com/でプロジェクトを作成し、

APIs & ServicesのOAuth consent screenでExternalを選択し、Createします。

次に、CredentialsのCREATE CREDENTIALSからOAuth Client IDを選択し、

Chrome appを選択、Client名とExtension IDを入力します。

次に、LibraryからGoogle People APIをEnableします。

CREATE CREDENTIALSでAPI Keyを選択します。

manifest.jsonに以下を追記します。

// manifest.json

"oauth2" : {
    "client_id" : "YOUR_CLIENT_ID",
    "scopes" : [
        "profile email",
        "https://www.googleapis.com/auth/contacts"
    ]
},

background.jsに以下を追記すると、tokenがプリントされます。

chrome.identity.getAuthToken({ interactive: true }, (token) => {
  console.log("got token: ", token);
});

このtokenを使ってspreadsheets apiでsheetを作成するには、

chrome.identity.getAuthToken({ interactive: true }, (token) => {
  createSheet(token);
});

function createSheet(token) {
  const data = {
    // requires "properties" to be the most outer key
    "properties" : {
      "title" : "Test Sheet"
    }
  }
  fetch("https://sheets.googleapis.com/v4/spreadsheets", {
    method: "POST",
    headers: {
      "Content-Type" : "application/json",
      "Authorization" : `Bearer ${token}`
    },
    body: JSON.stringify(data)
  }).then((document) => {
    console.log(document.json());
  });
}

Google Drive APIの実装はこのPostをご参照ください。