Getting Started & Setup
Relevant source files
The following files were used as context for generating this wiki page:
MarketSage is an intelligent marketplace assistant designed as a Chrome Extension to provide scam detection, price analytics, and product discovery across major Chinese marketplaces like Temu, AliExpress, and DHGate. This page covers the architectural prerequisites, build environment configuration, and verification steps necessary to initialize the development environment.
The project utilizes a modern TypeScript stack, leveraging React for the UI components and Webpack for bundling the extension's disparate parts (Background, Content, and Popup scripts).
Sources: package.json:1-5, src/manifest.json:1-10, WHATAMI.txt:1-10
Development Environment Setup
Prerequisites and Dependencies
The project requires Node.js and npm to manage dependencies and execute build scripts. The core engine relies on several critical libraries for its AI and reactive features.
| Dependency | Purpose |
|---|---|
react / react-dom | UI component framework for the popup and overlays |
@tensorflow/tfjs | Machine learning engine for scam detection models |
rxjs | Reactive programming for real-time marketplace monitoring |
@reduxjs/toolkit | State management for cross-component data synchronization |
typescript | Static typing for all core logic and services |
Sources: package.json:23-35, scripts/verify-build.js:31-33
Build Verification Script
MarketSage includes a specialized verification utility located at scripts/verify-build.js. This script acts as a pre-flight check to ensure the environment is correctly configured before attempting a production build. It validates:
- Integrity of
package.jsonandtsconfig.json. - Presence of required dependencies (
react,rxjs,@tensorflow/tfjs). - Chrome Extension requirements in
manifest.json. - Existence of critical core files like
StateManager.tsandErrorHandler.ts.
Sources: scripts/verify-build.js:10-25, scripts/verify-build.js:77-105
Build Architecture & Pipeline
MarketSage uses a multi-entry Webpack configuration to handle the specific requirements of a Chrome Extension, where different scripts run in isolated environments.
Webpack Entry Points
The build process produces three main bundles:
- Popup: The user interface accessible via the extension icon.
- Background: A service worker (
background.js) that manages long-running tasks and API orchestration. - Content: Scripts injected directly into supported marketplace pages (Temu, AliExpress, DHGate).
Sources: config/webpack.common.js:5-10, webpack.config.js:4-9, src/manifest.json:15-30
Build Workflow Diagram
The following diagram illustrates the flow from source code through verification to the final bundled extension:
Explanation: This flow shows how the verify script acts as a gatekeeper before Webpack processes the TypeScript sources into the /dist directory.
Sources: package.json:7-19, config/webpack.common.js:11-20, scripts/verify-build.js:110-120
Configuration and Permissions
Extension Manifest
The src/manifest.json defines the extension's identity and security boundaries. It uses Manifest V3.
| Field | Setting / Requirement |
|---|---|
manifest_version | 3 |
permissions | storage, activeTab, scripting |
host_permissions | *.temu.com, *.aliexpress.com, *.dhgate.com |
background.type | module |
Sources: src/manifest.json:1-25, scripts/verify-build.js:61-75
Development Commands
The build system supports different modes for development and testing.
# Verify the environment and check for missing files
npm run verify
# Start development build with watch mode
npm run dev
# Run all test suites (Unit, Integration, E2E)
npm run test
# Production build
npm run build
Sources: package.json:6-20
Initialization Logic
When the extension is first loaded, the background service worker initializes global settings and state.
Explanation: The initialization sequence ensures that the extension starts with a clean cache and active monitoring indicators.
Sources: src/background/background.ts:6-30
Conclusion
Setting up MarketSage requires a validated TypeScript environment and a proper build of the multi-entry Webpack configuration. By running npm run verify followed by npm run dev, developers can establish a reactive development loop that automatically bundles code for the Chrome runtime while ensuring all AI and security dependencies are present.