Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ivanmem/shikimori-search-extension
Расширение для добавления поисковых кнопок для страницы с конкретным аниме.
https://github.com/ivanmem/shikimori-search-extension
Last synced: about 1 month ago
JSON representation
Расширение для добавления поисковых кнопок для страницы с конкретным аниме.
- Host: GitHub
- URL: https://github.com/ivanmem/shikimori-search-extension
- Owner: ivanmem
- License: mit
- Created: 2024-09-27T22:51:37.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-31T23:23:13.000Z (about 2 months ago)
- Last Synced: 2024-11-01T00:21:12.513Z (about 2 months ago)
- Language: TypeScript
- Size: 154 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebExtension Vite Стартер
A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) стартовый шаблон.
Popup
Options Page
Inject Vue App into the Content Script
## Функции
- ⚡️ **Instant HMR** - используйте **Vite** на dev (больше никаких обновлений!)
- 🥝 Vue 3 - API композиции, синтаксис [``](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) и многое другое!
- 💬 Эффективные коммуникации - на базе [`webext-bridge`](https://github.com/antfu/webext-bridge) и хранилища [VueUse](https://github.com/antfu/vueuse)
- 🦾 [TypeScript](https://www.typescriptlang.org/) - безопасность типов
- 📦 [Автоматический импорт компонентов](./src/components)
- 🌟 [Icons](./src/components) - прямой доступ к иконкам из любого набора иконок
- 🖥 Скрипт контента - Используйте Vue даже в скрипте контента
- 🌍 WebExtension - изоморфное расширение для Chrome, Firefox и др.
- 📃 Динамический `manifest.json` с полной поддержкой типов
## Предварительно упакованный
### WebExtension Libraries
- [`webextension-polyfill`](https://github.com/mozilla/webextension-polyfill) - API браузера WebExtension Polyfill с типами
- [`webext-bridge`](https://github.com/antfu/webext-bridge) - легкая связь между контекстами
### Vite Plugins
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Используйте `browser` и Vue Composition API напрямую без импорта.
- [`unplugin-vue-components`](https://github.com/antfu/vite-plugin-components) - автоимпорт компонентов
- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - иконки как компоненты
- [Iconify](https://iconify.design) - используйте иконки из любых наборов [🔍Icônes](https://icones.netlify.app/)
### Vue Plugins
- [VueUse](https://github.com/antfu/vueuse) - коллекция полезных API-интерфейсов композиции
### Coding Style
- Используйте API композиции с [`<script setup>` SFC синтаксисом](https://github.com/vuejs/rfcs/pull/227)
- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi
### Dev tools
- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - быстрый, экономящий место на диске менеджер пакетов
- [esno](https://github.com/antfu/esno) - Среда выполнения узла TypeScript/ESNext на базе esbuild
- [npm-run-all](https://github.com/mysticatea/npm-run-all) - Запуск нескольких npm-скриптов параллельно или последовательно
- [web-ext](https://github.com/mozilla/web-ext) - Оптимизированный опыт разработки веб-расширений
## Используйте шаблон
### Шаблон GitHub
[Создайте репозиторий из этого шаблона на GitHub](https://github.com/antfu/vitesse-webext/generate).
### Клонировать на локальную версию
Если вы предпочитаете делать это вручную с более чистой историей git
> Если у вас не установлен pnpm, выполните: npm install -g pnpm
```bash
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` - вспомогательные скрипты разработки и комплектации.
### Разработка
```bash
pnpm dev
```
Затем **загрузите расширение в браузер с папкой `extension/`**.
Разработчики Firefox могут вместо этого запустить следующую команду:
```bash
pnpm dev-firefox
```
`web-ext` автоматически перезагружает расширение при изменении файлов `extension/`.
> В то время как Vite в большинстве случаев обрабатывает HMR автоматически, [Extensions Reloader](https://chrome.google.com/webstore/detail/fimgfedafeadlieiabdeeaodndnlbhid) по-прежнему рекомендуется для более чистой жесткой перезагрузки.
## Использование Gitpod
Если у вас есть веб-браузер, вы можете получить полностью предварительно настроенную среду разработки одним щелчком мыши:
[](https://gitpod.io/#https://github.com/antfu/vitesse-webext)
### Сборка
Чтобы собрать расширение, запустите
```bash
pnpm build
```
А затем упакуйте файлы в «расширение», вы можете загрузить `extension.crx` или `extension.xpi` в соответствующее хранилище расширений.
## Credits
[](https://volta.net)
This template is originally made for the [volta.net](https://volta.net) browser extension.
## Variations
This is a variant of [Vitesse](https://github.com/antfu/vitesse), check out the [full variations list](https://github.com/antfu/vitesse#variations).