Chrome Extensionの作り方講座その8・バッジを設定する

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

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う



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

[javascript]
{
"manifest_version": 2,

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

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

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

[javascript]
chrome.browserAction.setBadgeText({text:"100"});
[/javascript]

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


[ogatismBooks]

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う
developer.chrome.com/extensions

Author Info(オガティ

エンジニアとして勤め、インフラ周りの開発を経た後Web業界へ異動。
プライベートでもブログ「ogatism」の運営や電子書籍の執筆、占星術師としての活動など幅広い分野で活動中。
詳細はこちら

占い鑑定レポート作成サービス受付中

◆ ogatismをFeedlyに登録 ◆
follow us in feedly