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
plasmoを使ってみた
Search
Daisuke
September 30, 2024
Programming
0
14
plasmoを使ってみた
Daisuke
September 30, 2024
Tweet
Share
More Decks by Daisuke
See All by Daisuke
GitHubに毎日草を生やし続けたら変わった3つのこと🌱
dsuke0614
1
170
Other Decks in Programming
See All in Programming
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Honoとフロントエンドの 型安全性について
yodaka
4
250
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
SwiftUI Viewの責務分離
elmetal
PRO
0
140
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Faster Mobile Websites
deanohume
306
31k
Optimizing for Happiness
mojombo
376
70k
Being A Developer After 40
akosma
89
590k
A Tale of Four Properties
chriscoyier
158
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Embracing the Ebb and Flow
colly
84
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Designing for humans not robots
tammielis
250
25k
Transcript
plasmo を使ってみた
Kida Daisuke(@0614d_suke) web developer. - https://github.com/D-suke0614 - https://zenn.dev/d_suke0614
話すこと - 拡張機能を開発する際の手順 - plasmoの紹介 - plasmoを使ったら簡単に拡張機能が作れる! 話さないこと - 拡張機能やplasmoについての詳細や実装方法など
Chrome拡張機能とは
1. プロジェクトディレクトリの作成 2. manifest.jsonの作成 a. https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3 3. 機能の実装 4. Chromeで読み込む
https://developer.chrome.com/docs/extensions/get-started/tutori al/hello-world?hl=ja Chrome拡張機能の作り方
1. プロジェクトディレクトリの作成 2. manifest.jsonの作成 a. https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3 3. 機能の実装 4. Chromeで読み込む
https://developer.chrome.com/docs/extensions/get-started/tutori al/hello-world?hl=ja Chrome拡張機能の作り方
manifest.json - 拡張機能に関する設定ファイル - 名前 - バージョン - 各ファイルのパス指定 -
アイコン - 権限の指定 - ホストの指定など
デモ content scriptsを追加
plasmoとは - 拡張機能を簡単に開発、テスト、リリースできるオールインワンプラット フォーム - TS, React, Preact, Svelte, Vueをサポートしている
- 拡張機能に必要な設定周りをフレームワーク側でいい感じに吸収してくれ ている - ソースファイルを元に、manifest.jsonを自動生成
plasmoを使うと嬉しいこと - ゼロコンフィグで開発を進められる - manifest.jsonをほぼ意識しなくて良い - ロジックや見た目に集中できる - デフォルトでReact +
TSがサポートされている
デモ content scriptsを追加 バニラで実装したときとの比較
plasmoのその他の機能 - Background Service Workerもbackground.tsを追加するだけで実行 できる - Messaging APIが使える -
デプロイ用のスクリプトが用意されている
その他のFW - WXT - Viteベース - 全てのブラウザに対応 - Extension.js -
既存PJに組み込み可能
まとめ - plasmoを使うと簡単に拡張機能が作れておすすめ - manifest.jsonをあまり意識せず、ロジックや見た目に集中できる - 拡張機能を作ってみるきっかけになれば
thank you.