AddFox
  • Русский

      • Vue

      Addfox полностью поддерживает Vue 3, можно использовать однофайловые компоненты .vue для разработки расширений.

      Установка

      Выберите шаблон Vue при создании проекта:

      pnpm create addfox-app --framework vue

      Или установите в существующий проект:

      pnpm
      npm
      yarn
      bun
      pnpm add @addfox/rsbuild-plugin-vue

      Конфигурация

      // addfox.config.ts
import { defineConfig } from "addfox";
import { pluginVue } from "@addfox/rsbuild-plugin-vue";

export default defineConfig({
  plugins: [pluginVue()],
});

      Поддержка TSX/JSX

      Плагин @addfox/rsbuild-plugin-vue поддерживает как Vue SFC (.vue), так и TSX/JSX без дополнительной конфигурации.

      Ручная настройка (если не используете @addfox/rsbuild-plugin-vue)

      Если вы предпочитаете использовать официальные плагины Rsbuild вручную, вам необходимо установить дополнительные зависимости:

      pnpm
      npm
      yarn
      bun
      pnpm add @rsbuild/plugin-babel @rsbuild/plugin-vue @rsbuild/plugin-vue-jsx -D
      // addfox.config.ts
import { defineConfig } from "addfox";
import pluginBabel from "@rsbuild/plugin-babel";
import pluginVue from "@rsbuild/plugin-vue";
import pluginVueJsx from "@rsbuild/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    pluginBabel({ include: /\.(?:jsx|tsx)$/ }),
    pluginVue(),
    pluginVueJsx(),
  ],
});

      Структура проекта

      app/
├── background/
│   └── index.ts
├── content/
│   └── index.ts
├── popup/
│   ├── App.vue
│   ├── index.html
│   └── index.ts
├── options/
│   ├── App.vue
│   ├── index.html
│   └── index.ts
└── manifest.json

      Пример кода

      <!-- app/popup/App.vue -->
<template>
  <div class="popup">
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const title = ref('Hello Vue!');
const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<style scoped>
.popup {
  padding: 16px;
  min-width: 200px;
}

h1 {
  font-size: 18px;
  margin-bottom: 12px;
}

button {
  padding: 8px 16px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
      // app/popup/index.ts
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#root');

      Если опустить следующий index.html и оставить только index.ts, сборка автоматически сгенерирует HTML, содержащий id="root", title и favicon, синхронизированные с manifest.name / manifest.icons (см. Entry на основе файлов). Следующий пример является опциональным пользовательским шаблоном:

      <!-- app/popup/index.html (опционально; при пользовательском шаблоне необходимо самостоятельно написать title / иконку) -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Popup</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./index.ts" data-addfox-entry></script>
  </body>
</html>

      Content Script

      // app/content/index.ts
import { createApp } from 'vue';
import ContentApp from './ContentApp.vue';

// Создание точки монтирования
const container = document.createElement('div');
container.id = 'my-extension-root';
document.body.appendChild(container);

createApp(ContentApp).mount(container);
      <!-- app/content/ContentApp.vue -->
<template>
  <div class="content-widget">
    <p>Hello from Vue Content Script!</p>
  </div>
</template>

<style scoped>
.content-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}
</style>

      Управление состоянием

      Pinia

      pnpm add pinia
      // app/stores/counter.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});
      // app/popup/index.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#root');

      VueUse

      pnpm add @vueuse/core
      <script setup>
import { useStorage } from '@vueuse/core';

// Автоматическая синхронизация с chrome.storage
const count = useStorage('count', 0);
</script>

      Взаимодействие с Chrome API

      <script setup lang="ts">
import { ref, onMounted } from 'vue';

const tabs = ref<chrome.tabs.Tab[]>([]);

onMounted(async () => {
  tabs.value = await chrome.tabs.query({});
});

const activateTab = (tabId: number) => {
  chrome.tabs.update(tabId, { active: true });
};
</script>

<template>
  <ul>
    <li 
      v-for="tab in tabs" 
      :key="tab.id"
      @click="activateTab(tab.id!)"
    >
      {{ tab.title }}
    </li>
  </ul>
</template>

      CSS решения

      Tailwind CSS

      pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
      /* app/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
      <template>
  <div class="p-4 bg-gray-100">
    <h1 class="text-xl font-bold text-blue-600">Hello Tailwind!</h1>
  </div>
</template>

      Scoped CSS

      Однофайловые компоненты Vue изначально поддерживают scoped CSS:

      <style scoped>
.button {
  background: #42b883;
}

/* Глубокий селектор */
:deep(.child) {
  color: red;
}
</style>

      Связанные ссылки