【Chrome拡張機能】拡張機能のアイコンにバッジを付ける方法

こんにちは、soraです。

この記事では、

・Chrome拡張機能のアイコンにバッジを付ける方法
・バッジを動的に変化させるには

となっています。

Chrome拡張機能のアイコンにバッジを付ける方法
1. manifest.json
2. background.js
バッジを動的に変化させる
一定間隔でバッジを変化させる

Chrome拡張機能のアイコンにバッジを付ける方法

manifest.json

{   "name": "名前",
  "version": "1.0",
  "manifest_version": 2,
  "description": "説明",
  "browser_action" : {
    "default_title": "タイトル"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

background.js

バッジを表記する処理は次の一文だけで済みます。表記できるのは4文字までなので注意しながら「表記したい4文字」の部分を書き直しましょう。

chrome.browserAction.setBadgeText({ “text”: “表記した4文字”})

式によって計算された結果などは、textではなくnumberとして扱うので、Stringで文字列に変換しないといけません。

var result = 3-1
chrome.browserAction.setBadgeText({ “text”: String(result) })

/*1234と表記*/
chrome.browserAction.setBadgeText({ "text": "1234"})

/*変数hogeを表記*/
chrome.browserAction.setBadgeText({ "text": hoge})

/*計算結果の数値を表記*/
var result = 3-1
chrome.browserAction.setBadgeText({ "text": String(result) })

バッジを動的に変化させる

バッジをクリックさせて変化させるには、

chrome.browserAction.onClicked.addListener(関数１)

を使います。

これでアイコンをクリックすると、関数１が起動します。そして、関数１のなかにバッジの数値を変える処理をさせれば、クリックに応じてバッジに表記する数値が変わります。

var result = 0;

function abcd(){
   result++;
   chrome.browserAction.setBadgeText({ "text": String(result) })
}

chrome.browserAction.onClicked.addListener(abcd);

一定間隔でバッジを変化させる

setIntervalを使うことで一定間隔で処理を行わせることができます。

使い方は、setInterval(関数, ミリ秒)に実行したい関数名と指定したい時間の間隔をミリ秒で設定するだけです。

hoge = null;
hogehoge = setInterval(関数, ミリ秒);

で処理がスタートします。

setInterval(関数, ミリ秒)だけじゃ実行されなかったので注意です。

var result = 0;
var kurikaesi = null;

function abcd(){
   result++;
   chrome.browserAction.setBadgeText({ "text": String(result) })
}

kurikaesi = setInterval(abcd, 1000);