Package Exports

@yaseratiar/react-responsive-easy-browser-extension
@yaseratiar/react-responsive-easy-browser-extension/dist/background.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@yaseratiar/react-responsive-easy-browser-extension) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@yaseratiar/react-responsive-easy-browser-extension

Enterprise-grade browser extension for React Responsive Easy visual debugging and development tools

🌟 Overview

@yaseratiar/react-responsive-easy-browser-extension is a powerful browser extension that provides comprehensive visual debugging and development tools for React Responsive Easy applications.

Built for enterprise applications, it offers:

Visual Debugging - See responsive values in real-time with visual overlays
Breakpoint Preview - Test responsive behavior instantly across all breakpoints
Performance Monitoring - Track responsive performance and optimization metrics
Developer Tools - Integrated debugging panel with advanced features
Cross-browser Support - Works on Chrome, Firefox, Edge, and Safari

🚀 Features

Core Debugging

Visual Overlays - Real-time responsive value visualization
Breakpoint Switching - Instant breakpoint testing and preview
Responsive Inspector - Inspect responsive properties and values
Live Updates - Real-time responsive value changes

Development Tools

Developer Panel - Integrated debugging interface
Performance Metrics - Responsive performance monitoring
Error Reporting - Responsive error detection and reporting
Configuration Editor - Live responsive configuration editing

Browser Integration

Chrome Extension - Full Chrome DevTools integration
Firefox Add-on - Firefox Developer Tools compatibility
Edge Extension - Microsoft Edge DevTools support
Safari Extension - Safari Web Inspector integration

Enterprise Features

Type Safety - Full TypeScript support with type checking
Configuration Validation - Validate extension configuration
Environment Support - Different features for dev/prod builds
Integration APIs - RESTful APIs for external system integration

📦 Installation

Chrome/Edge

Download from Chrome Web Store (coming soon)

Or build from source:

npm install @yaseratiar/react-responsive-easy-browser-extension
npm run build:chrome

Firefox

Download from Firefox Add-ons (coming soon)

Or build from source:

npm install @yaseratiar/react-responsive-easy-browser-extension
npm run build:firefox

Safari

Download from Safari Extensions Gallery (coming soon)

Or build from source:

npm install @yaseratiar/react-responsive-easy-browser-extension
npm run build:safari

Manual Installation

# Clone repository
git clone https://github.com/naaa-G/react-responsive-easy.git

# Install dependencies
pnpm install

# Build extension
pnpm --filter=@yaseratiar/react-responsive-easy-browser-extension build

# Load extension in browser
# Chrome: chrome://extensions/ → Load unpacked → select dist/chrome
# Firefox: about:debugging → This Firefox → Load Temporary Add-on → select manifest.json

🎯 Quick Start

1. Install the Extension

Download and install the extension for your browser from the respective store.

2. Navigate to a React Responsive Easy App

Visit any website that uses React Responsive Easy.

3. Open Developer Tools

Chrome/Edge: Press F12 or Ctrl+Shift+I
Firefox: Press F12 or Ctrl+Shift+I
Safari: Press Cmd+Option+I

4. Use the React Responsive Easy Panel

Look for the "React Responsive Easy" tab in the Developer Tools panel.

⚙️ Configuration

Extension Settings

Access extension settings through the browser's extension management page:

{
  "debugMode": false,
  "showVisualOverlays": true,
  "breakpointPreview": true,
  "performanceMonitoring": true,
  "autoRefresh": false,
  "theme": "auto"
}

Website Configuration

Add configuration to your React Responsive Easy app:

import { ResponsiveProvider } from '@yaseratiar/react-responsive-easy-core';

function App() {
  return (
    <ResponsiveProvider
      config={responsiveConfig}
      // Extension configuration
      extension={{
        enabled: true,
        debugMode: process.env.NODE_ENV === 'development',
        showOverlays: true,
        performanceTracking: true
      }}
    >
      <YourApp />
    </ResponsiveProvider>
  );
}

Environment Variables

# Enable extension debugging
RRE_EXTENSION_DEBUG=true

# Enable performance monitoring
RRE_PERFORMANCE_MONITORING=true

# Enable visual overlays
RRE_VISUAL_OVERLAYS=true

🔧 API Reference

Extension API

`useExtension`

Hook for accessing extension functionality.

import { useExtension } from '@yaseratiar/react-responsive-easy-browser-extension';

function Component() {
  const { 
    isExtensionActive, 
    showOverlay, 
    hideOverlay, 
    switchBreakpoint 
  } = useExtension();
  
  return (
    <div>
      {isExtensionActive && (
        <button onClick={() => showOverlay()}>
          Show Responsive Overlay
        </button>
      )}
    </div>
  );
}

