feat: v2.3-upgrades (Dynamic Templating, Global Rules, Payload Override, HAR Import, Throttling & Shortcuts)

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

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.
 

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         | --       |

guide.html

@@ -80,11 +80,14 @@ <h3>3.1. Popup</h3>
           <strong>3 tabs</strong>:
           <ul>
             <li>
-              <strong>Captured APIs (N)</strong>: List of captured requests, grouped by resource
-              type.
+              <strong>Captured APIs (N)</strong>: List of captured requests with real-time counters,
+              grouped by resource type (XHR, Fetch, Doc, JS, CSS).
             </li>
-            <li><strong>Overridden (N)</strong>: APIs currently matched by an active rule.</li>
-            <li><strong>Rules (N)</strong>: List of all saved override rules.</li>
+            <li>
+              <strong>Overridden (N)</strong>: Real-time counter of APIs currently matched by an
+              active rule.
+            </li>
+            <li><strong>Rules (N)</strong>: Total count and list of all saved override rules.</li>
           </ul>
         </li>
         <li><strong>Search bar</strong>: Filter APIs by URL substring.</li>
@@ -547,6 +550,42 @@ <h3>9.6. Marker headers</h3>
       </ul>
       <p>This lets you easily identify overridden requests in the DevTools Network tab.</p>
 
+      <h3>9.7. Dynamic Response Templating</h3>
+      <p>Insert dynamic placeholders into mock response bodies:</p>
+      <ul>
+        <li><code>{{$uuid}}</code> — Random UUID v4</li>
+        <li><code>{{$isoDate}}</code> — ISO 8601 timestamp</li>
+        <li><code>{{$epoch}}</code> — Unix timestamp in ms</li>
+        <li><code>{{$randomEmail}}</code> — Random email address</li>
+        <li><code>{{$randomName}}</code> — Random full name</li>
+        <li><code>{{$randomInt(1, 100)}}</code> — Random integer in range</li>
+        <li><code>{{$query(name)}}</code> — Query parameter value from request URL</li>
+      </ul>
+
+      <h3>9.8. Global Cross-Domain Rules</h3>
+      <p>
+        Mark rules as <strong>Global</strong> to intercept matching requests across all domains.
+        Global rules display a <code>GLOBAL</code> badge in the rules list.
+      </p>
+
+      <h3>9.9. Request Payload Modification</h3>
+      <p>
+        Override outgoing <code>POST</code>, <code>PUT</code>, or <code>PATCH</code> request
+        payloads before they reach the server.
+      </p>
+
+      <h3>9.10. HAR File Import</h3>
+      <p>
+        Drag &amp; drop or import <code>.har</code> files (HTTP Archive) to generate mock rules in
+        bulk from recorded traffic.
+      </p>
+
+      <h3>9.11. Editor Keyboard Shortcuts</h3>
+      <ul>
+        <li><code>Ctrl + Enter</code> / <code>Cmd + Enter</code> — Save override rule</li>
+        <li><code>Ctrl + Shift + F</code> / <code>Cmd + Shift + F</code> — Format JSON body</li>
+      </ul>
+
       <!-- ============ 10 ============ -->
       <h2 id="notes">10. Important Notes</h2>
 

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": ["<all_urls>"],
   "background": {
-    "service_worker": "dist/background.js"
+    "service_worker": "dist/background.bundle.js"
   },
   "devtools_page": "devtools.html",
   "action": {

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",

panel.html

@@ -302,26 +302,7 @@ <h3>Import Rules from cURL or OpenAPI / Swagger Spec</h3>
       <ul id="list"></ul>
     </div>
 
-    <script src="dist/utils.js"></script>
-    <script src="dist/shared.js"></script>
-    <script src="dist/ui/types.js"></script>
-    <script src="dist/ui/view-utils.js"></script>
-    <script src="dist/ui/primitives.js"></script>
-    <script src="dist/ui/notifications.js"></script>
-    <script src="dist/ui/dialogs.js"></script>
-    <script src="dist/ui/persistence.js"></script>
-    <script src="dist/ui/attach-status.js"></script>
-    <script src="dist/ui/curl.js"></script>
-    <script src="dist/ui/swagger.js"></script>
-    <script src="dist/ui/headers-editor.js"></script>
-    <script src="dist/ui/modal.js"></script>
-    <script src="dist/ui/rules-list.js"></script>
-    <script src="dist/ui/api-list.js"></script>
-    <script src="dist/ui/profiles.js"></script>
-    <script src="dist/ui/modal-controller.js"></script>
-    <script src="dist/ui/rules-io-controller.js"></script>
-    <script src="dist/ui/toolbar-controller.js"></script>
-    <script src="dist/ui.js"></script>
+    <script src="dist/ui.bundle.js"></script>
     <script src="dist/panel.js"></script>
   </body>
 </html>