diff --git a/.gitignore b/.gitignore index 05d35f6..a26cc75 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,3 @@ Thumbs.db test-output.txt test-results.txt docs/ - diff --git a/README.md b/README.md index 821cd5c..6c0fa87 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,11 @@ A Chrome/Edge DevTools extension that intercepts network responses and replaces | ------------------------------------------------------------ | --------------------------------------------------------------------- | | ![Override rules](store-assets/v2.2.0/03-override-rules.png) | ![Save and retry feedback](store-assets/v2.2.0/04-save-and-retry.png) | -## Features - +- **Real-time API Type & Tab Counters**: Live request counters next to each resource filter (`XHR (5)`, `Fetch (12)`, `Doc (1)`, `JS (3)`, `CSS (0)`) and in tab headers (`Captured APIs (15)`, `Overridden (3)`, `Rules (2)`). +- **High-Performance LRU Regex & Batch DOM Rendering**: LRU-cached `RegExp` pattern matching (`regexCache`) and `DocumentFragment` batch DOM rendering to handle heavy network traffic without UI lag. +- **JS Bundling & Minimal Dist Packaging**: Build pipeline automatically concatenates scripts into 5 clean JS bundles (`background.bundle.js`, `ui.bundle.js`, `panel.js`, `popup.js`, `devtools.js`) and cleans unbundled source files for optimal store uploads. +- **Modern Minimalist Vector Branding**: Sleek vector icons with 3 customizable design variants stored in `icons/concepts/`. +- **Persistent MV3 Worker Rehydration & Port Retries**: Automatic tab state rehydration from `chrome.storage.session` and automatic 150ms message port retries to handle Chrome background worker sleep/wake cycles gracefully. - **Enable/disable** overrides per active tab via a toggle switch. - **Per-rule enable/disable toggle**: disable an individual rule without deleting it; it stays visible (dimmed) and is skipped by the background worker until re-enabled. - **HTTP method matching**: scope a rule to `GET`/`POST`/`PUT`/`PATCH`/`DELETE`, or leave it at `Any` to match every method (default, pre-filled from the captured request when available). @@ -24,7 +27,7 @@ A Chrome/Edge DevTools extension that intercepts network responses and replaces - **Duplicate Rules**: 1-click clone any override rule directly in the rules list. - **Request Headers & Response Headers Overriding**: inject or modify request headers (e.g. `Authorization: Bearer token`) during the request stage or extra response headers during the response stage. - **Response Image & Visual Preview**: instant image preview (Base64 PNG/JPG, SVG) directly inside the editor modal. -- **Dynamic Captured Resource Filters**: toggle body capture for XHR, Fetch, Document, Script, or Stylesheet resources. +- **Dynamic Captured Resource Filters**: toggle body capture for XHR, Fetch, Document, Script, or Stylesheet resources with real-time counters. - **Three pattern matching modes** for override rules: - URL substring match (e.g. `/api/users`) - Wildcard `*` glob (e.g. `https://old.com/api/*/users` → `*` captures matching segments) @@ -38,6 +41,12 @@ A Chrome/Edge DevTools extension that intercepts network responses and replaces - **View captured APIs**, grouped by resource type (XHR, Fetch, JS, CSS, Img, Doc, WS, etc.), with real-time updates from the background service worker. - **Search APIs** by URL substring. - **One-click override creation**: Click any API in the list to open the modal and create/edit an override rule. +- **Dynamic Response Templating**: Insert dynamic placeholders into mock responses (`{{$uuid}}`, `{{$isoDate}}`, `{{$epoch}}`, `{{$randomEmail}}`, `{{$randomName}}`, `{{$randomInt(min, max)}}`, `{{$query(paramName)}}`). +- **Global Cross-Domain Rules**: Scope rules globally across all domains (`isGlobal`), highlighted with a `GLOBAL` badge in the rules list. +- **Request Payload Interception & Modification**: Modify outgoing request payloads (`postData`) during the CDP request stage. +- **HAR File Import**: Drag & drop or import `.har` files (HTTP Archive) to generate mock rules in bulk. +- **Traffic Analytics**: Track total overridden and failed request statistics per active tab. +- **Editor Keyboard Shortcuts**: Modal hotkeys `Ctrl+Enter` / `Cmd+Enter` to save and `Ctrl+Shift+F` / `Cmd+Shift+F` to format JSON. - **Auto-fill response body**: When creating a new override, the current response body is automatically fetched from the background worker and pre-filled into the editor. - **JSON formatting**: Auto-detect and format JSON bodies with a single button. - **Copy cURL**: Copy any API request as a cURL command. @@ -48,24 +57,56 @@ A Chrome/Edge DevTools extension that intercepts network responses and replaces ``` src/ -├── background.ts # Service-worker bootstrap -├── background/ # Debugger lifecycle, interception, encoding, capture, message routing -├── ui.ts # Shared UI state and controller orchestration -├── ui/ # Reusable modal, rules, headers, dialogs, notifications, profiles, import/export -├── shared.ts # Shared OverrideRule, ApiEntry, and header types -├── tab-state.ts # Per-tab state, session persistence, and worker rehydration -├── panel.ts # DevTools panel initialization and HAR streaming -├── popup.ts # Action popup initialization -└── utils.ts # Pattern matching, wildcard, and origin helpers - -styles.css # CSS entrypoint -styles/ # Base, feature, modal/rules, primitive, and guide styles -scripts/ # Smoke, Store screenshot, and packaging automation -store-assets/screenshots/ # Chrome Web Store-ready screenshots -dist/ # Compiled JavaScript (generated by TypeScript) -panel.html # DevTools panel shell -popup.html # Action popup shell -manifest.json # Manifest V3 configuration +├── background.ts # Service Worker entrypoint bootstrap +├── devtools.ts # Chrome DevTools extension tab registration +├── panel.ts # DevTools panel entrypoint & HAR streaming +├── popup.ts # Action popup entrypoint +├── ui.ts # Shared UI state & controller orchestration +├── shared.ts # Shared OverrideRule, ApiEntry, and header types +├── tab-state.ts # Per-tab state store, session persistence, & worker rehydration +├── utils.ts # Pattern matching, wildcard, dynamic templates, LRU regex cache, & origin helpers +├── background/ +│ ├── api-capture.ts # CDP Network event listener & API tracking +│ ├── debugger-controller.ts # chrome.debugger attach/detach & domain setup +│ ├── encoding.ts # Base64 response body encoding helpers +│ ├── interceptor.ts # Fetch.requestPaused request/response/fail interceptor +│ └── message-router.ts # Background message listener & route handler +└── ui/ + ├── api-list.ts # Render captured APIs & resource type counters + ├── attach-status.ts # Status badge renderer (green/red) + ├── curl.ts # cURL command generator & parser + ├── dialogs.ts # Prompt & confirmation modal dialogs + ├── har.ts # HAR (HTTP Archive) spec parser + ├── headers-editor.ts # Request & Response headers editor table/textarea + ├── modal-controller.ts # Override editor modal event handlers + ├── modal.ts # Override modal UI state & visibility + ├── notifications.ts # Toast notifications (success/warning/error) + ├── persistence.ts # Storage persistence queue & error handler + ├── primitives.ts # UI element creation primitives + ├── profiles.ts # Per-domain rule profiles & presets + ├── rules-io-controller.ts # Import/export JSON rules & HAR/Swagger drag-and-drop + ├── rules-list.ts # Render saved rules list with action buttons & badges + ├── swagger.ts # Swagger / OpenAPI spec parser + ├── toolbar-controller.ts# Enable toggle, search, refresh, tabs, & action buttons + ├── types.ts # UI state & elements interfaces + └── view-utils.ts # Highlighting & label formatting helpers + +styles.css # CSS stylesheet entrypoint +styles/ # Modular CSS stylesheets (base, feature, modal/rules, primitive, guide) +scripts/ # Automation scripts: +├── bundle.mjs # Bundles TypeScript outputs into 5 clean JS files & cleans dist/ +├── package-store.mjs # Store zip packager +├── smoke.mjs # Real Chromium Playwright integration smoke test +└── capture-store-screenshots.mjs # Store assets screenshot generator + +icons/ # Active extension icons (16x16, 48x48, 128x128) +icons/concepts/ # 3 concept icon design variants (concept-1, concept-2, concept-3) +dist/ # Bundled JavaScript outputs (background.bundle.js, ui.bundle.js, panel.js, popup.js, devtools.js) +devtools.html # DevTools tab registrar page +panel.html # DevTools panel page +popup.html # Extension action popup page +guide.html # Bundled offline user guide +manifest.json # Chrome Manifest V3 configuration ``` ### Key flows @@ -80,7 +121,7 @@ manifest.json # Manifest V3 configuration 4. **Recent API tracking**: `Network.requestWillBeSent` captures request metadata into an in-memory Map (per tabId), mirrored to `chrome.storage.session` under key `tabState_{tabId}` (debounced). Capped at 500 URLs and 100 bodies. On worker startup, this state is rehydrated from `chrome.storage.session` and the debugger is re-attached to tabs that were enabled; any legacy `recentApis_{tabId}` / `recentApiBodies_{tabId}` keys left over from older versions in `chrome.storage.local` are removed automatically. -5. **UI state**: `enabled`, per-domain rules (`overrides_{origin}`), and `apiSearchTerm` are persisted in `chrome.storage.local` and survive across DevTools sessions and browser restarts. +5. **UI state**: `enabled`, per-domain rules (`overrides_{origin}`), global rules (`overrides_global`), and `apiSearchTerm` are persisted in `chrome.storage.local` and survive across DevTools sessions and browser restarts. Domain-specific rules take precedence over global rules. ## Storage @@ -90,6 +131,7 @@ Rule and UI state is stored in `chrome.storage.local` (permanent); per-tab runti | -------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | `enabled` | `boolean` | Permanent — survives browser restart | | `overrides_{origin}` | `OverrideRule[]` (rules for one domain, e.g. `overrides_https://a.test`) | Permanent — survives browser restart | +| `overrides_global` | `OverrideRule[]` shared across every domain | Permanent — survives browser restart | | `apiSearchTerm` | `string` | Permanent — survives browser restart | | `tabState_{tabId}` | per-tab snapshot (`enabled`, `origin`, `overrides`, captured APIs/bodies) | `chrome.storage.session` — cleared when the browser exits; rehydrated and re-attached on worker startup | diff --git a/USE-EN.md b/USE-EN.md index 92bdc0d..a890164 100644 --- a/USE-EN.md +++ b/USE-EN.md @@ -368,21 +368,52 @@ Click the **Refresh** button (↻) in the top right. The extension retries up to APIs are grouped by resource type: -| Type | Label | -| ----------- | ----------- | -| XHR | XHR | -| Fetch | Fetch | -| JS | JS | -| CSS | CSS | -| Image | Img | -| Media | Media | -| Font | Font | -| Document | Doc | -| WebSocket | WS | -| Manifest | Manifest | -| EventSource | EventSource | -| TextTrack | TextTrack | -| Other | Other | +| Type | Label | +| -------- | ----- | +| XHR | XHR | +| Fetch | Fetch | +| JS | JS | +| CSS | CSS | +| Image | Img | +| Media | Media | +| Font | Font | +| Document | Doc | + +### 9.5. Dynamic Response Templating + +Insert dynamic placeholders into mock response bodies: + +- `{{$uuid}}`: Generates a random UUID v4 (e.g. `c9bf9e57-1685-4c89-bafb-ff5af830be8a`). +- `{{$isoDate}}`: Current ISO 8601 timestamp (`2026-08-09T10:30:00.000Z`). +- `{{$epoch}}`: Current Unix epoch timestamp in milliseconds. +- `{{$randomEmail}}`: Generates a random test email (`user_x82a9@example.com`). +- `{{$randomName}}`: Generates a random full name (`Alex Rivers`). +- `{{$randomInt(min, max)}}`: Generates a random integer between `min` and `max`. +- `{{$query(paramName)}}`: Extracts the query parameter `paramName` directly from the request URL. + +### 9.6. Global Rules + +Check **Global Rule** when creating or editing a rule to apply it across **all domains**. Global rules display a prominent `GLOBAL` badge in the rules list. + +### 9.7. Request Payload Modification + +Override outgoing POST, PUT, or PATCH request payloads before they reach the server by filling in the **Request Payload** field in the editor modal. + +### 9.8. HAR File Import + +Import `.har` files (HTTP Archive exported from DevTools Network tab) to automatically convert recorded network requests into mock rules. + +### 9.9. Editor Keyboard Shortcuts + +In the Override Modal editor: + +- **`Ctrl + Enter`** (or **`Cmd + Enter`** on macOS): Save override rule. +- **`Ctrl + Shift + F`** (or **`Cmd + Shift + F`** on macOS): Format JSON response body. + | WebSocket | WS | + | Manifest | Manifest | + | EventSource | EventSource | + | TextTrack | TextTrack | + | Other | Other | Click a group header (e.g. "XHR ▼") to collapse/expand. Collapse state is persisted in storage. diff --git a/USE.md b/USE.md index b64f480..46b7ff0 100644 --- a/USE.md +++ b/USE.md @@ -368,6 +368,44 @@ Click nút **Refresh** (↻) ở góc trên bên phải. Extension sẽ thử 5 API được nhóm theo resource type: +- **Fetch / XHR**: API calls +- **JS**: Script files +- **CSS**: Style files +- **Img**: Images +- **Doc**: HTML documents +- **WS**: WebSockets + +### 9.5. Templating Động (Dynamic Response Templates) + +Cho phép chèn các biến sinh tự động vào nội dung Response Mock Body: + +- `{{$uuid}}`: Tạo ngẫu nhiên UUID v4 (ví dụ `c9bf9e57-1685-4c89-bafb-ff5af830be8a`). +- `{{$isoDate}}`: Ngày giờ hiện tại chuẩn ISO 8601 (`2026-08-09T10:30:00.000Z`). +- `{{$epoch}}`: Unix timestamp (tính bằng ms). +- `{{$randomEmail}}`: Tạo email thử nghiệm ngẫu nhiên (`user_x82a9@example.com`). +- `{{$randomName}}`: Tạo tên ngẫu nhiên (`Alex Rivers`). +- `{{$randomInt(1, 100)}}`: Sinh số nguyên ngẫu nhiên trong khoảng `min` tới `max`. +- `{{$query(id)}}`: Trích xuất trực tiếp giá trị của Query Parameter `id` từ Request URL. + +### 9.6. Quy tắc Toàn cục (Global Rules) + +Tích chọn tùy chọn **Global Rule** khi tạo/chỉnh sửa quy tắc để áp dụng rule này trên **tất cả các domain**. Các Global Rule sẽ có nhãn badge **GLOBAL** nổi bật trong danh sách Rules. + +### 9.7. Can thiệp & Ghi đè Request Payload + +Cho phép sửa đổi dữ liệu Request Payload (body của các request `POST`, `PUT`, `PATCH`) trước khi gửi lên Server bằng cách nhập nội dung mới vào ô **Request Payload** trong editor modal. + +### 9.8. Import HAR File (HTTP Archive) + +Hỗ trợ Import trực tiếp file `.har` (được export từ DevTools Network tab): Hệ thống sẽ tự động phân tích và chuyển đổi lịch sử traffic mạng ghi trong file HAR thành danh sách các Mock Rules sẵn sàng sử dụng. + +### 9.9. Phím tắt Thao tác Nhanh (Keyboard Shortcuts) + +Tại Editor Modal: + +- **`Ctrl + Enter`** (hoặc **`Cmd + Enter`** trên macOS): Lưu quy tắc nhanh (Save Rule). +- **`Ctrl + Shift + F`** (hoặc **`Cmd + Shift + F`** trên macOS): Định dạng JSON tự động (Format JSON). + | Type | Hiển thị | Màu/Icon | | ----------- | ----------- | -------- | | XHR | XHR | -- | diff --git a/guide.html b/guide.html index b09ccb0..f9563b4 100644 --- a/guide.html +++ b/guide.html @@ -80,11 +80,14 @@

