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
680
ブラウザ拡張機能が ぱぱっと作れるいい時代になりました。
2023年6月 めぐろLT会 第4回
taiga533
June 22, 2023
Tweet
Share
More Decks by taiga533
See All by taiga533
実用Docker入門
taiga533
0
66
DockerをいじれるWebGUIを作った話
taiga533
0
66
はじめてのVue.jsハンズオン
taiga533
0
32
Other Decks in Technology
See All in Technology
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
地理情報とAPIのトレンド
nagix
0
160
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
How to Think Like a Performance Engineer
csswizardry
4
590
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
Featured
See All Featured
Optimizing for Happiness
mojombo
373
69k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Practical Orchestrator
shlominoach
185
10k
Ruby is Unlike a Banana
tanoku
96
10k
Scaling GitHub
holman
458
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
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