Chromeの拡張機能では各種APIを利用する際、OAuth認証を使用することができます。GoogleのURL Shortener APIを使って、表示中のWebページの短縮URLを取得する拡張機能を作ってみました。
Contents
Googleアカウントを取得
GoogleのAPIを利用するためには、Googleアカウントが必要です。使用可能なアカウントを持っていない場合は、Google アカウントの作成からアカウントを取得しておきます。
Google Developer Consoleにログイン
Googleアカウントを使って、Google Developer Consoleにログインします。
プロジェクトの作成
作成する拡張機能のためのプロジェクトを作成します。
プロジェクト作成画面に進み、任意のプロジェクト名を付けてプロジェクトを作成します。
APIの有効化
次に、利用するAPIの有効化を行います。今回は「URL Shortener API」を利用します。
検索欄からAPI名で検索するか、カテゴリからAPIを探します。URL Shortener APIは「その他」カテゴリにあります。
APIを選択肢、APIの詳細ページが開いたら、ボタンを押して有効化を実行します。
ダッシュボードに戻り、有効化されたAPIの一覧に「URL Shortener API」が追加されていることを確認します。
これで、APIを有効化することができました。
認証情報を作成
続いて、APIを利用するための認証情報(APIキーやClient ID)を作成します。
利用するAPIやその機能によって、どちらの認証情報が必要となるかは異なりますが、URL Shortener APIでURLを短縮する場合は、APIキーとClient IDのどちらでもOKです。
ただし、APIキーを利用した場合は、ユーザーと短縮URLの関連付けが行われないため、Google URL Shortenerのダッシュボードに短縮したURLが掲載されません。Client IDを使ってOAuth認証を行った場合は、ダッシュボードに短縮したURLが表示され、クリック数などを確認することができます。
APIキーの発行
ダッシュボードから認証情報の画面に移動し、APIキーを作成します。
その場でAPIキーが発行されます。認証情報のページでいつでも確認できるので、メモを取っておく必要はありません。
APIキーを使った拡張機能は、この記事の3ページ目で作成します。
Client IDの発行
OAuth同意画面の設定
最初に、OAuth同意画面の設定を行います。
拡張機能のIDを確認
Client IDの発行に必要な、拡張機能のIDを確認します。
拡張機能を仮でChromeにインストールする必要があるため、デスクトップなどに任意の名前のフォルダ(ここでは「extension」フォルダとします)を作成し、その中にmanifest.jsonを作成します。
{
"manifest_version": 2,
"name": "URL Shortener",
"version": "0.0.1"
}
manifest.jsonには、とりあえず必須項目だけ入れておきます。
次に、アドレスバーに「chrome://extensions」と入力するか、メニューの「その他のツール」「拡張機能」を選択して拡張機能のウィンドウを開き、「デベロッパー モード」にチェックを入れ、作成したフォルダをドラッグ&ドロップして、拡張機能をインストールします。

(1) アドレスバーに「chrome://extensions」と入力するなどして、拡張機能の画面に移動する。
(2) 「デベロッパー モード」にチェックを入れておく。
(3) 作成した拡張機能のフォルダをドラッグ&ドロップしてインストールする。
(4) インストールした拡張機能のIDを確認する。
ここで表示されたIDを、Client IDの発行に使用します。
Client IDの発行
Google Developer Consoleへ戻り、Client IDを発行します。
1つ前の手順で確認した拡張機能のIDは、ここで使用します。
Client IDが発行されます。
次のページでは、OAuth認証でAPIを利用する拡張機能を作成します。