# Project Structure

> AutoShopee Kit — Browser extension built with WXT 0.20.20 (Vite-based), Vue 2.

---

## Root Layout

```
AutoShopee Kit/
├── wxt.config.ts           # WXT build config: manifest, aliases, Vite plugins
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── jsconfig.json           # IDE path alias config
├── .eslintrc.js
├── .drone.yml              # CI/CD (Drone, triggers on push to dev)
│
├── entrypoints/            # WXT entry points (file-based, auto-detected)
├── src/                    # Source code
├── dist/                   # Build output (gitignored)
├── docs/                   # Documentation
└── tasks/                  # Build utility scripts (s3.js)
```

---

## Entry Points (`entrypoints/`)

WXT detects entry points by filename convention. All entry point logic is thin wrappers — business logic stays in `src/`.

```
entrypoints/
├── popup/
│   ├── index.html          # Popup HTML template
│   └── main.js             # Vue app bootstrap (imports from src/popup/App.vue)
│
├── options/
│   ├── index.html          # Options page HTML template
│   └── main.js             # Minimal Vue bootstrap (imports from src/options/App.vue)
│
├── background.js           # Service worker — wraps src/background/index.js
│
├── all-ping.content.js               # Ping all pages (keep-alive)
├── all-listener.content.js           # Global message listener
├── shopee-client.content.js          # Shopee buyer/client pages
├── shopee-seller.content.js          # Shopee seller center
├── shopee-seller-chat.content.js     # Shopee seller chat
├── shopee-seller-marketing.content.js
├── shopee-seller-ads.content.js
├── shopee-seller-order.content.js
├── shopee-seller-product.content.js
├── shopee-seller-print.content.js    # world: MAIN (DOM access)
├── shopee-fetch.content.js           # world: MAIN (intercept fetch)
├── lazada.content.js
├── tiki.content.js
├── tiktok.content.js
└── file-pdf.content.js               # PDF viewer pages
```

---

## Source Code (`src/`)

```
src/
├── app/                    # Main Vue application (srcDir for WXT — @ alias points here)
├── background/             # Service worker logic (@background alias)
├── content/                # Content script logic (@content alias)
├── popup/                  # Popup App.vue (root component)
├── options/                # Options App.vue (root component)
├── assets/                 # Images, fonts
├── pdfjs/                  # PDF.js vendor files (pdf.min.js, pdf.worker.min.js)
├── shims/                  # Browser shims for Node built-ins
│   └── os.js               # Shim for 'os' module (pouchdb-browser dependency)
└── types/                  # Global JSDoc type definitions
```

---

## App Source (`src/app/`) — aliased as `@`

```
src/app/
├── adapter/                # Platform data transformers (Shopee, TikTok response → internal model)
├── api/                    # HTTP clients per platform
│   ├── shopee/             # Shopee Seller API, Client API, Affiliate API
│   ├── lazada/
│   ├── tiktok/
│   ├── autoshopee/         # AutoShopee internal REST API
│   └── utils/              # Shared Axios helpers
├── bridge/                 # webext-bridge wrappers (popup/options ↔ background ↔ content)
│   ├── background/         # Called FROM background, sends TO content
│   ├── content/            # Called FROM content, sends TO background
│   ├── options/            # Called FROM options page
│   ├── shopee/             # Shopee-specific bridge helpers
│   └── config/             # Event name constants, bridge API setup
├── browser/                # Chrome extension API wrappers (chrome.tabs, chrome.storage...)
│   └── api.js              # Exports: browseTab*, browserStorage*, browserAlarms...
├── composables/            # Vue composable helpers
├── config/                 # App-level constants
│   └── env.js              # isDevMode, API URLs (reads import.meta.env.VITE_*)
├── constant/               # Enums, storage keys, usage limits
├── data/                   # Static data, templates, category lists
├── lib/                    # Utility functions
│   └── utils/moment.js     # Moment.js wrapper (locale vi, ESM-safe)
├── models/                 # PouchDB data models (product, order, shop)
├── service/                # Business logic services (print, flash sale, shop sync)
├── socket/                 # Socket.io real-time communication
├── types/                  # JSDoc type definitions (@type alias points here)
├── validator/              # Joi validation schemas
│
└── vue/                    # Vue-specific layer (components, store, router, plugins)
    ├── components/         # Vue components, organized by platform
    │   ├── Layout/
    │   ├── Plugin/         # Shared UI components (LoadingApp, AlertVip, InputTag...)
    │   ├── Shopee/
    │   ├── Lazada/
    │   ├── Tiktok/
    │   └── Pdf/
    ├── views/              # Vue pages (mapped to router routes)
    ├── router/
    │   ├── index.js        # Vue Router setup + route definitions
    │   ├── middleware.js   # beforeEach guards, store init, service worker keep-alive
    │   ├── shopee.js       # Shopee routes
    │   └── tiktok.js       # TikTok routes
    ├── store/              # Vuex store
    │   ├── index.js        # Store root
    │   └── modules/        # Vuex modules (app, user, shop, shopee/*, lazada, tiktok/*)
    ├── pinia/              # Pinia stores (supplementary)
    │   ├── setup.js        # createPinia() + persistedstate plugin
    │   ├── user.js
    │   ├── usage.js
    │   └── shopee/
    ├── mixin/              # Vue global mixins (filter, store, menu helpers)
    ├── plugins/            # Vue plugins
    │   ├── loader.js       # Registers all global Vue plugins + components
    │   ├── i18n/           # vue-i18n setup + vi/en locale files
    │   └── image.js        # VueLazyload config
    └── styles/             # Global SCSS/CSS
```

