ChromeExtensionの作り方第８回はバッジを設定してみましょう。
バッジとはアイコンの右下に出ている数値のことです。
スマホとかFacebookで見たことあると思われるアレ。

Chrome Extensionの作り方講座その１・用語とか
Chrome Extensionの作り方講座その２・BrowserActionを使ってみる
Chrome Extensionの作り方講座その３・ContentScriptを使ってみる
Chrome Extensionの作り方講座その４・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その５・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その６・omniboxを使う
Chrome Extensionの作り方講座その７・bookmark APIを使う

今回はずいぶんシンプルです。
もっと前のほうで紹介すればよかったかな。

{
  "manifest_version": 2,

  "name": "testBadge",
  "description": "",
  "version": "1.0",

	"browser_action": {
		"default_icon": "icon.png"
	},
    "background": {
        "scripts": ["background.js"],
        "persistent" : false
    }
}

そして、background.js側でchrome.browserAction.setBadgeTextというものを使うだけです。
数字を出したい時でも文字列型にする必要があります。
また、4文字くらいまでしか表示されません。
ちなみにgetBadgeTextで取得をしたりすることもでき、
setBadgeBackgroundColorというAPIを使えば背景色も変えられます。

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

第４回で説明した通信とかを組み合わせてcontent.jsからデータを取ったり、
background側でAPIとか使ってデータを取ったりしてコールバックで表示させるというのが一般的でしょうか。
chrome.alarmsのAPIを使ってタイマーとかを設定するのもありかと。
ちなみにchrome拡張ではsetTimeoutとかsetIntervalとかは使えないので注意。

Chrome Extensionの作り方講座その１・用語とか
Chrome Extensionの作り方講座その２・BrowserActionを使ってみる
Chrome Extensionの作り方講座その３・ContentScriptを使ってみる
Chrome Extensionの作り方講座その４・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その５・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その６・omniboxを使う
Chrome Extensionの作り方講座その７・bookmark APIを使う
developer.chrome.com/extensions

Tweet

Pocket