Chrome拡張機能でGoogle URL Shortener APIを利用する方法

前のページで取得したClient IDを使って、拡張機能を作成していきます。

基本動作

  1. 拡張機能のアイコンをクリックで実行
  2. アクティブタブのURLを短縮
  3. Popupに短縮されたURLを表示する
  4. クリップボードにコピーするボタンを設置

ディレクトリ構造

extension
 │ manifest.json
 │ popup.html
 └ js
   │ background.js
   └ popup.js

manifest.json

{
  "manifest_version": 2,
  "name": "URL Shortener (OAuth)",
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["js/background.js"],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "identity",
    "https://www.googleapis.com/"
  ],
  "oauth2": {
    "client_id": "xxxxxxxxxxxx.apps.googleusercontent.com",
    "scopes": ["https://www.googleapis.com/auth/urlshortener"]
  }
}

各項目の簡単な説明

manifest_version
name
version
ここまでは必須項目です。
browser_action
Popupを使いたいので、ここで.htmlを指定します。
background
アクセストークンの取得をBackground Scriptsで行います。
permissions
今回はPopupからアクティブタブのURLを取得するので、tabsを指定。OAuth認証に必要なidentityとGoogleのURLも、併せて指定します。
oauth2
client_idはGoogle Developer Consoleで発行したClient IDです。scopesは利用するAPIの種類と権限を指定するもので、認証時の同意画面に表示されます。複数の中から選択して指定するAPIもありますが、URL Shortener APIは最初から1種類だけなので、選ぶ必要はありません。

Background Scripts

OAuth認証を行うスクリプトを作成します。

background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'access_token') {
    chrome.identity.getAuthToken({}, token => {
      sendResponse(token)
    })
    return true
  }
})

Popupからメッセージを受け取って認証を行い、取得したアクセストークンをPopupに返す、という形で処理を行います。

Popup

Popupで使用するHTMLとスクリプトを作成します。

popup.html

<!DOCTYPE html>
<title>URL Shortener</title>
<input id="shortenedURL" placeholder="Shortening URL...">
<button id="copyButton">Copy</button>
<script src="./js/popup.js"></script>

popup.js

// (1) アクセストークンの取得
const getAccessToken = () => {
  return new Promise(resolve => {
    chrome.runtime.sendMessage({
      type: 'access_token'
    }, accessToken => {
      resolve(accessToken)
    })
  })
}

// (2) 現在のURLを取得
const getCurrentURL = accessToken => {
  return new Promise(resolve => {
    chrome.tabs.query({
      currentWindow: true,
      active: true
    }, tabs => {
      resolve({
        accessToken: accessToken,
        currentURL: tabs[0].url
      })
    })
  })
}

// (3) URL Shortener APIでURLを短縮
const getShortenedURL = result => {
  return new Promise(resolve => {
    fetch('https://www.googleapis.com/urlshortener/v1/url', {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + result.accessToken
      },
      body: JSON.stringify({
        longUrl: result.currentURL
      })
    }).then(response => {
      return response.json()
    }).then(json => {
      resolve(json.id)
    })
  })
}

// (4) 短縮されたURLをpopupに表示
const displayShortenedURL = shortenedURL => {
  document.querySelector('#shortenedURL').value = shortenedURL
}

// (1)~(4)の処理を連結
Promise.resolve()
  .then(getAccessToken)
  .then(getCurrentURL)
  .then(getShortenedURL)
  .then(displayShortenedURL)

// コピーボタンのイベントリスナ
document.querySelector('#copyButton').addEventListener('click', () => {
  document.querySelector('#shortenedURL').select()
  document.execCommand('copy')
})

fetchもそうですが、Chrome APIも原則として非同期処理なので、Promiseを使って処理を繋いでいきます。関数に分けて最後にthen()で連結すると、全体の処理の流れがわかりやすいと思います。

動作確認

ソースコードの作成が終わったら、Chromeに戻って拡張機能をリロードします。

拡張機能管理画面のスクリーンショット。「URL Shortener (OAuth)」の「リロード」が赤丸で囲われている

「リロード」を押し、拡張機能をリロードする。

任意のWebページに移動し、拡張機能のアイコンをクリックすると、初回は同意画面が開くので、URL短縮に使用するアカウントを選択します。もしChromeからログアウトしていた場合は、先にログイン画面が表示されるので、ログインしておきます。

何らかの原因で拡張機能のIDが変更され、Client IDの対象IDと一致しなくなった場合、ログインしても再びログイン画面が表示され、さらにタブを閉じたり他のタブに移動したりできなくなる現象が起こります。この場合は拡張機能のIDを再確認し、Google Developer ConsoleでClient IDの設定を変更する必要があります。
アカウント選択画面のスクリーンショット。選択するアカウントが赤丸で囲われている

URL短縮に使用する自身のアカウントを選択する。

アカウントを選択すると、Google Developer Consoleで設定した同意画面が表示されます。

同意画面のスクリーンショット。「許可」ボタンが赤丸で囲われている

「許可」ボタンを押す。

認証完了後、再びWebページ上で拡張機能のアイコンをクリックすると、短縮URLが表示されます。

Chromeのスクリーンショット。拡張機能のアイコンに(1)が、PopupのURL表示欄に(2)が記されている

(1) 拡張機能のアイコンをクリックする。
(2) 短縮URLが表示されたことを確認する。

短縮したURLは、Google URL Shortenerのダッシュボードに表示されます。

Google URL Shorenerダッシュボードのスクリーンショット。短縮したURLが赤で囲われている

短縮したURLがダッシュボードに表示されている。

動作を確認することができました。