WebExtension Vite Стартер

A Vite powered WebExtension (Chrome, FireFox, etc.) стартовый шаблон.

<sub>Popup

Options Page

Inject Vue App into the Content Script</sub>

Функции

• ⚡️ Instant HMR - используйте Vite на dev (больше никаких обновлений!)
• 🥝 Vue 3 - API композиции, синтаксис <script setup> и многое другое!
• 💬 Эффективные коммуникации - на базе webext-bridge и хранилища VueUse
• 🦾 TypeScript - безопасность типов
• 📦 Автоматический импорт компонентов
• 🌟 Icons - прямой доступ к иконкам из любого набора иконок
• 🖥 Скрипт контента - Используйте Vue даже в скрипте контента
• 🌍 WebExtension - изоморфное расширение для Chrome, Firefox и др.
• 📃 Динамический manifest.json с полной поддержкой типов

Предварительно упакованный

WebExtension Libraries

• webextension-polyfill - API браузера WebExtension Polyfill с типами
• webext-bridge - легкая связь между контекстами

Vite Plugins

• unplugin-auto-import - Используйте browser и Vue Composition API напрямую без импорта.
• unplugin-vue-components - автоимпорт компонентов
• unplugin-icons - иконки как компоненты
  • Iconify - используйте иконки из любых наборов 🔍Icônes

Vue Plugins

• VueUse - коллекция полезных API-интерфейсов композиции

Coding Style

• Используйте API композиции с <script setup> SFC синтаксисом
• ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools

• TypeScript
• pnpm - быстрый, экономящий место на диске менеджер пакетов
• esno - Среда выполнения узла TypeScript/ESNext на базе esbuild
• npm-run-all - Запуск нескольких npm-скриптов параллельно или последовательно
• web-ext - Оптимизированный опыт разработки веб-расширений

Используйте шаблон

Шаблон GitHub

Создайте репозиторий из этого шаблона на GitHub.

Клонировать на локальную версию

Если вы предпочитаете делать это вручную с более чистой историей git

Если у вас не установлен pnpm, выполните: npm install -g pnpm

npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i

Usage

Folders

• src - основной источник.
  • contentScript — скрипты и компоненты, которые будут внедрены как content_script
  • background - скрипты для фона.
  • компоненты — автоматически импортированные компоненты Vue, которые доступны во всплывающем окне и на странице параметров.
  • styles - стили, используемые во всплывающем окне и на странице настроек.
  • assets — активы, используемые в компонентах Vue.
  • manifest.ts — манифест расширения.
• extension - корень пакета расширения.
  • assets — статические активы (в основном для manifest.json).
  • dist — встроенные файлы, также служат заглушкой для Vite при разработке.
• scripts - вспомогательные скрипты разработки и комплектации.

Разработка

pnpm dev

Затем загрузите расширение в браузер с папкой extension/.

Разработчики Firefox могут вместо этого запустить следующую команду:

pnpm dev-firefox

web-ext автоматически перезагружает расширение при изменении файлов extension/.

В то время как Vite в большинстве случаев обрабатывает HMR автоматически, Extensions Reloader по-прежнему рекомендуется для более чистой жесткой перезагрузки.

Использование Gitpod

Если у вас есть веб-браузер, вы можете получить полностью предварительно настроенную среду разработки одним щелчком мыши:

Сборка

Чтобы собрать расширение, запустите

pnpm build

А затем упакуйте файлы в «расширение», вы можете загрузить extension.crx или extension.xpi в соответствующее хранилище расширений.

Credits

This template is originally made for the volta.net browser extension.

Variations

This is a variant of Vitesse, check out the full variations list.