tande lab.

[Chrome] Extensionつくり方 その2 – Browser Action

[Chrome] Extensionつくり方 その1 – 基本機能の理解 の続きです。
“MyFirstChromeExtension” ていう Extension を作る想定で説明します。

この記事 では Browser Action で拡張機能を作る場合についてです。
https://lh4.googleusercontent.com/-yahQRzSy7Uc/T_hckbPOEwI/AAAAAAABFb8/l6pxmqYPgoU/s800/120708-0011-2.png
ツールバーに表示されるアイコン(19*19)と連動した機能を設定します。
このアイコンは Chrome 利用中は常時表示されているものになります。

アイコン押したらポップアップを表示する

"MyFirstChromeExtension" という作業フォルダ内に

  • icon19.png
  • manifest.json
  • popup.html

を用意します。

こんな感じ。
https://lh5.googleusercontent.com/-zF3fZs164Ho/UAWIyRkisjI/AAAAAAABGHE/FNdQyL9ozZ8/s800/120718-0006.png

{
    "name": "MyFirstChromeExtension",
    "description": "はじめてのChromeExtension!",
    "version": "0.1",
    "browser_action": {
        "default_icon": "icon19.png",
        "default_title": "MyFirstChromeExtension",
        "default_popup": "popup.html"
    }
}

popup.html を、8行目のハイライト部分で読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"></head>
<body style="min-width:250px">
    <ul>
        <li><a href="http://tande.jp/lab/" target="_blank">tande lab.</a></li>
        <li><a href="http://google.com/" target="_blank">Google</a></li>
    </ul>
</body>
</html>

ポップアップ内容は HTML で自由に記述します。

この状態で、Extension の動作確認をします。
動作確認の仕方は 前記事 – [Chrome] Extensionつくり方 その1 – 基本機能の理解 を参照。

すると、こんな感じでポップアップする Extension の完成。
アイコンは適当です。
https://lh6.googleusercontent.com/-JvhzxrkJv2Y/UAWF61D9hUI/AAAAAAABGGs/KHcRifTeJEo/s800/120718-0002.png

リンクをクリックすると、該当のサイトにちゃんと飛びます。

アイコンにバッヂテキストを付ける

"MyFirstChromeExtension" という作業フォルダ内に

  • background.js
  • icon19.png
  • manifest.json

を用意します。

こんな感じ。
https://lh5.googleusercontent.com/-C1CG6TqfOtY/UAWInwIE_4I/AAAAAAABGG8/Mz-mRJ8o4Bs/s800/120718-0005.png

{
    "name": "My First Browser Action",
    "description": "はじめてのChromeExtension!",
    "version": "0.1",
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_icon": "icon19.png",
        "default_title": "MyFirstChromeExtension"
    }
}

ハイライトした部分で、JavaScript ファイル “background.js” を読み込みます。

chrome.browserAction.setBadgeText({text:"100"});

バッヂに表示したいテキストをこんな感じで設定します。

すると、こんな感じでバッヂを表示できます。
https://lh6.googleusercontent.com/-s2B0Wj4tAmU/UAWKvXf_e8I/AAAAAAABGHQ/snyBl3kqQUI/s800/120718-0007.png

バッヂについてのリファレンスは下記で参照できます。
Browser Actions #Badge – Google Chrome Extensions – Google Code

ポップアップもバッヂも両方付けたいってときは
両方のいいとこ取りをして、popup.html も background.js も両方読み込めばOKです。