こんにちは take-2405 です。

最近Chrome Extensionを作成したのでその件についてお話していきたいと思います。

今回僕が作成した拡張機能はユーザーがブラウザを使用している際に通知を行う拡張機能です。

本題

いよいよ本題に入りましょう。
拡張機能の基本的な部分は以前記事に書かせていただいたのでこの記事の前に読むことをお勧めします。
https://qiita.com/QT21-004-2_HCB/items/8efc84c10d30dc503422

拡張機能を作成するにあたり重要だったのは以下の2点です。

バッジとは拡張機能のアイコンに表示される文字のことです。先ほどの写真では赤い四角の中に「通知」という白い文字が表示されていました。これがバッジです。

バッジを表示するためには「Event / Background Page」に下記の処理を追記する必要があります。

event.js

 chrome.browserAction.setBadgeText({ "text": "ここに文字列" })
 chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 100] });

ざっと説明すると上記の２行でバッジを表示することができます。
まず１行目のコードがバッジに表示する文字列を指定します。(注意：標示できる文字列は４文字まで)
続いて２行目のコードでバッジの背景色を指定しています。

今回僕が作成した拡張機能はAPIからのレスポンスによってバッジの表示・非表示を切り替えることでユーザーへの通知を行っていました。

拡張機能のアイコンをクリックした際に表示されるものがポップアップです。

まずポップアップの表示を行うためにはmanifestのブラウザアクションにポップアップを追加します。

manifest.json

"browser_action": {
        "default_title": "sample",
        "default_popup": "./popup/popup.html"
    }

/popup/popup.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

今回僕が作成した拡張機能では通知が発生した際に(ポップアップに)通知内容を表示しました。ユーザーがアイコンをクリックし、ポップアップを表示した時点で通知を確認したとみなしバックグラウンドへ変数を渡し通知を削除する関数を起動しました。説明下手ですいません、、、

Chrome使用中に通知を行う拡張機能の作成