Plasmoの紹介

Plasmoの紹介

Transcript

1. Plasmo の紹介 Press Space for next page
2. 自己紹介 📝 飯野陽平（wheatandcat ） 🏢 法人設立（合同会社UNICORN 代表社員） 💻 Work: シェアフル株式会社CTO 📚 Blog: https://www.wheatandcat.me/ 🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
3. Plasmo とは？ ブラウザ拡張機能を作成するためのReact フレームワーク TypeScript & React で簡単にChrome 拡張が作成できる 従来のChrome 拡張で必要だった設定周りフレームワーク側で抽象化されている
4. セットアップ 以下のコマンド実行でプロジェクトの作成ｇは完了 Getting Started | Plasmo $ pnpm create plasmo
5. コード プロジェクトの作成時は以下のようなコードが生成される import { useState } from "react" function IndexPopup() { const [data, setData] = useState("") return ( <div> <h2> Welcome to your{" "} <a href="https://www.plasmo.com" target="_blank"> Plasmo </a>{" "} Extension! </h2> <input onChange={(e) => setData(e.target.value)} value={data} /> <a href="https://docs.plasmo.com" target="_blank"> View Docs </a> </div> ) } export default IndexPopup
6. 簡単なChrome 拡張を作成したので紹介 ▪ plasmo-demo https://github.com/wheatandcat/plasmo-demo
7. モチベーション 技術系記事をストックする機能が欲しかった ブラウザのブックマークやGoogle Keep だと、見返した時にどこに保存したか忘れるケースが多い 大体のケースは読み終わったら削除してOK だが、既存だと削除が手間なシステムが多い まだ開発中なので、ここから自分好みにカスタマイズしていく予定
8. デモ 以下は動かしながら紹介する コード https://github.com/wheatandcat/plasmo-demo/blob/main/popup.tsx データの保存はPlasmo のStorage API を使用 デザインはTailwindCSS を使用 右クリックのMenu に追加はBackground Service Worker を使えば可能 コード
9. まとめ かなり簡単にChrome 拡張が作れるのでオススメ デバッグツールとか作っても良いかも Chrome 拡張特有の部分は抽象化しているので、React さえ知っていれば誰でも自作できる
10. ご清聴ありがとうございました 🎉