Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

星野将輝

October 19, 2024
Tweet

Other Decks in Programming

Transcript

  1. ⾃⼰紹介 ほしの まさき 星野 将輝 2021.7 ⼀休に参画 元駅員からエンジニアに転職 ⾔語: Go

    TypeScript Python C# Java フリーランスエンジニア • ⼀休.comスパの開発 • ⼀休.comふるさと納税を担当
  2. 簡単セットアップ entrypointsディレクトリがChrome拡張の機能に応じた構造 entrypoints background ‧‧‧ 拡張機能のバックグラウンドスクリプト content ‧‧‧ WEBコンテンツを直接操作 newtab

    ‧‧‧ 新しいタブを開く際に表⽰されるページ popup ‧‧‧ 拡張アイコンをクリックしたときに表⽰されるUIウィンドウ sidepanel ‧‧‧ サイドパネルに表⽰されるカスタムUI etc…
  3. 簡単セットアップ 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
  4. Component + Composable 簡単 セットアップ Nuxtベースの 構成 Component + Composable

    フロントエンド モジュールの 利⽤ スムーズな開発 Components + Composables