Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション

Transcript

1. Nuxtベースの WXTで開発⽤の Chrome拡張を作成する 株式会社 ⼀休 星野 将輝
2. ⾃⼰紹介 ほしの まさき 星野 将輝 2021.7 ⼀休に参画 元駅員からエンジニアに転職 ⾔語: Go TypeScript Python C# Java フリーランスエンジニア • ⼀休.comスパの開発 • ⼀休.comふるさと納税を担当
3. Chrome拡張 使っていますか？
4. 開発におけるChrome拡張の課題 欲しい機能がない 知らない⼈が作ったのものは脆弱性や ウイルスの懸念がある
5. 開発におけるChrome拡張の課題 ならば⾃作しよう！
6. 選定基準 簡単 保守‧管理 拡張性
7. Chrome拡張開発 フレームワーク WXT
8. WXTとは？ https://github.com/wxt-dev/wxt Nuxtベースの Chrome拡張開発 フレームワーク GitHub Star 4.2k
9. 実際に作成した機能 ‧環境ごとのラベル表⽰ ‧機能のオン/オフ 「どこまでできるのか」の試験も 兼ねていたので、まだ機能は限定 的
10. WXTとは？ 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの 利⽤ スムーズな開発
11. WXTとは？ 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの 利⽤ スムーズな開発 簡単 セットアップ
12. 簡単セットアップ インストールしたらすぐ起動可能
13. 簡単セットアップ entrypointsディレクトリがChrome拡張の機能に応じた構造 entrypoints background ‧‧‧ 拡張機能のバックグラウンドスクリプト content ‧‧‧ WEBコンテンツを直接操作 newtab ‧‧‧ 新しいタブを開く際に表⽰されるページ popup ‧‧‧ 拡張アイコンをクリックしたときに表⽰されるUIウィンドウ sidepanel ‧‧‧ サイドパネルに表⽰されるカスタムUI etc…
14. 簡単セットアップ 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
15. Nuxtベースの構成 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの 利⽤ スムーズな開発 Nuxtベースの 構成
16. Nuxtベースの構成 ディレクトリ構成 assetsやcomponents、composablesなどの ディレクトリやapp.config.tsなど、Nuxtと WXTで共通の設定ファイルがある ⾃動import componentsやcomposablesに配置したファ イルや、Nuxt機能の⾃動importがある(後述)
17. Component + Composable 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの 利⽤ スムーズな開発 Components + Composables
18. Component + Composable ロジックの再利⽤ ComponentsやComposablesに配 置したファイルを各entrypointsで 読み込み、ロジックを使いまわす ことが可能
19. Component + Composable Nuxt機能のAutoImport refやcomputed、defineModelな ど、Vue‧Nuxtで⽤意されている 機能がAutoImportされる Nuxtの開発をしている⼈にとって はかなり親和性がある
20. フロントエンドモジュールの利⽤ 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの 利⽤ スムーズな開発 フロントエンド モジュールの 利⽤
21. フロントエンドモジュールの利⽤ フロントエンドモジュール フロントエンドのモジュールが⽤ 意されており、すぐに利⽤できる のが特徴 WXTがNuxtベースにも関わらず、 Vue以外にもReact等他のフレーム ワークを使⽤することもできる
22. フロントエンドモジュールの利⽤ tailwind + daisyuiの導⼊ CSSのフレームワークも利⽤可能 通常のNuxtで導⼊するように、イ ンストールと設定ファイルを配置 すれば利⽤できる
23. フロントエンドモジュールの利⽤ vue routerの利⽤ サイドパネルの画⾯遷移に vue routerを利⽤ TOP画⾯ path: / 環境ラベル設定画⾯ path: /#/setting/env-label
24. フロントエンドモジュールの利⽤ vue routerの利⽤ sidepanel pages setting EnvLabel.vue Index.vue App.vue index.html main.ts router.ts TS
 TS
 router.ts
25. スムーズな開発 簡単 セットアップ Nuxtベースの 構成 Component + Composable フロントエンド モジュールの 利⽤ スムーズな開発 スムーズな開発
26. スムーズな開発 開発⽤ブラウザ 開発環境で実⾏すると開発専⽤ブ ラウザが⽴ち上がる 普段のブラウザに⼿を加えなくて も開発できる HMR ホットリロード対応なので、いち いちサーバーを⽌めなくてもよい
27. WXTまとめ • WXTで簡単にChrome拡張が作成できる • Nuxt経験者には親和性がある • フロントのフレームワークも簡単に利⽤ できる
28. ありがとうございました