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
│   │   ├── iframe-page     # Content script app injected into pages by content script
│   │   ├── 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

Formatting and Linting Commands

• pnpm format run prettier on all files
• pnpm lint run esLint
• pnpm lint:manifest web-ext lint manifest files

Author Commands

• pnpm transDeepL translate .translation/deepl.EN.json and output them into the locales files directly
• pnpm hours calculate the hours spent on the project
• pnpm copyDocsFtoC copy the docs from the firefox folder to the chrome folder
• pnpm firefox run extension with permanent firefox profile

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
• unplugin-turbo-console - Improve the Developer Experience of console
• @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
• Notivue - toast notification system
• 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