bug-report-js 2.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sebastian Striebig
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,144 @@
+# Bug Report Capture — Chrome Extension
+
+A Chrome extension for structured bug reporting. Captures user interactions, console logs, JavaScript errors, and network request metadata, then exports them as a sanitized, downloadable HTML report.
+
+> **Looking for the website widget / NPM package?** See [`website/README.md`](website/README.md).
+
+---
+
+## Installation
+
+1. Open Chrome → `chrome://extensions`
+2. Enable **Developer mode** (toggle top-right)
+3. Click **Load unpacked** and select this folder
+4. The 🐛 icon appears in the toolbar — pin it via the puzzle-piece menu if needed
+
+---
+
+## Usage
+
+1. Navigate to any page
+2. Interact normally (clicks, scrolls, forms, etc.)
+3. Click the 🐛 toolbar icon
+4. Review the capture summary
+5. Click **Download Report** — a `bug_report_<timestamp>.json` file is saved
+
+---
+
+## Testing
+
+### Interaction Capture
+
+Perform clicks, form changes, keyboard events, and scrolls, then generate a report. In the `interactions` array:
+- Each entry has `timestamp`, `eventType`, `url`, `selector`, `tagName`
+- Click events include `viewportCoordinates`
+- Keyboard events show only the key name (`"Enter"`) — **no typed characters**
+- **No form field values** appear
+
+### Console Log Capture
+
+```js
+console.log("Test log message")
+console.warn("Test warning")
+console.error("Test error")
+```
+
+Check the `consoleLogs` array for entries with `timestamp`, `level`, and `message`. Max 100 entries.
+
+### JS Error Capture
+
+```js
+undefinedFunction()                          // runtime error
+Promise.reject(new Error("test rejection"))  // unhandled rejection
+```
+
+Check `jsErrors` for entries with `timestamp`, `message`, `errorType`. Max 50 entries.
+
+### Network Request Capture
+
+```js
+fetch('https://httpbin.org/get')
+fetch('https://httpbin.org/status/500')
+```
+
+Check `networkRequests` for `timestamp`, `method`, `url`, `statusCode`, `duration`. Max 200 entries. No cookies, auth headers, or bodies are included.
+
+### Privacy & Sanitization
+
+```js
+console.log("Contact: user@example.com")
+console.log("Token: Bearer eyJhbGciOiJIUzI1NiJ9.eyJ0ZXN0IjoxfQ.abc123")
+console.log("API key: apikey=sk-12345678abcdef")
+```
+
+Verify in the report:
+- Emails → `[REDACTED_EMAIL]`
+- Bearer tokens → `[REDACTED_TOKEN]`
+- API keys → `[REDACTED_API_KEY]`
+
+For URL params, navigate to `https://example.com/search?q=test&page=1&token=secret123` and confirm:
+- `q`, `page` → kept (safe allowlist)
+- `token` → removed (sensitive blocklist)
+
+---
+
+## Report Structure
+
+```json
+{
+  "schemaVersion": "1.0.0",
+  "reportTimestamp": "...",
+  "extensionVersion": "1.0.0",
+  "pageMetadata": {
+    "url": "...",
+    "userAgent": "...",
+    "viewportSize": { "width": 0, "height": 0 },
+    "screenResolution": { "width": 0, "height": 0 },
+    "scrollPosition": { "x": 0, "y": 0 },
+    "zoomLevel": 1,
+    "browserName": "...",
+    "browserVersion": "..."
+  },
+  "interactions": [],
+  "consoleLogs": [],
+  "jsErrors": [],
+  "networkRequests": [],
+  "sanitizationSummary": {
+    "totalRedactions": 0,
+    "redactionsByType": {}
+  },
+  "captureLimitations": []
+}
+```
+
+---
+
+## File Structure
+
+```
+Bug-download-button/
+├── website/
+│   ├── bug-report.js    # Website widget / NPM package
+│   ├── README.md        # Widget documentation
+│   ├── index.html       # Demo page
+│   └── docs.html
+├── manifest.json        # Extension manifest (Manifest V3)
+├── background.js        # Service worker: network capture, report assembly
+├── content.js           # Content script: interactions, console, errors
+├── sanitizer.js         # Sanitization module
+├── popup.html
+├── popup.css
+├── popup.js
+└── icons/
+    ├── icon16.png
+    ├── icon48.png
+    └── icon128.png
+```
+
+## Known Limitations
+
+- Data captured only while the extension is active on the current tab
+- Pre-existing console logs, errors, and network requests (before extension load) are not captured
+- Browser-internal pages (`chrome://`, `about:`) are not supported
+- Cross-origin iframes may not be fully captured
+- Network capture uses the `webRequest` API — metadata only, no request/response bodies

package/background.js

