Building a minimal Chrome extension for CRO development

As a Senior Front-end Developer specializing in high-velocity experimentation and personalization, I found myself constantly switching between different tools and manually reloading pages during development. That’s when I decided to build Mintminds RequestLite – a minimal yet powerful Chrome extension designed specifically for Conversion Rate Optimization (CRO) development workflows.

The Problem: Development Friction in CRO Work

When working with experimentation platforms like GrowthBook, Optimizely, and Convert, developers often face several pain points:

• Script Swapping: Constantly switching between local development scripts and production versions
• Manual Reloads: Refreshing pages manually after every code change
• Request Interception: Need for lightweight request modification without heavy proxy tools
• Selective Injection: Wanting script injection only on specific pages where rules are active

The Solution: A Purpose-Built Extension

Mintminds RequestLite addresses these challenges with two core features:

1. Dynamic Request Interception

The extension uses Chrome’s declarativeNetRequest API to intercept and redirect script requests in real-time. Instead of loading production scripts, developers can redirect to their local development versions.

// Example rule configuration { “id”: “experiment-script-redirect”, “name”: “Redirect Experiment Script to Local”, “match”: “*://example.com/js/experiment.js*”, “redirect”: “http://localhost:3000/experiment-dev.js”, “enabled”: true }

2. Intelligent WebSocket LiveReload

The extension includes a selective script injection system that:

• Only injects LiveReload scripts into tabs where redirect rules are active
• Connects to a local WebSocket server (typically running on port 5678)
• Automatically reloads pages when file changes are detected

Technical Architecture

The extension follows Chrome’s Manifest V3 architecture with a clean, modular design:

Service Worker (background.js)

The heart of the extension manages:

• Rules Management: Loading, updating, and applying redirect rules
• Script Injection: Selective injection of LiveReload functionality
• Tab Tracking: Monitoring which tabs have active rules
• Message Handling: Communication between popup and background scripts

Popup Interface

A clean, toggleable interface allows developers to:

• Enable/disable individual redirect rules
• Toggle WebSocket LiveReload functionality
• See real-time status of active rules

Content Script (live-reload.js)

A lightweight script that:

• Establishes WebSocket connection to local development server
• Listens for reload signals
• Implements a 2-second delay to allow for file processing

Key Technical Decisions

1. Selective Script Injection

Rather than injecting LiveReload scripts into all tabs, the extension uses an intelligent tracking system:

// Only inject into tabs where rules have been executed
export async function trackTabWithRuleExecution(tabId) {
if (tabId && tabId !== -1) {
tabsWithRulesExecuted.add(tabId);

    if (scriptInjectionEnabled) {
        await injectLiveReloadIntoTab(tabId);
    }
}

}

2. Service Worker Lifecycle Management

One of the trickiest aspects was handling Chrome’s aggressive service worker termination. The solution involved:

• Immediate initialization on service worker start
• Retry logic in popup communications
• Proper cleanup of tracked tabs

3. Rule ID Generation

Since Chrome’s declarativeNetRequest requires numeric IDs but developers prefer string identifiers, we implemented a collision-resistant hashing system:

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; // Convert to 32bit integer } return Math.abs(hash % 2147483647) + 1; }

Development Workflow Integration

The extension integrates seamlessly with modern development workflows:

1. Start your local development server with file watching
2. Configure redirect rules to point production scripts to localhost
3. Enable WebSocket LiveReload for automatic page refreshes
4. Code, save, and see changes instantly without manual intervention

Performance Considerations

• Minimal footprint: The extension only activates on pages with matching rules
• Efficient rule management: Uses Chrome’s native declarativeNetRequest for optimal performance
• Smart cleanup: Automatically removes tracking for closed or navigated tabs

Future Enhancements

The modular architecture makes it easy to extend:

• Rule templates for common CRO platforms
• Advanced matching patterns beyond simple URL filters
• Integration with popular build tools and bundlers
• Export/import functionality for team collaboration

Conclusion

Mintminds RequestLite proves that sometimes the best tools are the ones built for your specific workflow. By focusing on the core pain points of CRO development and leveraging Chrome’s powerful extension APIs, we’ve created a tool that significantly reduces development friction.

The extension is particularly valuable for teams working on high-velocity experimentation where rapid iteration and testing are crucial. It bridges the gap between local development and production testing environments, making the development process smoother and more efficient.