`ExtensionProvider`

Provider component for extension functionality.

import { ExtensionProvider } from '@yaseratiar/react-responsive-easy-browser-extension';

function App() {
  return (
    <ExtensionProvider
      config={{
        enabled: true,
        debugMode: process.env.NODE_ENV === 'development',
        showOverlays: true,
        performanceTracking: true
      }}
    >
      <YourApp />
    </ExtensionProvider>
  );
}

Configuration Schema

interface ExtensionConfig {
  // Core options
  enabled: boolean;
  debugMode: boolean;
  
  // Visual options
  showOverlays: boolean;
  overlayTheme: 'light' | 'dark' | 'auto';
  overlayPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  
  // Debugging options
  breakpointPreview: boolean;
  responsiveInspector: boolean;
  performanceMonitoring: boolean;
  
  // Development options
  liveEditing: boolean;
  errorReporting: boolean;
  logging: boolean;
}

🚀 Advanced Usage

Custom Visual Overlays

import { useExtension, ResponsiveOverlay } from '@yaseratiar/react-responsive-easy-browser-extension';

function CustomOverlay() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <ResponsiveOverlay
      position="top-right"
      theme="dark"
      showBreakpoint={true}
      showResponsiveValues={true}
      showPerformanceMetrics={true}
    />
  );
}

Performance Monitoring

import { useExtension, PerformanceMonitor } from '@yaseratiar/react-responsive-easy-browser-extension';

function PerformanceTracking() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <PerformanceMonitor
      metrics={['renderTime', 'breakpointSwitch', 'responsiveCalculations']}
      threshold={100} // 100ms
      onThresholdExceeded={(metric, value) => {
        console.warn(`${metric} exceeded threshold: ${value}ms`);
      }}
    />
  );
}

Breakpoint Testing

import { useExtension, BreakpointTester } from '@yaseratiar/react-responsive-easy-browser-extension';

function BreakpointTesting() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <BreakpointTester
      breakpoints={['mobile', 'tablet', 'desktop']}
      autoSwitch={false}
      onBreakpointChange={(breakpoint) => {
        console.log(`Switched to: ${breakpoint.name}`);
      }}
    />
  );
}

Error Reporting

import { useExtension, ErrorReporter } from '@yaseratiar/react-responsive-easy-browser-extension';

function ErrorReporting() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <ErrorReporter
      onError={(error, context) => {
        // Send error to reporting service
        fetch('/api/errors', {
          method: 'POST',
          body: JSON.stringify({ error, context })
        });
      }}
      includeStackTraces={true}
      includePerformanceData={true}
    />
  );
}

🛠️ Development Tools

Developer Panel

The extension provides a comprehensive developer panel with:

Responsive Inspector

Live Values: Real-time responsive value display
Breakpoint Info: Current breakpoint details
Configuration: Live responsive configuration editing
Performance: Performance metrics and optimization suggestions

Visual Debugger

Overlay Controls: Toggle visual overlays
Breakpoint Preview: Test different breakpoints
Responsive Grid: Visual grid system for responsive layouts
Element Inspector: Inspect individual responsive elements

Performance Monitor

Real-time Metrics: Live performance data
Performance Budgets: Set and monitor performance thresholds
Optimization Tips: AI-powered optimization suggestions
Historical Data: Performance trend analysis

Browser Integration

Chrome DevTools

// manifest.json
{
  "devtools_page": "devtools.html",
  "permissions": [
    "activeTab",
    "storage"
  ]
}

Firefox Developer Tools

// manifest.json
{
  "developer": {
    "devtools_page": "devtools.html"
  }
}

Safari Web Inspector

// manifest.json
{
  "web_accessible_resources": [
    "safari-inspector.js"
  ]
}

⚡ Performance

Performance Benefits

Minimal Overhead - Extension adds less than 5ms to page load
Efficient Monitoring - Smart sampling reduces performance impact
Lazy Loading - Features load only when needed
Memory Optimization - Efficient memory usage for long-running sessions

Performance Monitoring

import { useExtension, PerformanceTracker } from '@yaseratiar/react-responsive-easy-browser-extension';

function PerformanceTracking() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <PerformanceTracker
      metrics={['extensionLoad', 'overlayRender', 'breakpointSwitch']}
      onMetricsUpdate={(metrics) => {
        // Send metrics to monitoring service
        if (process.env.MONITORING_URL) {
          fetch(process.env.MONITORING_URL, {
            method: 'POST',
            body: JSON.stringify(metrics)
          });
        }
      }}
    />
  );
}

Performance Budgets

import { useExtension, PerformanceBudget } from '@yaseratiar/react-responsive-easy-browser-extension';

