chrome拡張機能でmeetでコメントが画面上に流れるようにしてみた
TL;DR
google-meet-comment-flowというchrome拡張機能を作りました！
chrome web storeにも公開してます！
使用した技術スタックはTypeScript, React, Vite, CRXJS Vite Pluginです。
処理の流れは以下のようになっております。
作るまでの経緯
自分が今所属している会社では、社内イベントの際に既存のデスクトップアプリを使ってchromeで画面共有して参加者のコメントをニコニコ動画みたいに画面上に流すというカルチャーがありました。
ただ、その際にコメント投稿用のルームを作ったり画面共有を全体にしたりする必要があって準備が大変という課題があったので、google-meet-comment-flowというchrome拡張機能を作りました。
また、作るにあたって、以下の拡張機能を参考にしております！
技術スタック
普段の業務で使っているのでReact, TypeScriptを選択。
Reactベースのchrome拡張機能開発用のboilerplateはたくさんあるのですが、機能過多だったりビルドが遅かったりしたので見送りました。
最終的に採用したのがCRXJS Vite Pluginです。
こちらはViteのchrome拡張機能開発用のpluginで、以下のメリットがあります
- ビルドが爆速
- ホットリロードされる
- 従来だと更新ボタンを押す必要があった
- 設定ファイルに型補完が効く
処理の流れ
前提
図解
詰まった点
パフォーマンス系
コメントを画面上に流す、かついろんなスペックのpcで利用されるという要件なので、可能な限りサクサク動作するのを目指しましたが、以下で詰まりました。
document.getElementsByClassNameが重い
対象のdomを絞ればいいんでしょ、と思って特定のdomを渡したりしていましたが、それでも重いです。
document.querySelectorで要素を直指定して渡す方が全然早かったのでそのようにしました。
chrome runtime系
content script <--> background scriptでメッセージの送受信をする際に、onMessage.addListenerでイベントをキャッチして処理を記述していたのですが、こちらも以下で詰まりました。
chrome.runtime.onMessage.addListener内ではasync awaitが使えない
以下のdocumentにもあるように、onMessage.addListenerにasync/awaitを使うと、全ての受け取ったメッセージを消費するようになってしまうので、実際には他のリスナーがメッセージを受信したり処理することを妨げてしまうため、非同期的な実装を使いたい場合はPromiseを使わないといけないようです。
明示的なエラーが出ず、ただメッセージが呼ばれない状態になっていたので原因特定にちょっと苦労しました、、
chrome.runtime.sendMessageとchrome.tabs.sendMessageでsendResponseを非同期で実行する場合はtrueを返さないとうまく機能しない
よく見ると公式documentに記載があったのですが、sendResponseを返す場合は以下のいずれかでないとうまく機能しないようでした。
- 同期的に実行される
- 非同期の場合はtrueを返すようにする
https://developer.chrome.com/docs/extensions/mv3/messaging/#simple
今後改善したい点
コメント投稿タイミングが重なると流れないことがある
投稿されたことをフックに処理が走るのですが、全く同じタイミングで何個もコメントが投稿されると拾い切れずにいくつかのコメントが流れなかったりします、、
もれなく流せるようにコメント欄の監視方法を見直したいものです。
匿名にしたい
社内でもともと使っていたデスクトップアプリでは匿名でのコメント投稿機能があり、そのニーズが強いので、chrome拡張機能としていかにそれを実現できるかを考えていきたいです。
そのためにはコメントしてもらうのをGoogle Meetのコメント欄ではないどこかにしてもらう必要があるのですが、どうしようかなと言った具合です。
CI/CDを整える
E2Eテストや自動デプロイは整備中なので、導入してDeveloper Experienceを高めていきたいです。
まとめ
以上、自作したChrome拡張機能、Google Meet Comment Flowの紹介でした！
Contribution大歓迎なので、気になった方はぜひ！
Discussion