Extension Popup Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The MarketSage Extension Popup serves as the primary user interface for the intelligent marketplace assistant. It provides a modular, React-based environment where users can access AI-powered scam detection, price analytics, and product discovery tools directly within their browser. The architecture is designed to be highly responsive, utilizing a component-based structure that communicates asynchronously with background service workers and content scripts to analyze active marketplace tabs.
Sources: src/manifest.json, src/popup/components/enhanced/EnhancedUI.tsx, src/popup/components/scout/EnhancedScoutSection.tsx:75-85
Core UI Framework
The popup is built using a custom library of "Enhanced UI" components. This library provides standardized, accessible, and themed elements such as Buttons, Cards, Modals, and Progress bars. The UI follows a strict modular pattern where functional sections (Scout, Insight, Protect) are rendered based on an active state, typically managed by a top-level navigation system.
Sources: src/popup/components/enhanced/EnhancedUI.tsx:10-500, src/popup/components/scout/EnhancedScoutSection.tsx:140-150
Foundational UI Components
| Component | Description | Key Properties |
|---|---|---|
Button | Standardized interactive element with loading and icon support. | variant, size, loading, iconPosition |
Card | Container for grouping related information with multiple visual variants. | variant, padding, clickable |
Tabs | Navigation component for switching between different popup modules. | items, activeTab, variant |
Progress | Visual indicator for scores (e.g., Value Score, Risk Score). | value, max, showLabel |
Toggle | Switch for user preferences and settings. | checked, label, description |
Sources: src/popup/components/enhanced/EnhancedUI.tsx:15-450
Functional Modules
The popup architecture divides features into specialized sections, each responsible for a specific domain of marketplace analysis.
Product Scout Section
The Scout module handles product discovery and comparison. it utilizes an EnhancedScoutSection that allows users to search for products across supported platforms like Temu, AliExpress, and DHGate. It supports filtering by price, rating, and availability, and maintains a local "Watchlist" via localStorage.
Sources: src/popup/components/scout/EnhancedScoutSection.tsx:45-70, src/manifest.json:20-25
Insight & Price Analytics
The InsightSection focuses on financial intelligence. It communicates with the background priceAnalyzer to retrieve current market averages, historical price trends, and value ratings.
Sources: src/popup/components/insight/InsightSection.tsx:20-55
Protection & Security Section
The ProtectSection (evidenced through unit tests) provides a security dashboard. It displays metrics such as risk scores and seller trust levels. It triggers security analysis by sending messages to the extension's background script.
Sources: tests/unit/components/ProtectSection.test.tsx:40-65
Data Flow and Communication
The popup operates as a client in the extension's message-passing ecosystem. It does not perform heavy computation; instead, it requests data from background services or content scripts.
Extension Communication Flow
The following diagram illustrates how the Popup requests analysis of the current marketplace page.
Build and Configuration
The popup is bundled using Webpack. The entry point is defined as src/popup/index.tsx, which is injected into the public/popup.html template.
Webpack Entry Configuration
module.exports = {
entry: {
popup: path.resolve(__dirname, '..', 'src/popup/index.tsx'),
background: path.resolve(__dirname, '..', 'src/background/index.ts'),
content: path.resolve(__dirname, '..', 'src/content/index.ts'),
},
// ...
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', 'public/popup.html'),
filename: 'popup.html',
chunks: ['popup'],
}),
]
};
Sources: config/webpack.common.js:7-11, config/webpack.common.js:58-62
Summary
The MarketSage Popup Architecture is a modular React application optimized for the Chrome Extension environment. By leveraging a centralized UI component library and a robust messaging protocol with background services, it provides real-time marketplace insights without impacting the performance of the host marketplace page. Its structure allows for easy expansion of new analytical modules like "Scout" or "Protect" while maintaining a consistent user experience.