Google Meetのチャット履歴を保存するChrome拡張の作成
先日の休みに何か書こうと思って表題のChrome拡張を書きました。
動機
Google Meetは会社のオンラインのMTGでよく使っています。ここには簡易的なチャット機能がついているのですが、これは保存されずに揮発するものでMeetから一度退室してしまうと自分の環境からはもう見られません。後から必要になると思う情報は別途普段使っているSlackなどのチャットツールで書いたりしますが、ちょっとしたメモやリンクが後からちょっと参照したいということもあって作ってみました。
仕様
とにかく面倒なことをしたくなくシンプルに扱いたいので別ファイルにしてどこかに保存する、という形ではなくさらっとブラウザ上から確認出来る形にしようと思いました。なので
- 保存先はchrome.storage.localでPC上に保存
- それを拡張機能のポップアップから確認出来る
ということだけ決めて作りました。
chrome.storage
chrome拡張で使えるAPIの一つです。 localstorageのようなものです。が、ちょっと特別な面があります。
データの保存には以下の2種類があります。
- storage.sync
- ユーザーが同期を有効にしている場合、保存されたデータはユーザーがログインしているすべてのChromeブラウザに自動的に同期される
- アイテム数(512)やアイテム毎のサイズ(8KB)の制限がある。
- storage.local
- localstolageと同じでPCに保存される
- localstorageと同じで５MBの制限があるがunlimitedStorage権限があるとこれが無視出来る
他のログインしているブラウザで同期出来るのは魅力的ですが、いかんせん容量の制限があるので今回はchrome.storage.localで保存することとしました。
今回の拡張のデータを保存するcontent scriptのコードと、ポップアップでデータを読みだすコードの2種類のコードがありますが、どちらでも特に難しいことなくさっとアクセス出来、便利さを感じました。
React
ポップアップの画面に関してはReaｃｔを使って作りました。Reactを使ってChrome拡張を書くのはほぼこちらの記事を参考にさせてもらい、特に支障なく作成出来ました。create-react-appをして一通りどう作ればよいかを解説してくれています。TypeScriptも使っているのでいい感じです。
見た目はMaterial-UIを使いました（なんか呼び方がmuiに変わった？)
アイコン
今まで個人でいくつかプログラムを書いていましたが、会社内だけで外の人に向けて公開したことはほとんどありませんでした。
今回公開するにあたってアイコンを作ってみようとググってみると以下のページを見つけてこちらを参考にさっと作ってみました。
地味ですが普通にありそうな感じのアイコンが出来たのでちょっと嬉しいですw
結び
Google拡張はいくつか書いたことがありましたが、今回始めてReactを使ってみてすごく簡単に出来て良い経験が出来た週末でした。
機能がとても簡素なのでデータを削除出来たり、ファイルでエクスポート出来る機能とかを気が向いたらつけたいなぁと思います。
一応GitHubのリポジトリです。Chrome拡張を書き始めた人とか少しでも何か参考になれば。
Discussion