ブラウザ拡張機能が ぱぱっと作れるいい時代になりました。

2023年6月 めぐろLT会 第4回

Transcript

1. ブラウザ拡張機能が ぱぱっと作れるいい時代に なりました。
2. 自己紹介
3. 目次 • 今日伝えたいこと • 拡張機能を作るときの辛さ • Plasmoが辛さをどう解決したか
4. 今日伝えたいこと
5. PlasmoというFWを使うと簡単にブラウザ拡張機能を作れる よ！
6. 実際にPlasmoを使って作りました
7. 作ってみて 拡張機能を作るときの辛さを解消してくれる良いFWでした。 辛さとPlasmoの良さを伝えることで、 皆さんが気楽に拡張機能を作れるようになったら良いな！
8. 拡張機能を作るときの辛さ
9. manifest.jsonを書くのが大変 書き方を一々調べたり 参照しているリソースのパス をちゃんと更新するのが面倒
10. 拡張機能内でのデータのやり取りが複雑 開いてるページ isolatedWorld contentScript mainWorld contentScript serviceWorker or 拡張機能ページ DOM Custom Event chrome.runtime .sendMessage() serviceWorker or 拡張機能ページ
11. 他にも • iconを複数サイズ用意する必要がある • 拡張機能をzipアップロードする必要がある
12. Plasmoが辛さをどう解決してくれるの
13. manifest.jsonをほぼ自動で作成してくれる package.jsonのdisplayNameやdescriptionを書けば それを元にmanifest.jsonを作ってくれます。
14. 読み込むファイルを自動で見つけてくれる スクリプトのエントリポイントのファイル名などが変わっても、 トランスパイルエラーになったりしない。
15. データ送受信の複雑さを隠蔽してくれる sendToBackgroundViaRelay 開いてるページ isolatedWorld contentScript mainWorld contentScript serviceWorker or 拡張機能ページ serviceWorker or 拡張機能ページ sendToBackgroundViaRelay()
16. 他にも・・・ • chromeストア用のデプロイスクリプトが用意されている • 1枚のアイコンから複数サイズのアイコンを用意してくれる • 拡張機能用ストレージにアクセスできるreact-hookが使える
17. まとめ
18. Plasmoはビジネスロジックの作成に集中できる良いFWです！ みなさんの業務効率化にぜひ役立ててみてください！
19. TwitterとZennをやってます。 よろしければフォローお願いいたします。󰢛 Twitter zenn