A professional-grade Chrome extension for real-time monitoring, visualization, and analysis of web analytics and marketing tracking requests. Built with modern web technologies and a privacy-first approach.
🚀 Modern Architecture • 🔒 Privacy-First • ⚡ High Performance • 🧩 Extensible
PixelTracer helps developers, marketers, and QA engineers understand web tracking implementations with unprecedented visibility and control. Built on a modern monorepo architecture with TypeScript, React, and Chrome Manifest V3, it provides professional-grade tools for debugging and monitoring analytics implementations.
- Instant Detection: Monitor tracking requests as they happen with zero latency
- Side Panel Interface: Professional dashboard built on Chrome's Side Panel API
- Virtual Scrolling: Handle thousands of events smoothly without performance impact
- Live Statistics: Real-time counters for events, providers, and errors
- Modern Design: Built with shadcn/ui components and Tailwind CSS
- Dark/Light Themes: Comfortable viewing in any environment
- Responsive Layout: Optimized for Chrome's side panel and popup interfaces
- Keyboard Navigation: Full keyboard shortcuts for power users
- Parameter Grouping: Intelligent categorization of tracking parameters
- Business Context: Human-readable explanations of technical data
- Provider Confidence: Scoring system to identify the best matches
- Event Enrichment: Provider-specific insights and metadata
- Multi-format Export: CSV, JSON, and HAR export options
- Web Workers: Offload processing from main thread for smooth performance
- Memory Management: Automatic cleanup and configurable limits
- Request Deduplication: Intelligent caching to avoid redundant processing
- Batch Processing: Efficient handling of high-traffic sites
- Provider System: Easy-to-extend pattern for adding new tracking services
- Monorepo Structure: Clean separation of concerns with multiple packages
- TypeScript: Full type safety with strict mode enabled
- Comprehensive Testing: Unit and integration tests with high coverage
PixelTracer is built as a modern monorepo with the following packages:
pixeltracer/
├── apps/
│ └── chrome-extension/ # Chrome extension application
├── packages/
│ ├── shared/ # Common types and utilities
│ ├── core/ # Core engine and processing
│ ├── providers/ # Tracking provider implementations
│ └── ui/ # React component library
├── docs/ # Comprehensive documentation
└── scripts/ # Build and release automation
@pixeltracer/shared→ Common types and constants@pixeltracer/core→ Event processing engine with Web Workers@pixeltracer/providers→ Extensible provider system@pixeltracer/ui→ React components with shadcn/ui- Chrome Extension → Integrates all packages
-
Google Ecosystem
- Google Ads & AdWords
-
Social Media Platforms
- Facebook/Meta Pixel
- TikTok Pixel
Adding new providers is straightforward with our provider pattern. Each provider implements:
- URL pattern matching
- Parameter extraction and parsing
- Confidence scoring
- Business context enrichment
- Parameter grouping for UI display
- Open the store listing: PixelTracer
- Click "Add to Chrome"
- Confirm the installation and permissions
- Node.js 20+ and pnpm 8+
- Git
- Chrome browser (version 114+ recommended for Side Panel support)
# Clone the repository
git clone https://github.com/amitray007/pixeltracer.git
cd pixeltracer
# Install dependencies (uses pnpm workspaces)
pnpm install
# Build all packages
pnpm build
# Load the extension in Chrome
# 1. Open chrome://extensions
# 2. Enable "Developer mode"
# 3. Click "Load unpacked"
# 4. Select apps/chrome-extension/dist# Start development mode (watches all packages)
pnpm dev
# Build specific packages
pnpm build:packages # Build only packages/*
pnpm build:apps # Build only apps/*
# Run tests
pnpm test # All tests
pnpm test:ui # Tests with UI
pnpm test:coverage # Generate coverage
# Code quality
pnpm type-check # TypeScript checking
pnpm format # Prettier formattingThe main interface is accessed via Chrome's Side Panel (Chrome 114+):
- Open Side Panel: Click the PixelTracer icon in your browser toolbar
- Real-time Dashboard: View live statistics and event counters
- Event Stream: Scroll through tracking events with virtual scrolling
- Advanced Filters: Filter by provider, event type, or custom criteria
- Export Options: Download data in CSV, JSON, or HAR formats
Dashboard Features:
- 📈 Live Statistics: Real-time counters and metrics
- 🔍 Smart Search: Search across all event parameters
- 🏷️ Provider Grouping: Organize events by tracking service
- ⚙️ Advanced Filters: Complex filtering with multiple criteria
- 📊 Performance Metrics: Memory usage and processing statistics
Click the extension icon for quick access:
- Summary Statistics: Total events and provider count
- Quick Controls: Export, clear data, settings
- Status Indicators: Current tracking status and health
- Direct Actions: One-click access to common tasks
Click any tracking event to view detailed analysis:
- Provider information and confidence score
- Event type and timestamp
- Account/Property IDs
- Business context and insights
- Marketing or analytics event data
- E-commerce details (for purchase events)
- Custom event parameters
- User and session identifiers
- Intelligent parameter grouping
- Human-readable parameter names
- Value formatting and validation
- Parameter documentation links
- HTTP headers and metadata
- Request payload/body
- Response information
- Network timing data
PixelTracer's provider system makes it easy to add support for new tracking services:
// packages/providers/src/my-provider/my-provider.ts
import { BaseProvider } from '../base/base-provider'
export class MyProvider extends BaseProvider {
constructor() {
super({
id: 'my-provider',
name: 'My Tracking Service',
version: '1.0.0',
patterns: {
urlPatterns: [/https:\/\/api\.myservice\.com\/track/],
domains: ['myservice.com']
}
})
}
async calculateCustomConfidence(request: RequestData): Promise<number> {
// Return confidence score 0.0 - 1.0
return request.url.includes('/track') ? 0.9 : 0.0
}
async parseParameters(request: RequestData): Promise<Record<string, any>> {
// Extract and parse parameters
const params = Object.fromEntries(new URL(request.url).searchParams)
return params
}
// Implement other required methods...
}Register the provider:
// packages/providers/src/registry/default-providers.ts
import { MyProvider } from '../my-provider'
export function createDefaultRegistry(): ProviderRegistry {
const registry = new ProviderRegistry()
// Register existing providers...
registry.register(new MyProvider())
return registry
}Explore our detailed documentation:
- 📖 Getting Started - Complete developer guide
- 🏗️ Architecture - Technical architecture overview
- 🎨 Design System - UI/UX guidelines
- 🗺️ Roadmap - Future plans and vision
- 📝 Changelog - Version history
- 100% Local Processing: All analysis happens in your browser
- Zero Data Collection: No tracking, analytics, or data transmission
- Minimal Permissions: Only essential Chrome extension permissions
- Open Source: Full transparency with public source code
- Web Workers: Heavy processing offloaded from main thread
- Virtual Scrolling: Smooth handling of 10,000+ events
- Memory Management: Automatic cleanup with configurable limits
- Request Deduplication: Smart caching prevents redundant work
- Batch Processing: Efficient handling of high-traffic sites
Performance Metrics:
- < 50MB memory footprint
- Sub-10ms event processing
- Support for 1000+ events/second
- Zero impact on host page performance
🚫 No Events Detected
# Check if tracking is enabled for the current tab
# Refresh the page to start monitoring
# Verify Chrome version supports Side Panel (114+)🐛 Extension Not Loading
# Clear extension data and reload
pnpm clean && pnpm install && pnpm build
# Reload extension in chrome://extensions💾 Memory Issues
- Adjust event limits in settings
- Clear old events regularly
- Close unused tabs to free memory
🔄 Build Problems
# Clean and reinstall dependencies
pnpm clean
pnpm install
pnpm build
# Check Node.js and pnpm versions
node --version # Should be 20+
pnpm --version # Should be 8+We welcome contributions from developers of all skill levels!
-
Fork & Clone
git clone https://github.com/amitray007/pixeltracer.git cd pixeltracer -
Install Dependencies
pnpm install
-
Start Development
pnpm dev # Starts watch mode for all packages -
Make Changes & Test
pnpm test # Run tests pnpm type-check # TypeScript validation pnpm format # Code formatting
-
Submit PR
- Create feature branch
- Make your changes
- Add tests if needed
- Submit pull request
- 🆕 Add New Providers - Support for additional tracking services
- 🎨 UI/UX Improvements - Enhance user experience
- 🔧 Performance Optimization - Make it faster and more efficient
- 📖 Documentation - Improve guides and examples
- 🐛 Bug Reports - Help us identify and fix issues
- 💡 Feature Suggestions - Share ideas for improvements
Detailed Guide: See our Contributing Guide for comprehensive information on development workflow, coding standards, and project structure.
Core Technologies:
- TypeScript 5.4+ - Type safety and developer experience
- React 18 - Modern UI with hooks and concurrent features
- Chrome Manifest V3 - Latest extension platform
- pnpm Workspaces - Efficient monorepo management
- Vite - Fast build tooling and HMR
UI/UX:
- shadcn/ui - Modern, accessible component library
- Tailwind CSS - Utility-first styling
- Lucide React - Beautiful, consistent icons
- Radix UI - Low-level, accessible primitives
Development & Testing:
- Vitest - Fast unit testing framework
- Testing Library - Component testing utilities
- ESLint & Prettier - Code quality and formatting
- GitHub Actions - Automated CI/CD pipeline
Performance & Architecture:
- Web Workers - Background processing
- Virtual Scrolling - Efficient large list rendering
- Event Bus System - Decoupled component communication
- Provider Pattern - Extensible service detection
- Status: Active development
- Chrome Web Store: Available — Install from the Chrome Web Store
- Browser Support: Chrome 114+ (Side Panel API)
- License: MIT License
PixelTracer builds upon the excellent work of the web development community:
- Omnibug - Inspiration for provider patterns and UI concepts
- Chrome DevTools - UX patterns and developer ergonomics
- shadcn/ui - Beautiful, accessible component system
- Radix UI - Foundational primitive components
- Lucide - Elegant icon library
- Open Source Community - Tools, libraries, and inspiration
- GitHub Issues: Report bugs and request features
- GitHub Discussions: Ask questions and share ideas
- Documentation: Comprehensive guides and API docs
- Contributing: Help improve PixelTracer
MIT License - see LICENSE for details.
🔍 Making the invisible web visible
Made with ❤️ for developers, marketers, and privacy advocates worldwide