3.1. Popup

3 tabs:
  • Search bar: Filter APIs by URL substring.
    • @@ -547,6 +550,42 @@

    9.6. Marker headers

    This lets you easily identify overridden requests in the DevTools Network tab.

    +

    9.7. Dynamic Response Templating

    +

    Insert dynamic placeholders into mock response bodies:

    + + +

    9.8. Global Cross-Domain Rules

    +

    + Mark rules as Global to intercept matching requests across all domains. + Global rules display a GLOBAL badge in the rules list. +

    + +

    9.9. Request Payload Modification

    +

    + Override outgoing POST, PUT, or PATCH request + payloads before they reach the server. +

    + +

    9.10. HAR File Import

    +

    + Drag & drop or import .har files (HTTP Archive) to generate mock rules in + bulk from recorded traffic. +

    + +

    9.11. Editor Keyboard Shortcuts

    + +

    10. Important Notes

    diff --git a/icons/concepts/concept-1/icon-128x128.png b/icons/concepts/concept-1/icon-128x128.png new file mode 100644 index 0000000..0530b26 Binary files /dev/null and b/icons/concepts/concept-1/icon-128x128.png differ diff --git a/icons/concepts/concept-1/icon-16x16.png b/icons/concepts/concept-1/icon-16x16.png new file mode 100644 index 0000000..bb1ede1 Binary files /dev/null and b/icons/concepts/concept-1/icon-16x16.png differ diff --git a/icons/concepts/concept-1/icon-48x48.png b/icons/concepts/concept-1/icon-48x48.png new file mode 100644 index 0000000..e6416ea Binary files /dev/null and b/icons/concepts/concept-1/icon-48x48.png differ diff --git a/icons/concepts/concept-1/storeIcon.png b/icons/concepts/concept-1/storeIcon.png new file mode 100644 index 0000000..0530b26 Binary files /dev/null and b/icons/concepts/concept-1/storeIcon.png differ diff --git a/icons/concepts/concept-2/icon-128x128.png b/icons/concepts/concept-2/icon-128x128.png new file mode 100644 index 0000000..5a2ae15 Binary files /dev/null and b/icons/concepts/concept-2/icon-128x128.png differ diff --git a/icons/concepts/concept-2/icon-16x16.png b/icons/concepts/concept-2/icon-16x16.png new file mode 100644 index 0000000..fd13ced Binary files /dev/null and b/icons/concepts/concept-2/icon-16x16.png differ diff --git a/icons/concepts/concept-2/icon-48x48.png b/icons/concepts/concept-2/icon-48x48.png new file mode 100644 index 0000000..e52728b Binary files /dev/null and b/icons/concepts/concept-2/icon-48x48.png differ diff --git a/icons/concepts/concept-2/storeIcon.png b/icons/concepts/concept-2/storeIcon.png new file mode 100644 index 0000000..5a2ae15 Binary files /dev/null and b/icons/concepts/concept-2/storeIcon.png differ diff --git a/icons/concepts/concept-3/icon-128x128.png b/icons/concepts/concept-3/icon-128x128.png new file mode 100644 index 0000000..675e66b Binary files /dev/null and b/icons/concepts/concept-3/icon-128x128.png differ diff --git a/icons/concepts/concept-3/icon-16x16.png b/icons/concepts/concept-3/icon-16x16.png new file mode 100644 index 0000000..c7bfd1b Binary files /dev/null and b/icons/concepts/concept-3/icon-16x16.png differ diff --git a/icons/concepts/concept-3/icon-48x48.png b/icons/concepts/concept-3/icon-48x48.png new file mode 100644 index 0000000..0dd6e88 Binary files /dev/null and b/icons/concepts/concept-3/icon-48x48.png differ diff --git a/icons/concepts/concept-3/storeIcon.png b/icons/concepts/concept-3/storeIcon.png new file mode 100644 index 0000000..675e66b Binary files /dev/null and b/icons/concepts/concept-3/storeIcon.png differ diff --git a/icons/icon-128x128.png b/icons/icon-128x128.png index 6fe178e..0530b26 100644 Binary files a/icons/icon-128x128.png and b/icons/icon-128x128.png differ diff --git a/icons/icon-16x16.png b/icons/icon-16x16.png index 4617b0b..bb1ede1 100644 Binary files a/icons/icon-16x16.png and b/icons/icon-16x16.png differ diff --git a/icons/icon-48x48.png b/icons/icon-48x48.png index b2dc95e..e6416ea 100644 Binary files a/icons/icon-48x48.png and b/icons/icon-48x48.png differ diff --git a/icons/storeIcon.png b/icons/storeIcon.png index 2da14d9..0530b26 100644 Binary files a/icons/storeIcon.png and b/icons/storeIcon.png differ diff --git a/manifest.json b/manifest.json index 83a91f1..b39c25c 100644 --- a/manifest.json +++ b/manifest.json @@ -1,12 +1,12 @@ { "manifest_version": 3, "name": "Network Overrides API (DevTools)", - "version": "2.2.0", + "version": "2.3.0", "description": "Debugging tool that intercepts and overrides network API responses from DevTools panel or popup. For developers only.", "permissions": ["storage", "debugger"], "host_permissions": [""], "background": { - "service_worker": "dist/background.js" + "service_worker": "dist/background.bundle.js" }, "devtools_page": "devtools.html", "action": { diff --git a/package-lock.json b/package-lock.json index 9f9c1fc..9f02276 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "network-overrides-devtools", - "version": "2.0.1", + "version": "2.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "network-overrides-devtools", - "version": "2.0.1", + "version": "2.3.0", "devDependencies": { "@commitlint/cli": "^19.5.0", "@commitlint/config-conventional": "^19.5.0", diff --git a/package.json b/package.json index 7b4cd9e..4afccc7 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "network-overrides-devtools", - "version": "2.2.0", + "version": "2.3.0", "private": true, "engines": { "node": ">=22" }, "scripts": { - "build": "tsc", + "build": "tsc && node scripts/bundle.mjs", "watch": "tsc --watch", "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"", "lint": "eslint src", diff --git a/panel.html b/panel.html index 38b4bf5..646cb8c 100644 --- a/panel.html +++ b/panel.html @@ -91,6 +91,10 @@

    placeholder="e.g. GetUserProfile or query name" /> +