bug-report-js 2.3.0

package/manifest.json

@@ -0,0 +1,43 @@
+{
+    "manifest_version": 3,
+    "name": "Local Bug Logger",
+    "version": "2.0.0",
+    "description": "Fängt die letzten 50 Aktionen ab und generiert einen DSGVO-sicheren HTML-Bug-Report mit annotiertem Screenshot.",
+    "permissions": [
+        "activeTab",
+        "scripting",
+        "webRequest",
+        "downloads"
+    ],
+    "host_permissions": [
+        "<all_urls>"
+    ],
+    "background": {
+        "service_worker": "background.js"
+    },
+    "content_scripts": [
+        {
+            "matches": [
+                "<all_urls>"
+            ],
+            "js": [
+                "content.js"
+            ],
+            "run_at": "document_start"
+        }
+    ],
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "icons/icon16.png",
+            "48": "icons/icon48.png",
+            "128": "icons/icon128.png"
+        },
+        "default_title": "Bug Report erstellen"
+    },
+    "icons": {
+        "16": "icons/icon16.png",
+        "48": "icons/icon48.png",
+        "128": "icons/icon128.png"
+    }
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "bug-report-js",
+  "version": "2.3.0",
+  "description": "A drop-in JavaScript widget to generate comprehensive bug reports with DOM capture, interactions, console logs, and JS errors.",
+  "main": "website/bug-report.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TeamStriebigSebastian/Bug-Report-Widget.git"
+  },
+  "keywords": [
+    "bug",
+    "report",
+    "widget",
+    "feedback",
+    "DOM capture",
+    "interactions"
+  ],
+  "author": "Antigravity",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/TeamStriebigSebastian/Bug-Report-Widget/issues"
+  },
+  "homepage": "https://github.com/TeamStriebigSebastian/Bug-Report-Widget#readme"
+}

package/popup.css

