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
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセ...
Search
星野将輝
October 19, 2024
Programming
1
2.6k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
星野将輝
October 19, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
580
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
140
Go の GC の不得意な部分を克服したい
taiyow
3
840
Recoilを剥がしている話
kirik
5
7.2k
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
160
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
300
useSyncExternalStoreを使いまくる
ssssota
6
1.4k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
190
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
490
Jakarta EE meets AI
ivargrimstad
0
280
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
Speed Design
sergeychernyshev
25
680
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Rails Girls Zürich Keynote
gr2m
94
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Testing 201, or: Great Expectations
jmmastey
41
7.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Gamification - CAS2011
davidbonilla
80
5.1k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Language of Interfaces
destraynor
154
24k
Transcript
Nuxtベースの WXTで開発⽤の Chrome拡張を作成する 株式会社 ⼀休 星野 将輝
⾃⼰紹介 ほしの まさき 星野 将輝 2021.7 ⼀休に参画 元駅員からエンジニアに転職 ⾔語: Go
TypeScript Python C# Java フリーランスエンジニア • ⼀休.comスパの開発 • ⼀休.comふるさと納税を担当
Chrome拡張 使っていますか?
開発におけるChrome拡張の課題 欲しい機能がない 知らない⼈が作ったのものは脆弱性や ウイルスの懸念がある
開発におけるChrome拡張の課題 ならば⾃作しよう!
選定基準 簡単 保守‧管理 拡張性
Chrome拡張開発 フレームワーク WXT
WXTとは? https://github.com/wxt-dev/wxt Nuxtベースの Chrome拡張開発 フレームワーク GitHub Star 4.2k
実際に作成した機能 ‧環境ごとのラベル表⽰ ‧機能のオン/オフ 「どこまでできるのか」の試験も 兼ねていたので、まだ機能は限定 的
WXTとは? 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの
利⽤ スムーズな開発
WXTとは? 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの
利⽤ スムーズな開発 簡単 セットアップ
簡単セットアップ インストールしたらすぐ起動可能
簡単セットアップ entrypointsディレクトリがChrome拡張の機能に応じた構造 entrypoints background ‧‧‧ 拡張機能のバックグラウンドスクリプト content ‧‧‧ WEBコンテンツを直接操作 newtab
‧‧‧ 新しいタブを開く際に表⽰されるページ popup ‧‧‧ 拡張アイコンをクリックしたときに表⽰されるUIウィンドウ sidepanel ‧‧‧ サイドパネルに表⽰されるカスタムUI etc…
簡単セットアップ manifestファイルの⾃動⽣成 { "manifest_version": 3, "name": "⼀休社内拡張機能", "description": "⼀休社内で使⽤する拡張機能です", "background":
{ "service_worker": "background.js" }, "action": { "default_title": "Default Popup Title", "default_popup": "popup.html" }, entrypoints background content newtab popup sidepanel manifest.json
Nuxtベースの構成 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの
利⽤ スムーズな開発 Nuxtベースの 構成
Nuxtベースの構成 ディレクトリ構成 assetsやcomponents、composablesなどの ディレクトリやapp.config.tsなど、Nuxtと WXTで共通の設定ファイルがある ⾃動import componentsやcomposablesに配置したファ イルや、Nuxt機能の⾃動importがある(後述)
Component + Composable 簡単 セットアップ Nuxtベースの 構成 Component + Composable
フロントエンド モジュールの 利⽤ スムーズな開発 Components + Composables
Component + Composable ロジックの再利⽤ ComponentsやComposablesに配 置したファイルを各entrypointsで 読み込み、ロジックを使いまわす ことが可能
Component + Composable Nuxt機能のAutoImport refやcomputed、defineModelな ど、Vue‧Nuxtで⽤意されている 機能がAutoImportされる Nuxtの開発をしている⼈にとって はかなり親和性がある
フロントエンドモジュールの利⽤ 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの
利⽤ スムーズな開発 フロントエンド モジュールの 利⽤
フロントエンドモジュールの利⽤ フロントエンドモジュール フロントエンドのモジュールが⽤ 意されており、すぐに利⽤できる のが特徴 WXTがNuxtベースにも関わらず、 Vue以外にもReact等他のフレーム ワークを使⽤することもできる
フロントエンドモジュールの利⽤ tailwind + daisyuiの導⼊ CSSのフレームワークも利⽤可能 通常のNuxtで導⼊するように、イ ンストールと設定ファイルを配置 すれば利⽤できる
フロントエンドモジュールの利⽤ vue routerの利⽤ サイドパネルの画⾯遷移に vue routerを利⽤ TOP画⾯ path: / 環境ラベル設定画⾯
path: /#/setting/env-label
フロントエンドモジュールの利⽤ vue routerの利⽤ sidepanel pages setting EnvLabel.vue Index.vue App.vue index.html
main.ts router.ts TS TS router.ts
スムーズな開発 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの
利⽤ スムーズな開発 スムーズな開発
スムーズな開発 開発⽤ブラウザ 開発環境で実⾏すると開発専⽤ブ ラウザが⽴ち上がる 普段のブラウザに⼿を加えなくて も開発できる HMR ホットリロード対応なので、いち いちサーバーを⽌めなくてもよい
WXTまとめ • WXTで簡単にChrome拡張が作成できる • Nuxt経験者には親和性がある • フロントのフレームワークも簡単に利⽤ できる
ありがとうございました