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

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

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