Google Chrome Extensionを作ってみた-その3-
はじめに
エクステンションの中には、ツールバーアイコンの右下に動的に数字を表示するものがあります。例えば、Google Mail Checkerはinboxの未読の件数を表示していますね。
今回はこのバッジ表示の仕方についてです。
やってみる
やり方は簡単です。
chrome.browserAction.setBadgeText(object details);
をコールするだけです。detailsは、
- text:表示する数値の文字列(必須)
- tabId：特定のタブに限定する場合の当該タブのid(オプション)
で構成されるオブジェクトです。
ひとまずエクステンションのロード時にバッジに"0"を表示させ、ツールバーアイコンを押したらカウントアップしていくようにしてみましょう。
manifest.jsonは次のようにしました。
{
"name": "BadgeSample",
"version": "0.1",
"background_page": "background.html",
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "icon_128.png",
"name": "This is Badge Sample"
}
}
今回はポップアップさせる画面がないので、browser_actionでのpopupの指定はありません。その代り、裏側で処理を担当するbackground_pageを利用します。
background.htmlの内容は次の様にしました。
<html>
<head>
<script>
var counter = 0;
chrome.browserAction.setBadgeText({text:String(counter)});
chrome.browserAction.onClicked.addListener(
function(tab){
counter++;
chrome.browserAction.setBadgeText({text:String(counter)});
}
);
</script>
</head>
</html>
ツールバーアイコンのクリックのイベントを利用するには、
chrome.browserAction.onClicked.addListener(function(Tab tab) {...}));
を使います。
実行すると、次の様になります。(プラグインインストール後と、3回クリックした後)
ちなみに
chrome.browserAction.setBadgeBackgroundColor({color:[0, 0, 255, 100]});
とすると、バッジの背景色が変えられます。この場合は青になります。
まとめ
- バッジを表示するにはchrome.browserAction.setBadgeTextを使う
- ツールバーアイコンのクリックイベントを取るにはchrome.browserAction.onClicked.addListenerを使う
![[Python]ChatGPT API利用時に画面が欲しい方へ（Flask + XMLHttpRequest）](https://devio2023-media.developers.io/wp-content/uploads/2019/04/python.png)