---

## Background (`src/background/`) — aliased as `@background`

```
src/background/
├── index.js                # Service worker init: listeners, keep-alive, shop identify
├── bridge/                 # webext-bridge message handlers (listens from popup/content)
│   ├── listener/           # Event handlers per platform
│   └── global.js           # Bridge setup
├── shopee/                 # Shopee background tasks (shop sync, flash sale scheduler)
├── tiktok/
├── lazada/
├── service/                # Background services (user session refresh)
├── fetch/                  # Metric fetch helpers
└── get.js                  # Background data getters
```

---

## Content Scripts (`src/content/`) — aliased as `@content`

```
src/content/
├── all/                    # Runs on all pages
│   └── listener.js         # Global chrome.runtime.onMessage listener
├── shopee/
│   ├── client/             # Shopee buyer pages
│   ├── seller/             # Shopee seller center scripts
│   │   ├── loader.js       # Main content init
│   │   ├── chat/           # Chat automation
│   │   ├── marketing/      # Bulk message, reply rating
│   │   ├── ads/            # Ads management
│   │   ├── order/          # Order processing
│   │   ├── product/        # Product management
│   │   └── print.js        # Order print (runs in DOM)
│   └── script/fetch.js     # Fetch interceptor (world: MAIN)
├── lazada/
├── tiki/
├── tiktok/
├── file/                   # PDF viewer content script
└── service/                # Shared content utilities (event relay, DOM helpers)
```

---

## Path Aliases

| Alias | Resolves to | Usage |
|---|---|---|
| `@` | `src/app/` | Main app code |
| `@content` | `src/content/` | Content script logic |
| `@background` | `src/background/` | Background service worker logic |
| `@type` | `src/app/types/` | JSDoc type imports |

Aliases are defined in `wxt.config.ts` (`alias` field + `srcDir: 'src/app'`).  
Also configured in `jsconfig.json` for IDE intellisense and `.eslintrc.js` for ESLint import resolution.

---

## Build Output (`dist/`)

```
dist/
├── chrome-mv3/             # Production Chrome build (npm run build:chrome)
├── chrome-mv3-dev/         # Development Chrome build (npm run build:dev)
└── firefox-mv2/            # Firefox build (npm run build:firefox)
```

Load `dist/chrome-mv3-dev/` vào Chrome (`chrome://extensions` → Load unpacked) để test thủ công.

---

## Key Files

| File | Mục đích |
|---|---|
| `wxt.config.ts` | WXT config: manifest, aliases, Vite plugins, polyfills |
| `entrypoints/popup/main.js` | Popup Vue app bootstrap |
| `src/popup/App.vue` | Popup root component |
| `src/options/App.vue` | Options page root component |
| `src/app/config/env.js` | Env vars (`isDevMode`, API base URLs) |
| `src/app/browser/api.js` | Chrome API wrappers |
| `src/app/vue/router/middleware.js` | Route guards + service worker keep-alive |
| `src/background/index.js` | Service worker entry (wakeUp listener, shop init) |
| `src/shims/os.js` | `os` module shim for pouchdb-browser |
| `src/app/lib/utils/moment.js` | Moment.js singleton (vi locale, ESM-safe) |
