Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
plasmoを使ってみた
Search
Daisuke
September 30, 2024
Programming
0
14
plasmoを使ってみた
Daisuke
September 30, 2024
Tweet
Share
More Decks by Daisuke
See All by Daisuke
GitHubに毎日草を生やし続けたら変わった3つのこと🌱
dsuke0614
1
170
Other Decks in Programming
See All in Programming
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
ARA Ansible for the teams
kksat
0
150
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
CI改善もDatadogとともに
taumu
0
110
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
最近のVS Codeで気になるニュース 2025/01
74th
1
250
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Facilitating Awesome Meetings
lara
51
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building Your Own Lightsaber
phodgson
104
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
We Have a Design System, Now What?
morganepeng
51
7.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Gamification - CAS2011
davidbonilla
80
5.1k
Transcript
plasmo を使ってみた
Kida Daisuke(@0614d_suke) web developer. - https://github.com/D-suke0614 - https://zenn.dev/d_suke0614
話すこと - 拡張機能を開発する際の手順 - plasmoの紹介 - plasmoを使ったら簡単に拡張機能が作れる! 話さないこと - 拡張機能やplasmoについての詳細や実装方法など
Chrome拡張機能とは
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拡張機能の作り方
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拡張機能の作り方
manifest.json - 拡張機能に関する設定ファイル - 名前 - バージョン - 各ファイルのパス指定 -
アイコン - 権限の指定 - ホストの指定など
デモ content scriptsを追加
plasmoとは - 拡張機能を簡単に開発、テスト、リリースできるオールインワンプラット フォーム - TS, React, Preact, Svelte, Vueをサポートしている
- 拡張機能に必要な設定周りをフレームワーク側でいい感じに吸収してくれ ている - ソースファイルを元に、manifest.jsonを自動生成
plasmoを使うと嬉しいこと - ゼロコンフィグで開発を進められる - manifest.jsonをほぼ意識しなくて良い - ロジックや見た目に集中できる - デフォルトでReact +
TSがサポートされている
デモ content scriptsを追加 バニラで実装したときとの比較
plasmoのその他の機能 - Background Service Workerもbackground.tsを追加するだけで実行 できる - Messaging APIが使える -
デプロイ用のスクリプトが用意されている
その他のFW - WXT - Viteベース - 全てのブラウザに対応 - Extension.js -
既存PJに組み込み可能
まとめ - plasmoを使うと簡単に拡張機能が作れておすすめ - manifest.jsonをあまり意識せず、ロジックや見た目に集中できる - 拡張機能を作ってみるきっかけになれば
thank you.