@@ -0,0 +1,289 @@
+/* ═══════════════════════════════════════════════════════════════════
+   Bug Report Extension — Popup Styles
+   ═══════════════════════════════════════════════════════════════════ */
+
+:root {
+  --bg-primary: #0f1117;
+  --bg-secondary: #1a1d27;
+  --bg-card: #222636;
+  --bg-card-hover: #2a2f42;
+  --border: #2d3348;
+  --text-primary: #e8eaf0;
+  --text-secondary: #9096a8;
+  --text-muted: #636882;
+  --accent-primary: #6366f1;
+  --accent-primary-hover: #7577f5;
+  --accent-glow: rgba(99, 102, 241, 0.2);
+  --danger: #ef4444;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  width: 340px;
+  min-height: 200px;
+  overflow: hidden;
+}
+
+/* ── Container ──────────────────────────────────────────────────── */
+
+.popup-container {
+  padding: 16px;
+}
+
+/* ── Header ─────────────────────────────────────────────────────── */
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.popup-logo {
+  font-size: 22px;
+  line-height: 1;
+}
+
+.popup-title {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  flex: 1;
+}
+
+.popup-version {
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  padding: 2px 7px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+}
+
+/* ── States ─────────────────────────────────────────────────────── */
+
+.popup-state {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.popup-state.hidden {
+  display: none;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Loading ────────────────────────────────────────────────────── */
+
+#stateLoading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 0;
+  gap: 14px;
+}
+
+.spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Info Text ──────────────────────────────────────────────────── */
+
+.popup-info-text {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+
+.popup-info-text.subtle {
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.popup-status-text {
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* ── URL Preview ────────────────────────────────────────────────── */
+
+.popup-url {
+  font-size: 11.5px;
+  color: var(--accent-primary);
+  background: var(--bg-secondary);
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  margin-bottom: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+/* ── Stats Grid ─────────────────────────────────────────────────── */
+
+.popup-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px;
+  text-align: center;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.stat-card:hover {
+  background: var(--bg-card-hover);
+  border-color: var(--accent-primary);
+}
+
+.stat-icon {
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.03em;
+}
+
+.stat-label {
+  font-size: 10.5px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-top: 2px;
+}
+
+/* ── Privacy Note ───────────────────────────────────────────────── */
+
+.popup-privacy-note {
+  font-size: 11px;
+  color: var(--text-muted);
+  background: rgba(34, 197, 94, 0.06);
+  border: 1px solid rgba(34, 197, 94, 0.15);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+/* ── Buttons ────────────────────────────────────────────────────── */
+
+.popup-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 14px;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: inherit;
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: white;
+  box-shadow: 0 2px 8px var(--accent-glow);
+}
+
+.btn-primary:hover {
+  background: var(--accent-primary-hover);
+  box-shadow: 0 4px 16px var(--accent-glow);
+  transform: translateY(-1px);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.btn-secondary {
+  background: var(--bg-card);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+
+.btn-icon {
+  font-size: 14px;
+}
+
+/* ── Success / Error ────────────────────────────────────────────── */
+
+.success-icon,
+.error-icon {
+  font-size: 36px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+#stateSuccess,
+#stateError {
+  text-align: center;
+  padding: 24px 0 8px;
+}

package/popup.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bug Report</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="popup-container">
+    <!-- Header -->
+    <div class="popup-header">
+      <div class="popup-logo">🐛</div>
+      <div class="popup-title">Bug Report</div>
+      <div class="popup-version" id="versionLabel">v2.0.0</div>
+    </div>
+
+    <!-- Loading State -->
+    <div class="popup-state" id="stateLoading">
+      <div class="spinner"></div>
+      <p class="popup-status-text">Collecting data…</p>
+    </div>
+
+    <!-- Preview State -->
+    <div class="popup-state hidden" id="statePreview">
+      <p class="popup-info-text">
+        The following information will be included in the bug report for the current page:
+      </p>
+
+      <div class="popup-url" id="previewUrl" title=""></div>
+
+      <div class="popup-stats">
+        <div class="stat-card">
+          <div class="stat-icon">👆</div>
+          <div class="stat-value" id="statInteractions">0</div>
+          <div class="stat-label">Interactions</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">📋</div>
+          <div class="stat-value" id="statConsoleLogs">0</div>
+          <div class="stat-label">Console Logs</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">⚠️</div>
+          <div class="stat-value" id="statErrors">0</div>
+          <div class="stat-label">JS Errors</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">🌐</div>
+          <div class="stat-value" id="statNetwork">0</div>
+          <div class="stat-label">Network Req.</div>
+        </div>
+      </div>
+
+      <p class="popup-privacy-note">
+        🔒 Sensitive data (emails, tokens, passwords, API keys) will be automatically redacted.
+      </p>
+
+      <div class="popup-actions">
+        <button class="btn btn-primary" id="btnDownload">
+          <span class="btn-icon">📥</span>
+          Download Report
+        </button>
+        <button class="btn btn-secondary" id="btnCancel">
+          Cancel
+        </button>
+      </div>
+    </div>
+
+    <!-- Success State -->
+    <div class="popup-state hidden" id="stateSuccess">
+      <div class="success-icon">✅</div>
+      <p class="popup-status-text">Report downloaded!</p>
+      <p class="popup-info-text subtle">
+        Bitte die HTML-Datei an Ihren Support-Kanal weiterleiten.
+      </p>
+    </div>
+
+    <!-- Error State -->
+    <div class="popup-state hidden" id="stateError">
+      <div class="error-icon">❌</div>
+      <p class="popup-status-text">Something went wrong</p>
+      <p class="popup-info-text subtle" id="errorMessage"></p>
+      <div class="popup-actions">
+        <button class="btn btn-secondary" id="btnRetry">Retry</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

package/popup.js

@@ -0,0 +1,126 @@
+/**
+ * popup.js — Popup controller for Bug Report Extension
+ *
+ * Manages:
+ *  - Loading preview counts from background/content script
+ *  - Showing summary before download
+ *  - Triggering download or cancel
+ */
+
+// ── DOM References ───────────────────────────────────────────────
+
+const stateLoading = document.getElementById('stateLoading');
+const statePreview = document.getElementById('statePreview');
+const stateSuccess = document.getElementById('stateSuccess');
+const stateError = document.getElementById('stateError');
+
+const previewUrl = document.getElementById('previewUrl');
+const statInteractions = document.getElementById('statInteractions');
+const statConsoleLogs = document.getElementById('statConsoleLogs');
+const statErrors = document.getElementById('statErrors');
+const statNetwork = document.getElementById('statNetwork');
+const errorMessage = document.getElementById('errorMessage');
+
+const btnDownload = document.getElementById('btnDownload');
+const btnCancel = document.getElementById('btnCancel');
+const btnRetry = document.getElementById('btnRetry');
+
+// ── State Management ─────────────────────────────────────────────
+
+function showState(stateEl) {
+  [stateLoading, statePreview, stateSuccess, stateError].forEach((el) => {
+    el.classList.add('hidden');
+  });
+  stateEl.classList.remove('hidden');
+}
+
+// ── Get Active Tab ───────────────────────────────────────────────
+
+async function getActiveTabId() {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  return tab?.id;
+}
+
+// ── Load Preview ─────────────────────────────────────────────────
+
+async function loadPreview() {
+  showState(stateLoading);
+
+  try {
+    const tabId = await getActiveTabId();
+    if (!tabId) throw new Error('No active tab found.');
+
+    const preview = await chrome.runtime.sendMessage({
+      type: 'GET_REPORT_PREVIEW',
+      tabId,
+    });
+
+    if (preview.error) throw new Error(preview.error);
+
+    // Populate UI
+    const truncatedUrl =
+      preview.url.length > 60 ? preview.url.substring(0, 57) + '…' : preview.url;
+    previewUrl.textContent = truncatedUrl;
+    previewUrl.title = preview.url;
+
+    statInteractions.textContent = preview.interactionCount || 0;
+    statConsoleLogs.textContent = preview.consoleLogCount || 0;
+    statErrors.textContent = preview.jsErrorCount || 0;
+    statNetwork.textContent = preview.networkRequestCount || 0;
+
+    showState(statePreview);
+  } catch (err) {
+    errorMessage.textContent = err.message || 'Could not load page data.';
+    showState(stateError);
+  }
+}
+
+// ── Download Report ──────────────────────────────────────────────
+
+async function triggerDownload() {
+  btnDownload.disabled = true;
+  btnDownload.innerHTML = '<span class="spinner" style="width:16px;height:16px;border-width:2px;"></span> Generating…';
+
+  try {
+    const tabId = await getActiveTabId();
+    if (!tabId) throw new Error('No active tab found.');
+
+    const result = await chrome.runtime.sendMessage({
+      type: 'DOWNLOAD_REPORT',
+      tabId,
+    });
+
+    if (result.cancelled) {
+      // User cancelled the Ist/Soll prompt — reset button and stay on preview
+      btnDownload.disabled = false;
+      btnDownload.innerHTML = '<span class="btn-icon">📥</span> Download Report';
+      return;
+    }
+
+    if (!result.success) throw new Error(result.error || 'Download failed.');
+
+    showState(stateSuccess);
+
+    // Auto-close after 2.5 seconds
+    setTimeout(() => window.close(), 2500);
+  } catch (err) {
+    errorMessage.textContent = err.message || 'Failed to generate report.';
+    showState(stateError);
+  }
+}
+
+// ── Event Listeners ──────────────────────────────────────────────
+
+btnDownload.addEventListener('click', triggerDownload);
+
+btnCancel.addEventListener('click', () => {
+  window.close();
+});
+
+btnRetry.addEventListener('click', () => {
+  loadPreview();
+});
+
+// ── Init ─────────────────────────────────────────────────────────
+
+loadPreview();