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
73
DockerをいじれるWebGUIを作った話
taiga533
0
74
はじめてのVue.jsハンズオン
taiga533
0
45
Other Decks in Technology
See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
120
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
250
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
360
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
110
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
170
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
240
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Statistics for Hackers
jakevdp
799
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Music & Morning Musume
bryan
46
6.8k
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