develop.md

vite-vue3-browser-extension-v3

Directory Structure

.
├── .translations           # auto-generated translation files
│   ├── deepl.EN.json       # English input for translation script
├── dist                    # Built extension files
│   ├── chrome              # Chrome-specific build
│   └── firefox             # Firefox-specific build
├── docs                    # documentation
│   ├── ChromeStoreDescriptions # Chrome store descriptions
│   ├── storeDescriptions   # Firefox store descriptions
│   ├── HtmlButtons         # Some downloaded html buttons
│   ├── icon                # copy of used icons and logos
│   ├── Logos               # Images used in Readme
│   ├── Screenshots         # Screenshots of the extension
├── graph                   # chrome and firefox user statistics
├── scripts                 # Build/dev scripts
├── src                     # Source code
│   ├── assets              # Global assets (images, styles)
│   ├── background          # Extension background script
│   ├── components          # Shared Vue components
│   ├── composables         # Vue composables/hooks
│   ├── content-script      # Content scripts injected into pages
│   ├── locales             # i18n translation files
│   ├── stores              # Pinia stores
│   ├── types               # TypeScript type definitions
│   ├── ui                  # UI pages
│   │   ├── action-popup    # Browser toolbar popup
│   │   ├── options-page    # Extension options
│   └── utils               # Shared utilities
├── manifest.config.ts      # Base manifest configuration
├── vite.config.ts          # Base Vite configuration
├── tailwind.config.cjs     # Tailwind CSS configuration
└── package.json            # Project dependencies and scripts

Environment variables

Create .env file in the root of the project with the following content:

DEEPL_API_KEY=...
TMDB_TOKEN=...

Author Commands

• npm run transDeepL translate .translation/deepl.EN.json and output them into the locales files directly
• npm run hours calculate the hours spent on the project
• npm run copyDocsFtoC copy the docs from the firefox folder to the chrome folder
• web-ext sign --channel listed --api-key $env:AMO_JWT_ISSUER --api-secret $env:AMO_JWT_SECRET sign the extension for release.
• web-ext sign --channel unlisted --api-key %AMO_JWT_ISSUER% --api-secret %AMO_JWT_SECRET% sign the extension for unlisted release.

Firefox review:

Firefox reviewers install instructions:

• npm install install all required packages
• npm run build:firefox build firefox zip file for release.

Development tools

Vite Plugins

• unplugin-vue-router - File system based route generator for Vite
• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• unplugin-icons - icons as components
• @intlify/unplugin-vue-i18n - unplugin for Vue I18n

Vue Plugins

• Pinia - Intuitive, type safe, light and flexible Store for Vue
• VueUse - collection of useful composition APIs
• Vue-i18n - Internationalization plugin for Vue.js

Plugins

• Marked - A markdown parser and compiler. Used for CHANGELOG.md to show in Update page

UI Frameworks

• tailwindcss - A utility-first CSS framework
• daisyUI - The most popular component library for Tailwind CSS

WebExtension Libraries

• webext-bridge - effortlessly communication between contexts
• webextension-polyfill - A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

Coding Style

• TypeScript - Typed JavaScript at Any Scale
• ESLint - Linting utility for JavaScript and JSX
• Prettier - Code formatter
• Use Composition API with <script setup> SFC syntax
• Use Composition API with setup SFC syntax in Pinia stores

Browser Related Configurations

• manifest.config.ts - Base extension manifest with common configuration
• manifest.chrome.config.ts - Chrome/ chromium based browsers specific manifest
• manifest.firefox.config.ts - Firefox spefic manifest
• vite.config.ts - Base vite configuration
• vite.chrome.config.ts - Chrome/ chromium based browsers specific vite configuration
• vite.firefox.config.ts - Firefox specific vite configuration