Insight & Protect Components

Relevant source files

The following files were used as context for generating this wiki page:

• src/popup/components/insight/EnhancedInsightSection.tsx
• src/popup/components/protect/EnhancedProtectSection.tsx
• src/popup/components/insight/InsightSection.tsx
• src/popup/components/protect/ProtectSection.tsx
• src/background/services/protect/securityAnalyzer.ts
• tests/unit/components/ProtectSection.test.tsx

Introduction

The Insight and Protect components form the core analytical and security layers of the MarketSage browser extension. These modules provide real-time marketplace intelligence, ranging from price history and competitor comparisons to comprehensive security risk assessments. The system is designed with a tiered architecture, offering varying depths of analysis based on the user's security level (basic, enhanced, or premium).

The Insight component focuses on market analytics, helping users identify buying opportunities through value scores and price trends. Simultaneously, the Protect component serves as a security dashboard, utilizing AI-enhanced detection to flag phishing attempts, suspicious sellers, and pricing anomalies to ensure safe transactions.

Sources: src/popup/components/insight/EnhancedInsightSection.tsx:16-24, src/popup/components/protect/EnhancedProtectSection.tsx:25-31, src/background/services/protect/securityAnalyzer.ts:13-20

Architecture and Data Flow

The components follow a client-service pattern where the React-based UI components in the popup communicate with background services via Chrome's messaging API.

Analysis Request Flow

When a user activates a section, the component triggers an analysis of the currently active browser tab. The depth of this analysis is determined by the user's authenticated profile and security tier.

The flow begins with an authentication check. Once verified, the active tab URL is retrieved and sent to the background service for analysis.
Sources: src/popup/components/insight/InsightSection.tsx:23-45, src/popup/components/protect/EnhancedProtectSection.tsx:75-101

Protect Component (Security Dashboard)

The Protect component provides a safety assessment of the current marketplace listing. It evaluates risk through several metrics, primarily a Risk Assessment score and a Seller Trust score.

Security Metrics Calculation

The background SecurityAnalyzer calculates risk based on weighted factors:

• Seller History (40%): Based on historical ratings and sales volume.
• Price Anomaly (30%): Calculated using Z-scores to identify deviations from market averages.
• Listing Quality (30%): Analyzes descriptions, images, and suspicious text patterns.

Metric	Description	Source
Risk Score	0-100 score indicating overall transaction risk.	securityAnalyzer.ts:13
Seller Trust	Rating of the merchant's reliability (0.5 default for new).	securityAnalyzer.ts:54
Warnings	Specific alerts such as "Phishing indicator" or "Suspiciously low price".	securityAnalyzer.ts:15

Sources: src/background/services/protect/securityAnalyzer.ts:13-33, src/popup/components/protect/ProtectSection.tsx:70-85

User Settings and Threat History

Enhanced and Premium users have access to advanced protection toggles and a history of blocked threats.

The interaction allows users to customize protection levels, such as enabling "Advanced Threat Detection" or "Automatic Blocking".
Sources: src/popup/components/protect/EnhancedProtectSection.tsx:49-65, src/popup/components/protect/EnhancedProtectSection.tsx:149-166

Insight Component (Market Analytics)

The Insight component provides pricing intelligence. It helps users understand if the current product price represents good value relative to the market and historical data.

Analytics Data Structure

The component processes complex market data to generate recommendations.

Field	Type	Description
currentPrice	number	The live price of the item on the page.
marketAverage	number	Calculated average from external retailers.
valueScore	number	0-100 rating of the deal's quality.
trend	string	Indicator of price movement (rising, falling, stable).
competitors	Array	Comparative prices from other stores (Enhanced/Premium only).

Sources: src/popup/components/insight/InsightSection.tsx:75-115, src/popup/components/insight/EnhancedInsightSection.tsx:42-49

Value Score Logic

The UI applies styling based on the valueScore received from the analytical services:

• Excellent (>= 80): Typically shown for significant price drops.
• Good (>= 60): Fair value compared to market average.
• Fair (>= 40): Standard pricing.
• Poor (< 40): Potentially overpriced or lack of historical data.

Sources: src/popup/components/insight/InsightSection.tsx:142-147

Tiered Feature Support

Access to detailed information is restricted based on the securityLevel attribute of the User object.

Feature	Basic	Enhanced	Premium
Risk Score	✅	✅	✅
Seller Trust	✅	✅	✅
Competitor Prices	❌	✅	✅
AI-Powered Analysis	❌	❌	✅
Price History Trends	❌	❌	✅
Detailed Security Reports	❌	❌	✅

Sources: src/popup/components/insight/EnhancedInsightSection.tsx:146-150, src/popup/components/protect/EnhancedProtectSection.tsx:206-218

Implementation Details

Message Handling

Components request data using the chrome.runtime.sendMessage API. In the InsightSection, this is wrapped in an effect that triggers on activation:

const fetchPriceAnalytics = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const response = await chrome.runtime.sendMessage({
    type: 'ANALYZE_CURRENT_PAGE'
  });
  if (response.success) {
    setAnalytics(response.data.pricing);
  }
};

Sources: src/popup/components/insight/InsightSection.tsx:23-45

Error Handling and UI States

Both components manage loading, error, and active states. If the background service fails (e.g., cannot scrape a page), a "Retry Analysis" button is provided to re-trigger the message flow.
Sources: tests/unit/components/ProtectSection.test.tsx:70-85, src/popup/components/insight/InsightSection.tsx:61-75

Conclusion

The Insight and Protect components provide a robust interface for both security and financial intelligence within MarketSage. By leveraging background analyzers and a tiered user system, they offer scalable features from basic safety scores to complex market trend analysis. The architecture ensures that high-computation tasks are handled in the background, keeping the popup UI responsive and informative.

Sources: src/popup/components/insight/EnhancedInsightSection.tsx, src/popup/components/protect/EnhancedProtectSection.tsx