$30 off During Our Annual Pro Sale. View Details »

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

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

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

taiga533

June 22, 2023
Tweet

More Decks by taiga533

Other Decks in Technology

Transcript

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

    View Slide

  2. 自己紹介

    View Slide

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

    View Slide

  4. 今日伝えたいこと

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. まとめ

    View Slide

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

    View Slide

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

    View Slide