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

続いて、APIキーを使った拡張機能を作成します。OAuth認証を行わない分、より単純な構造となります。

基本動作

OAuth認証版と同じです。

ディレクトリ構造

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

OAuth認証を行わないので、background.jsが不要となりました。

manifest.json

{
  "manifest_version": 2,
  "name": "URL Shortener (API Key)",
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

OAuth関連で必要だったオプションが不要となり、短くなりました。

Popup

popup.html

OAuth認証版と同じです。

popup.js

アクセストークンを取得する処理が不要なので、1工程少なくなります。

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

// (2) URL Shortener APIでURLを短縮
const getShortenedURL = currentURL => {
  return new Promise(resolve => {
    const key = '取得したAPIキーを記入'
    fetch('https://www.googleapis.com/urlshortener/v1/url?key=' + key, {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        longUrl: currentURL
      })
    }).then(response => {
      return response.json()
    }).then(json => {
      resolve(json.id)
    })
  })
}

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

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

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

APIキーは、fetchでAPIを叩く際のURLに含めています。

動作確認

拡張機能をデベロッパー モードでインストールし、任意のWebページ上でアイコンをクリックすると、同様に短縮URLが表示されます。

Googleのスクリーンショット。短縮URL表示欄が赤で囲われている

拡張機能を実行すると、短縮URLが表示された。

Google URL Shortenerのダッシュボードを見ても、短縮したURLは表示されていません。

Google URL Shortenerのダッシュボードのスクリーンショット

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

APIキーを使ってURLを短縮する場合は、このような結果となります。

参考ページ

manifest.json

メッセージ

OAuth認証

URL Shortener API