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
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
14k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
970
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
140
MCPで実現できる、Webサービス利用体験について
syumai
6
1.8k
GPUを計算資源として使おう!
primenumber
1
290
NEWT Backend Evolution
xpromx
1
150
リッチエディターを安全に開発・運用するために
unachang113
1
240
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
150
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
440
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Writing Fast Ruby
sferik
628
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Facilitating Awesome Meetings
lara
54
6.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
KATA
mclloyd
30
14k
Optimizing for Happiness
mojombo
379
70k
Visualization
eitanlees
146
16k
Documentation Writing (for coders)
carmenintech
72
4.9k
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経験者には親和性がある • フロントのフレームワークも簡単に利⽤ できる
ありがとうございました