@@ -0,0 +1,279 @@
+/**
+ * background.js — Service Worker for Bug Report Extension (v2.0.0)
+ *
+ * Responsibilities:
+ *  - Capture network request metadata via webRequest API (per-tab, max 200)
+ *  - Orchestrate Ist/Soll user prompts via content script
+ *  - Assemble report from content script data + network data
+ *  - Apply final sanitization via sanitizer.js
+ *  - Generate HTML dashboard via report-template.js
+ *  - Trigger HTML file download
+ */
+
+importScripts('sanitizer.js', 'report-template.js');
+
+const EXTENSION_VERSION = '2.0.0';
+
+// ═══════════════════════════════════════════════════════════════════
+//  NETWORK REQUEST BUFFER (per-tab)
+// ═══════════════════════════════════════════════════════════════════
+
+const MAX_NETWORK_ENTRIES = 200;
+const networkBuffers = new Map(); // tabId → { entries: [], pendingRequests: Map }
+
+function getTabBuffer(tabId) {
+  if (!networkBuffers.has(tabId)) {
+    networkBuffers.set(tabId, {
+      entries: [],
+      pendingRequests: new Map(),
+    });
+  }
+  return networkBuffers.get(tabId);
+}
+
+function addNetworkEntry(tabId, entry) {
+  const buf = getTabBuffer(tabId);
+  buf.entries.push(entry);
+  if (buf.entries.length > MAX_NETWORK_ENTRIES) {
+    buf.entries.shift();
+  }
+}
+
+// Clean up when tab is closed
+chrome.tabs.onRemoved.addListener((tabId) => {
+  networkBuffers.delete(tabId);
+});
+
+// Clean up when tab navigates
+chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+  if (changeInfo.status === 'loading') {
+    // Don't clear completely on navigation, keep buffer for SPA-like apps
+    // But do clear pending requests
+    const buf = networkBuffers.get(tabId);
+    if (buf) {
+      buf.pendingRequests.clear();
+    }
+  }
+});
+
+// ── Network Request Tracking ─────────────────────────────────────
+
+chrome.webRequest.onBeforeRequest.addListener(
+  (details) => {
+    if (details.tabId < 0) return; // Skip non-tab requests
+
+    const buf = getTabBuffer(details.tabId);
+    buf.pendingRequests.set(details.requestId, {
+      startTime: details.timeStamp,
+      method: details.method,
+      url: details.url,
+      type: details.type,
+    });
+  },
+  { urls: ['<all_urls>'] }
+);
+
+chrome.webRequest.onCompleted.addListener(
+  (details) => {
+    if (details.tabId < 0) return;
+
+    const buf = getTabBuffer(details.tabId);
+    const pending = buf.pendingRequests.get(details.requestId);
+    buf.pendingRequests.delete(details.requestId);
+
+    addNetworkEntry(details.tabId, {
+      timestamp: new Date(details.timeStamp).toISOString(),
+      method: pending?.method || details.method || 'UNKNOWN',
+      url: details.url,
+      type: details.type || undefined,
+      statusCode: details.statusCode,
+      duration: pending ? Math.round(details.timeStamp - pending.startTime) : undefined,
+      error: false,
+    });
+  },
+  { urls: ['<all_urls>'] }
+);
+
+chrome.webRequest.onErrorOccurred.addListener(
+  (details) => {
+    if (details.tabId < 0) return;
+
+    const buf = getTabBuffer(details.tabId);
+    const pending = buf.pendingRequests.get(details.requestId);
+    buf.pendingRequests.delete(details.requestId);
+
+    addNetworkEntry(details.tabId, {
+      timestamp: new Date(details.timeStamp).toISOString(),
+      method: pending?.method || 'UNKNOWN',
+      url: details.url,
+      type: details.type || undefined,
+      statusCode: undefined,
+      duration: pending ? Math.round(details.timeStamp - pending.startTime) : undefined,
+      error: true,
+      errorDescription: details.error || undefined,
+    });
+  },
+  { urls: ['<all_urls>'] }
+);
+
+// ═══════════════════════════════════════════════════════════════════
+//  REPORT ASSEMBLY & DOWNLOAD
+// ═══════════════════════════════════════════════════════════════════
+
+const CAPTURE_LIMITATIONS = [
+  'Only captures events while the extension was active on the current page.',
+  'Cannot capture data from browser-internal pages (chrome://, about://).',
+  'Cannot capture data from restricted pages or cross-origin iframes with limited extension access.',
+  'Console logs, JS errors, and network requests that occurred before extension initialization are not included.',
+  'Network request/response bodies and headers are not captured.',
+  'Form field values and typed characters are not captured.',
+  'Visual capture renders a simplified DOM geometry, not a pixel-perfect screenshot.',
+];
+
+async function assembleReport(tabId) {
+  // Get data from content script (including screenshot and user description)
+  const contentData = await chrome.tabs.sendMessage(tabId, {
+    type: 'GET_BUG_REPORT_DATA',
+  });
+
+  if (contentData.cancelled) {
+    return { cancelled: true };
+  }
+
+  // Get network data for this tab
+  const tabBuffer = networkBuffers.get(tabId);
+  const networkRequests = tabBuffer ? [...tabBuffer.entries] : [];
+
+  // Build the raw report
+  const rawReport = {
+    schemaVersion: '2.0.0',
+    reportTimestamp: new Date().toISOString(),
+    extensionVersion: EXTENSION_VERSION,
+    pageMetadata: contentData.pageMetadata,
+    userDescription: contentData.userDescription,
+    screenshotBase64: contentData.screenshotBase64,
+    interactions: contentData.interactions,
+    consoleLogs: contentData.consoleLogs,
+    jsErrors: contentData.jsErrors,
+    networkRequests: networkRequests,
+  };
+
+  // Apply deep sanitization (Layer 4)
+  // Note: screenshotBase64 is a data URL, not user text — exclude from text sanitization
+  const screenshotBackup = rawReport.screenshotBase64;
+  rawReport.screenshotBase64 = '__SCREENSHOT_PLACEHOLDER__';
+
+  const redactions = {};
+  const sanitizedReport = Sanitizer.sanitizeDeep(rawReport, redactions);
+
+  // Restore screenshot
+  sanitizedReport.screenshotBase64 = screenshotBackup;
+
+  // Add sanitization summary
+  sanitizedReport.sanitizationSummary = Sanitizer.buildSummary(redactions);
+
+  // Add capture limitations
+  sanitizedReport.captureLimitations = CAPTURE_LIMITATIONS;
+
+  // Final validation (Layer 5)
+  // Temporarily remove screenshot for validation (it's binary data, not user text)
+  const reportForValidation = { ...sanitizedReport, screenshotBase64: undefined };
+  const validation = Sanitizer.validateFinalReport(reportForValidation);
+  if (!validation.passed) {
+    // If validation finds issues, do another sanitization pass
+    const reRaw = { ...sanitizedReport, screenshotBase64: '__SCREENSHOT_PLACEHOLDER__' };
+    const reSanitized = Sanitizer.sanitizeDeep(reRaw, redactions);
+    reSanitized.screenshotBase64 = screenshotBackup;
+    reSanitized.sanitizationSummary = Sanitizer.buildSummary(redactions);
+    reSanitized.sanitizationSummary.validationIssues = validation.issues;
+    reSanitized.captureLimitations = CAPTURE_LIMITATIONS;
+    return reSanitized;
+  }
+
+  return sanitizedReport;
+}
+
+async function downloadReport(tabId) {
+  // Step 1 & 2: Get data from content script and assemble the report with sanitization
+  const report = await assembleReport(tabId);
+
+  // Check if user cancelled the unified form
+  if (report.cancelled) {
+    return { cancelled: true };
+  }
+
+  // Step 3: Build HTML dashboard
+  const htmlStr = ReportTemplate.build(report);
+  const blob = new Blob([htmlStr], { type: 'text/html' });
+
+  // Convert blob to data URL for download
+  const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    reader.onloadend = () => {
+      const dataUrl = reader.result;
+      const filename = `bug_report_${Date.now()}.html`;
+
+      chrome.downloads.download(
+        {
+          url: dataUrl,
+          filename: filename,
+          saveAs: false,
+        },
+        (downloadId) => {
+          if (chrome.runtime.lastError) {
+            reject(chrome.runtime.lastError.message);
+          } else {
+            resolve({ downloadId, filename });
+          }
+        }
+      );
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+// ═══════════════════════════════════════════════════════════════════
+//  MESSAGE HANDLING
+// ═══════════════════════════════════════════════════════════════════
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'GET_REPORT_PREVIEW') {
+    const tabId = message.tabId;
+
+    chrome.tabs.sendMessage(tabId, { type: 'GET_PREVIEW_COUNTS' }, (counts) => {
+      if (chrome.runtime.lastError) {
+        sendResponse({ error: chrome.runtime.lastError.message });
+        return;
+      }
+
+      const tabBuffer = networkBuffers.get(tabId);
+      const networkCount = tabBuffer ? tabBuffer.entries.length : 0;
+
+      sendResponse({
+        url: counts.url,
+        interactionCount: counts.interactionCount,
+        consoleLogCount: counts.consoleLogCount,
+        jsErrorCount: counts.jsErrorCount,
+        networkRequestCount: networkCount,
+      });
+    });
+
+    return true; // async response
+  }
+
+  if (message.type === 'DOWNLOAD_REPORT') {
+    const tabId = message.tabId;
+
+    downloadReport(tabId)
+      .then((result) => {
+        if (result.cancelled) {
+          sendResponse({ success: false, cancelled: true });
+        } else {
+          sendResponse({ success: true, ...result });
+        }
+      })
+      .catch((error) => sendResponse({ success: false, error: String(error) }));
+
+    return true; // async response
+  }
+});