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
800
ブラウザ拡張機能が ぱぱっと作れるいい時代になりました。
2023年6月 めぐろLT会 第4回
taiga533
June 22, 2023
Tweet
Share
More Decks by taiga533
See All by taiga533
実用Docker入門
taiga533
0
70
DockerをいじれるWebGUIを作った話
taiga533
0
72
はじめてのVue.jsハンズオン
taiga533
0
44
Other Decks in Technology
See All in Technology
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
解析の定理証明実践@Lean 4
dec9ue
0
180
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
220
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
rubygem開発で鍛える設計力
joker1007
2
220
本が全く読めなかった過去の自分へ
genshun9
0
560
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Featured
See All Featured
Building an army of robots
kneath
306
45k
Side Projects
sachag
455
42k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
For a Future-Friendly Web
brad_frost
179
9.8k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
The Invisible Side of Design
smashingmag
300
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.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