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
3k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
星野将輝
October 19, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
360
Select API from Kotlin Coroutine
jmatsu
1
190
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
エラーって何種類あるの?
kajitack
5
310
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
XSLTで作るBrainfuck処理系
makki_d
0
210
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
WindowInsetsだってテストしたい
ryunen344
1
200
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Applications with DynamoDB
mza
95
6.5k
RailsConf 2023
tenderlove
30
1.1k
Visualization
eitanlees
146
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Designing for Performance
lara
609
69k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Practical Orchestrator
shlominoach
188
11k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
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経験者には親和性がある • フロントのフレームワークも簡単に利⽤ できる
ありがとうございました