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経験者には親和性がある ● フロントのフレームワークも簡単に利⽤ できる

ありがとうございました