Request Bridge

Posted on Jun 2

I Built a Browser Extension to Intercept HTTP Requests – Here's What I Learned about Manifest V3

#webdev #showdev #javascript #extensions

I recently launched RequestBridge, a browser extension that lets developers intercept and modify HTTP requests without leaving the browser. Here's the story of how I built it and what I learned along the way.

The Problem

As a developer, I constantly found myself switching between:

Charles Proxy for intercepting requests
Postman for testing APIs
Browser DevTools for debugging
Custom scripts for mocking responses

Each tool was powerful but switching between them killed my flow. I wanted something simpler - a tool that lived right in the browser.

The Solution

RequestBridge is a browser extension with 8 rule types for complete HTTP control:

Redirect - Route requests to different URLs
Modify URL - Change hostname, protocol, port, or path
Modify Headers - Add, remove, or override headers
Query Parameters - Modify URL query strings
Block Request - Cancel specific requests
String Replace - Find & replace in response bodies
Response Body Modify - Completely change API responses
Request Body Modify - Edit outgoing request payloads

Technical Architecture

Manifest V3 Migration

Chrome deprecated Manifest V2, so I had to build with V3 from the start. Key differences:

Service Workers instead of Background Pages:

// Old way (MV2)
chrome.runtime.onInstalled.addListener(() => {
  // Background page code
});

// New way (MV3)
self.addEventListener('install', (event) => {
  // Service worker code
});

declarativeNetRequest instead of webRequest:
The biggest change. Instead of intercepting requests programmatically, you define rules declaratively:

chrome.declarativeNetRequest.updateDynamicRules({
  addRules: [{
    id: 1,
    priority: 1,
    action: {
      type: "redirect",
      redirect: { url: "https://new-url.com" }
    },
    condition: {
      urlFilter: "*://old-url.com/*",
      resourceTypes: ["main_frame"]
    }
  }]
});

Tech Stack

Extension: Manifest V3, declarativeNetRequest API, Content Scripts
Website: React 18 + Vite 5 + Tailwind CSS 3
Backend: Firebase Auth + Firestore
Hosting: Vercel
Payment: Paddle (for premium plans)

Architecture Decisions

Why Content Scripts for Response Modification?

The declarativeNetRequest API can't modify response bodies. I had to use content scripts with fetch interception:

// Injected into page context
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  const response = await originalFetch(...args);

  // Apply user-defined rules
  if (shouldModifyResponse(response.url)) {
    return modifyResponse(response);
  }

  return response;
};

Why Firebase?

Built-in authentication (Google + Email/Password)
Real-time sync across devices
Simple pricing model
Quick to implement

Why Paddle for Payments?

Handles VAT/tax compliance globally
Great developer experience
Transparent pricing
Good documentation

The Chrome Review Process

Timeline:

Submitted: April 10, 2026
Published: May 7, 2026
Total time: 27 days

Why so long?

Extensions requesting sensitive permissions (like declarativeNetRequest and webRequest) go through extended review.

Tips for passing review:

✅ Clear privacy policy explaining what permissions you need and why
✅ Detailed description of all features
✅ Screenshots showing the extension in action
✅ Video demo if functionality is complex
✅ Responsive support email
✅ Justify every permission in your manifest

Firefox was faster:

Submitted: Similar time
Approved: 3 days
Firefox reviewers are generally faster for legitimate developer tools

Lessons Learned

1. Start with Manifest V3

Don't build with MV2 thinking you'll migrate later. The architectural differences are significant.

2. Plan for Cross-Browser Support

Firefox supports most MV3 features but has differences:

Different resource type names
Different permission names
Different API behaviors

I spent time abstracting these differences into a compatibility layer.

3. Security is Critical

Extensions with network permissions are security-sensitive. I:

✅ Store rules locally, not in cloud
✅ Don't track user requests
✅ Use Firebase Auth for secure user management
✅ Exclude sensitive domains (banking, payment, etc.)

4. The Review Process Takes Time

Budget 2-4 weeks for Chrome review if you're using sensitive permissions. Don't rush your launch date.

5. Users Want Simplicity

Early users loved the "it just works" aspect. Complex enterprise features can come later.

Monetization Strategy

Free Tier:

5 rules (3 active at a time)
Basic rule types
5 AI requests/day
Perfect for casual users

Premium ($4.99/month):

Unlimited rules
All advanced features
50 AI requests/day
Priority support

Why this works:

Free tier is genuinely useful (not a trial)
Premium unlocks real value
Price point is low enough for individual developers
Monthly billing reduces friction

Launch Offer

🎁 Code LAUNCH2026 gives first 100 users 6 months FREE premium (no credit card required)

This helps with:

Early adoption
Getting feedback from power users
Building social proof
Getting store ratings/reviews

Results So Far

(Update this section as you get data)

Downloads: [TBD]
Active users: [TBD]
Premium conversions: [TBD]
Store rating: [TBD]

What's Next

Planned features:

Import/export rules
Rule templates library
Team collaboration
More AI-powered features
API for programmatic control

Try It Out

Chrome: https://chromewebstore.google.com/detail/requestbridge-fast-track/ggkjachcfcaecgihkjdmdhnpejajfjej
Firefox: https://addons.mozilla.org/en-US/firefox/addon/requestbridge/
Website: https://requestbridge.com

DEV Community