refactor: migrate to React Query and enhance content script architecture

[saisanthoshpentakota]

This PR modernizes the extension’s data fetching architecture, modularizes the content script, and adds comprehensive test coverage across critical components for improved maintainability, performance, and reliability.

---

Changes Overview

1. React Query Integration for Data Fetching

• Replaced manual storage polling with React Query for reactive state management in SidePanel.

• Added custom hooks for data fetching:

  • useTagConfig: Queries tag configuration from the background script via the message broker.
  • useCurrentTab: Manages current active tab information.

• Enhanced message broker with query support for background-to-UI communication.

• Simplified SidePanel component by removing manual polling logic (~71 lines reduced).

---

2. Content Script Modularization

• Extracted the monolithic content script into focused, maintainable modules:

  • autoDetection.ts: Handles automatic domain detection logic.
  • eventHandler.ts: Manages event handling and delegation.
  • messageHandler.ts: Centralizes message broker communication.
  • scriptInjection.ts: Isolates script injection functionality.

• Reduced complexity in app.tsx by 87% (from 331 lines → 43 lines of actual logic).

• Improved separation of concerns for better testability and maintainability.

---

3. Comprehensive Test Coverage

• Added 1,200+ lines of test coverage across:

  • Content script modules:

    • autoDetection.test.ts
    • eventHandler.test.ts
    • messageHandler.test.ts
    • scriptInjection.test.ts

  • Message broker:

    • broker.test.ts (enhanced with 300+ lines of additional tests)

  • SidePanel component:

    • SidePanel.test.tsx (138 lines)

• Enhanced test utilities in vitest.setup.ts for better Chrome API mocking.

• Validates data fetching patterns, module interactions, and component behavior.

---

⚙️ Technical Details

Dependencies Added

• React Query integration (via existing package updates)

Files Changed

• 13 files modified in the most recent commit:

  • 8 files in content script refactoring
  • 8 files in initial React Query setup

• Net Result:

  • ~1,400 lines added (primarily tests)
  • ~650 lines removed (code simplification)

---

Benefits

✅ Better Performance: React Query handles caching, deduplication, and background updates automatically.
✅ Improved Maintainability: Modular content scripts are easier to test and modify.
✅ Enhanced Reliability: Comprehensive test coverage ensures stable functionality.
✅ Better Developer Experience: Cleaner code structure and reactive data fetching patterns.
✅ v2 Migration Compliance: Follows modern React patterns per project standards.

---

Testing

• All new modules include dedicated test files.
• Message broker enhanced with comprehensive coverage.
• SidePanel component tested using React Testing Library.
• Chrome API interactions properly mocked and validated.

---

🧭 Migration Notes

• No breaking changes to existing functionality.
• Storage polling behavior replaced with React Query equivalents.
• Content script functionality preserved with improved structure.

---

Summary:
This PR modernizes core architecture with React Query, modular content scripts, and robust testing, paving the way for more maintainable and scalable extension development.

---

Related issues: #59

[anupsingh244]

LGTM