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を使う
今回はずいぶんシンプルです。
もっと前のほうで紹介すればよかったかな。
{ "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"});
第4回で説明した通信とかを組み合わせてcontent.jsからデータを取ったり、
background側でAPIとか使ってデータを取ったりしてコールバックで表示させるというのが一般的でしょうか。
chrome.alarmsのAPIを使ってタイマーとかを設定するのもありかと。
ちなみにchrome拡張ではsetTimeoutとかsetIntervalとかは使えないので注意。
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