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
900
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
星野将輝
October 19, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
3k
Identifying User Idenity
moro
6
9.4k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
310
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
5k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.7k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
160
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
540
僕がつくった48個のWebサービス達
yusukebe
20
17k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
380
macOS でできる リアルタイム動画像処理
biacco42
9
2.3k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
160
Macとオーディオ再生 2024/11/02
yusukeito
0
320
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How to Ace a Technical Interview
jacobian
276
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
How GitHub (no longer) Works
holman
310
140k
Fireside Chat
paigeccino
33
3k
GitHub's CSS Performance
jonrohan
1030
460k
Writing Fast Ruby
sferik
627
61k
Making Projects Easy
brettharned
115
5.9k
A designer walks into a library…
pauljervisheath
202
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
KATA
mclloyd
29
14k
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経験者には親和性がある • フロントのフレームワークも簡単に利⽤ できる
ありがとうございました