function PerformanceBudgeting() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <PerformanceBudget
      budgets={{
        extensionLoad: 50, // 50ms
        overlayRender: 10, // 10ms
        breakpointSwitch: 20 // 20ms
      }}
      onBudgetExceeded={(metric, value, budget) => {
        console.warn(`${metric} exceeded budget: ${value}ms > ${budget}ms`);
      }}
    />
  );
}

🔄 Migration Guide

From Browser DevTools

Before:

// Manual responsive testing
const mediaQuery = window.matchMedia('(max-width: 768px)');
if (mediaQuery.matches) {
  console.log('Mobile breakpoint active');
}

After:

import { useExtension } from '@yaseratiar/react-responsive-easy-browser-extension';

function Component() {
  const { currentBreakpoint, switchBreakpoint } = useExtension();
  
  return (
    <div>
      <p>Current breakpoint: {currentBreakpoint.name}</p>
      <button onClick={() => switchBreakpoint('mobile')}>
        Test Mobile
      </button>
    </div>
  );
}

From Responsive Testing Tools

Before:

// Manual responsive testing
function testResponsive() {
  const originalWidth = window.innerWidth;
  window.innerWidth = 375; // Mobile width
  window.dispatchEvent(new Event('resize'));
  
  // Test responsive behavior
  // ...
  
  // Restore original width
  window.innerWidth = originalWidth;
  window.dispatchEvent(new Event('resize'));
}

After:

import { useExtension } from '@yaseratiar/react-responsive-easy-browser-extension';

function Component() {
  const { testBreakpoint, restoreBreakpoint } = useExtension();
  
  const testMobile = async () => {
    await testBreakpoint('mobile');
    // Test responsive behavior
    // ...
    restoreBreakpoint();
  };
  
  return <button onClick={testMobile}>Test Mobile</button>;
}

From Performance Monitoring

Before:

// Manual performance monitoring
const startTime = performance.now();
// ... responsive logic ...
const endTime = performance.now();
const duration = endTime - startTime;
console.log(`Responsive calculation took: ${duration}ms`);

After:

import { useExtension, PerformanceMonitor } from '@yaseratiar/react-responsive-easy-browser-extension';

function Component() {
  const { isExtensionActive } = useExtension();
  
  if (!isExtensionActive) return null;
  
  return (
    <PerformanceMonitor
      metrics={['responsiveCalculations', 'breakpointSwitches']}
      onMetricsUpdate={(metrics) => {
        console.log('Performance metrics:', metrics);
      }}
    />
  );
}

🐛 Troubleshooting

Common Issues

Extension Not Loading

# Check extension installation
# Go to browser extension management page

# Verify manifest.json
# Check browser console for errors

# Check permissions
# Ensure extension has necessary permissions

Performance Issues

# Enable debug mode
# Set debugMode: true in extension settings

# Check performance metrics
# Monitor extension performance in DevTools

# Verify configuration
# Check extension configuration for errors

Visual Overlays Not Showing

# Check extension settings
# Verify showOverlays is enabled

# Check website configuration
# Ensure extension is enabled on the website

# Check browser compatibility
# Verify extension works with your browser version

Debug Commands

# Show extension version
# Check extension details in browser

# Check extension logs
# Open browser console and look for extension logs

# Test extension functionality
# Use extension features and check for errors

Getting Help

# Enable debug mode
# Set debugMode: true in extension settings

# Check documentation
# Visit extension documentation page

# Report issues
# Use extension's issue reporting feature

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Clone repository
git clone https://github.com/naaa-G/react-responsive-easy.git

# Install dependencies
pnpm install

# Build extension
pnpm --filter=@yaseratiar/react-responsive-easy-browser-extension build

# Load extension in browser
# Follow browser-specific loading instructions

Testing

# Run extension tests
pnpm test

# Test in different browsers
pnpm test:browsers

# Test extension functionality
pnpm test:extension

Building

# Build for Chrome
pnpm build:chrome

# Build for Firefox
pnpm build:firefox

# Build for Safari
pnpm build:safari

# Build for all browsers
pnpm build:all

📄 License

MIT License - see the LICENSE file for details.

🔗 Links

Documentation: https://github.com/naaa-G/react-responsive-easy
Issues: https://github.com/naaa-G/react-responsive-easy/issues
Discussions: https://github.com/naaa-G/react-responsive-easy/discussions
Changelog: https://github.com/naaa-G/react-responsive-easy/blob/main/CHANGELOG.md

🙏 Acknowledgments

Browser Extension Teams - For extension development platforms
React Team - For the component-based architecture
TypeScript Team - For type safety and tooling
Open Source Community - For inspiration and collaboration

Made with ❤️ by naa-G

⭐ Star this repository if you find it helpful!