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