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.8k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
星野将輝
October 19, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
140
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
830
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
2
120
PRレビューのお供にDanger
stoticdev
1
220
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
Jakarta EE meets AI
ivargrimstad
0
130
Conform を推す - Advocating for Conform
mizoguchicoji
3
710
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
color-scheme: light dark; を完全に理解する
uhyo
7
480
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
330
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
『品質』という言葉が嫌いな理由
korimu
0
180
Featured
See All Featured
Speed Design
sergeychernyshev
27
800
How to train your dragon (web standard)
notwaldorf
91
5.9k
Side Projects
sachag
452
42k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Language of Interfaces
destraynor
156
24k
A Tale of Four Properties
chriscoyier
158
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Building Adaptive Systems
keathley
40
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Practical Orchestrator
shlominoach
186
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
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経験者には親和性がある • フロントのフレームワークも簡単に利⽤ できる
ありがとうございました