Zenn
🗿

Vue3を使用してChrome拡張機能を作ってみる

2022/06/27に公開
Chrome拡張
TypeScript
Vue.js
Vue 3
tech

はじめに

  • 今回はVue3を使用してChrome拡張機能を開発したいと思います。

対象読者

  • Vue3を使用してChrome拡張機能を開発したい方

実装方針

  • Vue公式を参考にVue3の最小構成を作成します
  • publicフォルダにmanifest.jsonを追加します。manifest.jsonの書き方はGoogle公式を参照ください。
  • RouterのモードをcreateWebHistoryからcreateWebHashHistoryに変更します。Chrome拡張機能内で画面遷移させるためにはHashモードにする必要があります。
  • 画面遷移と表示されたタブの色を変更する機能の２つを今回実装します。

サンプルコード

初期構成から変更したソースのみ抜粋

public/manifest.json

public/manifest.json
{
  "manifest_version": 3,
  "name": "Vue3 - Chrome拡張サンプル",
  "version": "1.0",
  "description": "Vue3でChrome拡張を作成したサンプルです。",
  "permissions": ["activeTab", "scripting", "tabs"],
  "action": {
    "default_popup": "index.html"
  }
}

src/router/index.ts

src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  // createWebHashHistoryに変更
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

src/views/HomeView.vue

src/views/HomeView.vue
<script setup lang="ts">
import { ref } from 'vue'
const color = ref('#000000')

async function changeColor(color: string) {
  // 現在のタブ情報を取得
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  
  // 開いているタブのbodyの色を変更する
  await chrome.scripting.executeScript({
    target: { tabId: tab.id || 0 },
    args: [color],
    func: (args) => {
      document.body.style.background = args
    },
  })
}
</script>

<template>
  <div class="HomeView">
    <h2>home</h2>
    <div>
      <input v-model="color" type="color" @update:model-value="changeColor($event)" />
    </div>
  </div>
</template>

src/views/AboutView.vue

src/views/AboutView.vue
<template>
  <div>
    <span>about</span>
  </div>
</template>

src/App.vue

src/App.vue
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <main>
    <RouterView />
  </main>
</template>

<style>
#app {
  min-width: 300px;
  min-height: 300px;
  background: lemonchiffon;
}
body {
  margin: 0;
}
header {
  height: 30px;
  padding: 5px;
}
nav > * {
  padding-right: 5px;
}
main {
  padding: 5px;
}
</style>

動作確認

1. ビルド

yarn build
  • 上記コマンドを実行することで、distフォルダが出力されます。

2. 拡張機能の読み込み

3. 拡張機能の起動

おわりに

  • Router設定以外は特に変更せずにVue3のWEBサイトをChrome拡張機能に移植することが出来ました。
  • Chrome拡張機能で画面作成時に通常のDOMを操作するより、VueなどのSPAライブラリを使用した方が簡単でメンテも楽で便利ですね。

ソースコード一式

https://github.com/yasu-s/chrome-extension-vue3-sample/tree/demo

関連記事

https://zenn.dev/kakkoyakakko/articles/54fe29dc3751b9

Discussion