plasmoを使ってみた

Transcript

1. plasmo を使ってみた
2. Kida Daisuke（@0614d_suke） web developer. - https://github.com/D-suke0614 - https://zenn.dev/d_suke0614
3. 話すこと - 拡張機能を開発する際の手順 - plasmoの紹介 - plasmoを使ったら簡単に拡張機能が作れる！ 話さないこと - 拡張機能やplasmoについての詳細や実装方法など
4. Chrome拡張機能とは
5. 1. プロジェクトディレクトリの作成 2. manifest.jsonの作成 a. https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3 3. 機能の実装 4. Chromeで読み込む https://developer.chrome.com/docs/extensions/get-started/tutori al/hello-world?hl=ja Chrome拡張機能の作り方
6. 1. プロジェクトディレクトリの作成 2. manifest.jsonの作成 a. https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3 3. 機能の実装 4. Chromeで読み込む https://developer.chrome.com/docs/extensions/get-started/tutori al/hello-world?hl=ja Chrome拡張機能の作り方
7. manifest.json - 拡張機能に関する設定ファイル - 名前 - バージョン - 各ファイルのパス指定 - アイコン - 権限の指定 - ホストの指定など
8. デモ content scriptsを追加
9. plasmoとは - 拡張機能を簡単に開発、テスト、リリースできるオールインワンプラット フォーム - TS, React, Preact, Svelte, Vueをサポートしている - 拡張機能に必要な設定周りをフレームワーク側でいい感じに吸収してくれ ている - ソースファイルを元に、manifest.jsonを自動生成
10. plasmoを使うと嬉しいこと - ゼロコンフィグで開発を進められる - manifest.jsonをほぼ意識しなくて良い - ロジックや見た目に集中できる - デフォルトでReact + TSがサポートされている
11. デモ content scriptsを追加 バニラで実装したときとの比較
12. plasmoのその他の機能 - Background Service Workerもbackground.tsを追加するだけで実行 できる - Messaging APIが使える - デプロイ用のスクリプトが用意されている
13. その他のFW - WXT - Viteベース - 全てのブラウザに対応 - Extension.js - 既存PJに組み込み可能
14. まとめ - plasmoを使うと簡単に拡張機能が作れておすすめ - manifest.jsonをあまり意識せず、ロジックや見た目に集中できる - 拡張機能を作ってみるきっかけになれば
15. thank you.