こんにちは take-2405 です。
最近Chrome Extensionを作成したのでその件についてお話していきたいと思います。
今回僕が作成した拡張機能はユーザーがブラウザを使用している際に通知を行う拡張機能です。
作成したシステムの概要
- Chrome上の特定の動作をきっかけにExtensionからAPIにリクエストを送信します。
- APIはリクエストが届いた際にリクエストを送ってきたユーザーの通知があるかどうか確認するためにDBに問い合わせます。
- DBをAPIから送られてきたクエリに従い対象のデータ(通知)があるがどうかを確認し結果をAPIに返します。
- APIはDBから帰ってきた値を確認しエラーがなければクライアント(Extension)にレスポンスを返します。
- (図には書いてませんが)ExtensionはAPIから帰ってきたレスポンスを受け取り通知があればユーザーに通知します。
動作
本題
いよいよ本題に入りましょう。
拡張機能の基本的な部分は以前記事に書かせていただいたのでこの記事の前に読むことをお勧めします。
https://qiita.com/QT21-004-2_HCB/items/8efc84c10d30dc503422
拡張機能を作成するにあたり重要だったのは以下の2点です。
- バッジ(拡張機能のアイコンに表示される文字)
- ポップアップ(アイコンクリック時に表示されるもの)
1.バッジ
バッジとは拡張機能のアイコンに表示される文字のことです。先ほどの写真では赤い四角の中に「通知」という白い文字が表示されていました。これがバッジです。
バッジを表示するためには「Event / Background Page」に下記の処理を追記する必要があります。
chrome.browserAction.setBadgeText({ "text": "ここに文字列" })
chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 100] });
ざっと説明すると上記の２行でバッジを表示することができます。
まず１行目のコードがバッジに表示する文字列を指定します。(注意：標示できる文字列は４文字まで)
続いて２行目のコードでバッジの背景色を指定しています。
今回僕が作成した拡張機能はAPIからのレスポンスによってバッジの表示・非表示を切り替えることでユーザーへの通知を行っていました。
2．ポップアップ
Manifest
拡張機能のアイコンをクリックした際に表示されるものがポップアップです。
まずポップアップの表示を行うためにはmanifestのブラウザアクションにポップアップを追加します。
"browser_action": {
"default_title": "sample",
"default_popup": "./popup/popup.html"
}
- default_title：拡張機能の名前
- default_popup：ポップアップを表示するためのhtmlへのファイルパスを指定
ポップアップ内容(html)
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>sample</h1>
</body>
</html>
これでおそらくアイコンクリック時にポップアップが表示されると思います。
ここからはお好みでですが、CSS JSを書くことで動的な挙動が可能です。
またポップアップ部分と「Content Script」or「Event / Background Page」間のデータやり取りが可能です。
つまり発想次第でいろいろな拡張機能が作成できそうですよね？
データのやり取りに関しては別の記事として書いているのでぜひ
https://qiita.com/QT21-004-2_HCB/items/3bdc94c3cf83720e9da4
今回僕が作成した拡張機能では通知が発生した際に(ポップアップに)通知内容を表示しました。ユーザーがアイコンをクリックし、ポップアップを表示した時点で通知を確認したとみなしバックグラウンドへ変数を渡し通知を削除する関数を起動しました。説明下手ですいません、、、