Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザ拡張機能が ぱぱっと作れるいい時代になりました。
Search
taiga533
June 22, 2023
Technology
1
820
ブラウザ拡張機能が ぱぱっと作れるいい時代になりました。
2023年6月 めぐろLT会 第4回
taiga533
June 22, 2023
Tweet
Share
More Decks by taiga533
See All by taiga533
実用Docker入門
taiga533
0
73
DockerをいじれるWebGUIを作った話
taiga533
0
74
はじめてのVue.jsハンズオン
taiga533
0
45
Other Decks in Technology
See All in Technology
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
hamadakoji
0
180
Oracle Database@Azure:サービス概要のご紹介
oracle4engineer
PRO
2
170
20251222_サンフランシスコサバイバル術
ponponmikankan
2
130
半年で、AIゼロ知識から AI中心開発組織の変革担当に至るまで
rfdnxbro
0
120
高度サイバー人材育成専科(後半)
nomizone
0
400
【開発を止めるな】機能追加と並行して進めるアーキテクチャ改善/Keep Shipping: Architecture Improvements Without Pausing Dev
bitkey
PRO
1
110
AIBuildersDay_track_A_iidaxs
iidaxs
3
930
JEDAI認定プログラム JEDAI Order 2026 エントリーのご案内 / JEDAI Order 2026 Entry
databricksjapan
0
150
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
sekido
PRO
0
190
ESXi のAIOps だ!2025冬
unnowataru
0
160
Microsoft Agent 365 についてゆっくりじっくり理解する!
skmkzyk
0
440
たまに起きる外部サービスの障害に備えたり備えなかったりする話
egmc
0
360
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Rails Girls Zürich Keynote
gr2m
95
14k
30 Presentation Tips
portentint
PRO
1
170
Building Adaptive Systems
keathley
44
2.9k
BBQ
matthewcrist
89
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
286
14k
Six Lessons from altMBA
skipperchong
29
4.1k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
2
2.7k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.3k
How to Talk to Developers About Accessibility
jct
1
83
We Are The Robots
honzajavorek
0
110
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.1k
Transcript
ブラウザ拡張機能が ぱぱっと作れるいい時代に なりました。
自己紹介
目次 • 今日伝えたいこと • 拡張機能を作るときの辛さ • Plasmoが辛さをどう解決したか
今日伝えたいこと
PlasmoというFWを使うと簡単にブラウザ拡張機能を作れる よ!
実際にPlasmoを使って作りました
作ってみて 拡張機能を作るときの辛さを解消してくれる良いFWでした。 辛さとPlasmoの良さを伝えることで、 皆さんが気楽に拡張機能を作れるようになったら良いな!
拡張機能を作るときの辛さ
manifest.jsonを書くのが大変 書き方を一々調べたり 参照しているリソースのパス をちゃんと更新するのが面倒
拡張機能内でのデータのやり取りが複雑 開いてるページ isolatedWorld contentScript mainWorld contentScript serviceWorker or 拡張機能ページ DOM
Custom Event chrome.runtime .sendMessage() serviceWorker or 拡張機能ページ
他にも • iconを複数サイズ用意する必要がある • 拡張機能をzipアップロードする必要がある
Plasmoが辛さをどう解決してくれるの
manifest.jsonをほぼ自動で作成してくれる package.jsonのdisplayNameやdescriptionを書けば それを元にmanifest.jsonを作ってくれます。
読み込むファイルを自動で見つけてくれる スクリプトのエントリポイントのファイル名などが変わっても、 トランスパイルエラーになったりしない。
データ送受信の複雑さを隠蔽してくれる sendToBackgroundViaRelay 開いてるページ isolatedWorld contentScript mainWorld contentScript serviceWorker or 拡張機能ページ
serviceWorker or 拡張機能ページ sendToBackgroundViaRelay()
他にも・・・ • chromeストア用のデプロイスクリプトが用意されている • 1枚のアイコンから複数サイズのアイコンを用意してくれる • 拡張機能用ストレージにアクセスできるreact-hookが使える
まとめ
Plasmoはビジネスロジックの作成に集中できる良いFWです! みなさんの業務効率化にぜひ役立ててみてください!
TwitterとZennをやってます。 よろしければフォローお願いいたします。 Twitter zenn