NetworkInterceptor

A high-performance Chrome Extension built with React, TypeScript, and Tailwind CSS.
Provides a developer-focused interface to intercept and manipulate network traffic using Chrome's Manifest V3 APIs — enabling frontend debugging and testing without touching backend code.

---

Key Features

Rules Engine

Create dynamic interceptors with three action types:

• Block requests entirely
• Mock responses with custom JSON payloads
• Modify outgoing request headers
  (e.g. injecting Authorization tokens)

---

Live Monitor

Real-time traffic dashboard that captures outgoing requests via a Background Service Worker, featuring:

• Inline search filtering
• One-click "Add as Rule" shortcut directly from any log entry

---

Atomic Sync

Implements a Source of Truth synchronization pattern keeping:

• declarativeNetRequest
• chrome.storage.local
• React UI state

fully consistent at all times.

---

Config Management

• JSON Import / Export support
• UTF-8 safe Base64 encoding for mock payloads

---

Tech Stack

Layer	Technology
Frontend	React 18, TypeScript, Tailwind CSS
Browser APIs	declarativeNetRequest, webRequest, chrome.storage.local
Background	Chrome Service Worker (Manifest V3)

---

Technical Challenges & Engineering Solutions

1. State-to-Engine Synchronization

In Manifest V3, the browser's rule engine is persistent while the extension UI is ephemeral — the popup is destroyed and recreated on every open.

Challenge

• Ghost rules persisting in the DNR engine after deletion from the UI
• UI state becoming stale between popup sessions

Solution

On every popup mount, the UI re-hydrates from chrome.storage.local as the single source of truth.

All mutations:

• Add
• Remove
• Import

write to storage first, then reflect in React state — ensuring the engine and UI are never out of sync regardless of popup lifecycle.

---

2. Robust JSON Imports

Bulk-loading rules into the browser engine can trigger race conditions when the popup is destroyed mid-operation.

Challenge

The OS file picker steals focus and destroys the popup before FileReader.onload fires, orphaning the import operation entirely.

Solution

Import logic is delegated to the Background Service Worker via chrome.runtime.sendMessage.

The background script performs the full import sequence:

1. Wipe existing rules
2. Register new DNR configs
3. Persist to storage

independent of popup availability.

The popup simply re-hydrates from storage on next open.

Known Limitation

Due to a Chrome MV3 popup lifecycle constraint, the Import feature requires the extension DevTools panel to remain open:

1. Right-click the extension icon
2. Select Inspect

This keeps the popup alive during the file picker interaction.
This is a documented platform-level limitation in Manifest V3.

---

3. Safe Mock Encoding

Mock responses use Data URIs which break silently on non-ASCII content.

Challenge

Native btoa() crashes on:

• Emojis
• Arabic script
• Non-Latin characters

inside mock JSON payloads.

Solution

All mock data is encoded through a UTF-8 safe pipeline:

btoa(unescape(encodeURIComponent(data)))

before embedding into redirect Data URIs, ensuring resilient Base64 encoding for any character set.

---

Installation

git clone https://github.com/LaibaFirdouse/NetworkInterceptor.git

cd NetworkInterceptor

npm install

npm run build

---

Load Into Chrome

1. Open chrome://extensions/
2. Enable Developer Mode
3. Click Load unpacked
4. Select the dist folder

---

Project Goal

Built as a showcase of:

• Manifest V3 engineering principles
• Chrome Extension architecture
• State synchronization strategies
• Background Service Worker workflows
• Advanced browser API integrations

---

Preview

Extension

---

Rules

Live Monitor

---

Author

Laiba Firdouse