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
ブラウザ拡張機能が ぱぱっと作れるいい時代になりました。
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
72
DockerをいじれるWebGUIを作った話
taiga533
0
74
はじめてのVue.jsハンズオン
taiga533
0
45
Other Decks in Technology
See All in Technology
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
CoRL 2025 Survey
harukiabe
0
160
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
150
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
160
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
410
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
500
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
180
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
570
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
190
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Balancing Empowerment & Direction
lara
4
690
Designing for Performance
lara
610
69k
Side Projects
sachag
455
43k
Navigating Team Friction
lara
190
15k
Scaling GitHub
holman
463
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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