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

自己紹介

目次 • 今日伝えたいこと • 拡張機能を作るときの辛さ • Plasmoが辛さをどう解決したか

今日伝えたいこと

PlasmoというFWを使うと簡単にブラウザ拡張機能を作れるよ！

実際にPlasmoを使って作りました

作ってみて拡張機能を作るときの辛さを解消してくれる良いFWでした。辛さとPlasmoの良さを伝えることで、皆さんが気楽に拡張機能を作れるようになったら良いな！

拡張機能を作るときの辛さ

manifest.jsonを書くのが大変書き方を一々調べたり参照しているリソースのパスをちゃんと更新するのが面倒

拡張機能内でのデータのやり取りが複雑開いてるページ isolatedWorld contentScript mainWorld contentScript serviceWorker or 拡張機能ページ DOM
Custom Event chrome.runtime .sendMessage() serviceWorker or 拡張機能ページ

他にも • iconを複数サイズ用意する必要がある • 拡張機能をzipアップロードする必要がある

Plasmoが辛さをどう解決してくれるの

manifest.jsonをほぼ自動で作成してくれる package.jsonのdisplayNameやdescriptionを書けばそれを元にmanifest.jsonを作ってくれます。

読み込むファイルを自動で見つけてくれるスクリプトのエントリポイントのファイル名などが変わっても、トランスパイルエラーになったりしない。

データ送受信の複雑さを隠蔽してくれる sendToBackgroundViaRelay 開いてるページ isolatedWorld contentScript mainWorld contentScript serviceWorker or 拡張機能ページ
serviceWorker or 拡張機能ページ sendToBackgroundViaRelay()

他にも・・・ • chromeストア用のデプロイスクリプトが用意されている • 1枚のアイコンから複数サイズのアイコンを用意してくれる • 拡張機能用ストレージにアクセスできるreact-hookが使える

まとめ

Plasmoはビジネスロジックの作成に集中できる良いFWです！みなさんの業務効率化にぜひ役立ててみてください！

TwitterとZennをやってます。よろしければフォローお願いいたします。󰢛 Twitter zenn

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

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

taiga533

More Decks by taiga533

Other Decks in Technology

Featured

Transcript