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
23
plasmoを使ってみた
Daisuke
September 30, 2024
Tweet
Share
More Decks by Daisuke
See All by Daisuke
GitHubに毎日草を生やし続けたら変わった3つのこと🌱
dsuke0614
1
200
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.5k
PipeCDのプラグイン化で目指すところ
warashi
1
270
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
660
Goで作る、開発・CI環境
sin392
0
230
CursorはMCPを使った方が良いぞ
taigakono
1
250
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
効率的な開発手段として VRTを活用する
ishkawa
0
130
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
3.1k
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A better future with KSS
kneath
239
17k
Documentation Writing (for coders)
carmenintech
72
4.9k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
69
4.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
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.