Archives for June 2025

As a developer working on conversion rate optimization (CRO) projects, I often found myself needing to test locally built JavaScript against live production websites. The traditional approach of constantly uploading files or modifying production code was both slow and risky. That’s when I decided to build MintMinds RequestLite — a Chrome extension that solves this problem elegantly.

The Problem

When developing JavaScript for live websites, you typically face these challenges:

1. Testing locally built scripts against production environments
2. Rapid iteration without constant file uploads
3. Live reload functionality for instant feedback
4. Simple management of multiple redirect rules

The Solution

The extension provides two core features:

1. Script Redirection

Instead of loading scripts from https://cdn.example.com/script.js, the extension can redirect requests to http://localhost:4173/script.js — allowing you to test your local development server’s output against live sites.

2. Live Reload Integration

A WebSocket-based live reload system that automatically refreshes pages when your development server signals changes.

Technical Architecture

Manifest V3 Foundation

{
  "manifest_version": 3,
  "permissions": [
    "declarativeNetRequest",
    "storage", 
    "activeTab",
    "scripting"
  ],
  "host_permissions": ["<all_urls>"]
}

The extension uses modern Chrome APIs:

• declarativeNetRequest for intercepting and redirecting network requests
• scripting for dynamic content script injection
• storage for persisting user preferences

Rule-Based Configuration

Rules are stored in a simple JSON format:

{
  "id": "my-script",
  "name": "My Development Script",
  "enabled": false,
  "match": "https://cdn.example.com/script.js",
  "redirect": "http://localhost:4173/script.js"
}

Dynamic Rule Management

The extension converts string-based rule IDs to numeric hashes (required by Chrome’s API) while maintaining collision detection:

export function stringToHashCode(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash |= 0;
  }
  return Math.abs(hash % 2147483647) + 1;
}

Live Reload Implementation

The live reload feature uses dynamic content script registration:

// Register content script when enabled
await chrome.scripting.registerContentScripts([{
  id: "livereload-script",
  matches: ["<all_urls>"],
  js: ["src/content/livereload.js"],
  runAt: "document_start"
}]);

The injected script establishes a WebSocket connection:

try {
  const socket = new WebSocket("ws://localhost:5678");
  socket.addEventListener("message", (event) => {
    if (event.data === "reload") {
      console.log("🔁 reload triggered by dev server");
      location.reload();
    }
  });
} catch (error) {
  console.warn("Error setting up LiveReload listener:", error);
}

User Experience

Clean Interface

The popup provides an intuitive interface with:

• LiveReload toggle at the top for quick access
• Individual rule toggles for granular control
• Visual separation between different feature sets

Persistent State

All settings persist across browser sessions using Chrome’s storage API, so your development environment stays configured exactly how you left it.

Development Benefits

Faster Iteration

No more manual file uploads or cache clearing. Changes in your local development server are instantly reflected on live sites.

Risk Reduction

Test thoroughly in production-like environments without touching actual production files.

Multiple Project Support

Manage different redirect rules for various projects, enabling or disabling them as needed.

Key Learnings

Manifest V3 Considerations

• Content scripts must be registered dynamically rather than declared in manifest
• Service workers replace background pages, requiring careful state management
• declarativeNetRequest is more restrictive but more performant than webRequest

Chrome Extension Gotchas

• Rule IDs must be numeric for declarativeNetRequest API
• Hash collision detection is crucial for string-to-numeric ID conversion
• Error handling is essential for graceful degradation

User Experience Design

• Visual separation of features prevents confusion
• Consistent toggle patterns create intuitive interactions
• Status feedback helps users understand what’s happening

Future Enhancements

The extension could be extended with:

• Custom script injection with user-defined code
• Request headers modification for advanced testing scenarios
• Multiple environment support (staging, preview, etc.)
• Import/export functionality for team sharing

Conclusion

Building this Chrome extension taught me valuable lessons about modern web extension development, user experience design, and developer tooling. The combination of script redirection and live reload has significantly improved my CRO development workflow.

The extension demonstrates how a focused tool solving a specific developer pain point can have outsized impact on productivity. Sometimes the best solutions are the simple ones that just work.

---

The extension uses Chrome Extension Manifest V3 and modern JavaScript modules. Full source code demonstrates clean separation of concerns between background scripts, content scripts, and popup UI management.