bug-report-js 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +144 -0
  3. package/background.js +279 -0
  4. package/content.js +905 -0
  5. package/icons/icon128.png +0 -0
  6. package/icons/icon16.png +0 -0
  7. package/icons/icon48.png +0 -0
  8. package/manifest.json +43 -0
  9. package/package.json +27 -0
  10. package/popup.css +289 -0
  11. package/popup.html +92 -0
  12. package/popup.js +126 -0
  13. package/report-template.js +623 -0
  14. package/sanitizer.js +262 -0
  15. package/website/README.md +282 -0
  16. package/website/bug-report.js +1089 -0
  17. package/website/docs.html +241 -0
  18. package/website/index.html +996 -0
package/website/docs.html ADDED
@@ -0,0 +1,241 @@
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bug Report Widget v2 — Dokumentation | striebig.pm</title>
7
+ <meta name="description" content="Dokumentation des Bug Report Widget v2 — mit annotiertem Screenshot, Ist/Soll-Beschreibung und HTML-Export.">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
13
+ body {
14
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
15
+ background: #0f1117; color: #e8eaf0; line-height: 1.7;
16
+ -webkit-font-smoothing: antialiased;
17
+ }
18
+
19
+ /* ── Hero ─────────────────────────────────── */
20
+ .hero {
21
+ background: linear-gradient(135deg, #1a1d27 0%, #0f1117 50%, #1a1d27 100%);
22
+ border-bottom: 1px solid #2d3348;
23
+ padding: 80px 24px 60px; text-align: center;
24
+ position: relative; overflow: hidden;
25
+ }
26
+ .hero::before {
27
+ content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
28
+ width: 600px; height: 600px; border-radius: 50%;
29
+ background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
30
+ pointer-events: none;
31
+ }
32
+ .hero-badge {
33
+ display: inline-flex; align-items: center; gap: 6px;
34
+ background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
35
+ color: #a5b4fc; font-size: 12px; font-weight: 600; padding: 4px 14px;
36
+ border-radius: 100px; margin-bottom: 20px; letter-spacing: 0.03em;
37
+ text-decoration: none; transition: all 0.2s;
38
+ }
39
+ .hero-badge:hover { background: rgba(99,102,241,0.2); transform: translateY(-1px); }
40
+ .hero h1 {
41
+ font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em;
42
+ margin-bottom: 16px; position: relative;
43
+ }
44
+ .hero h1 span { color: #818cf8; }
45
+ .hero p {
46
+ font-size: 1.05rem; color: #9096a8; max-width: 560px; margin: 0 auto;
47
+ }
48
+
49
+ /* ── Content ──────────────────────────────── */
50
+ .content { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
51
+
52
+ h2 {
53
+ font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em;
54
+ margin: 40px 0 12px; color: #e8eaf0;
55
+ display: flex; align-items: center; gap: 8px;
56
+ }
57
+ h2 .icon { font-size: 1.1em; }
58
+
59
+ p { color: #9096a8; margin-bottom: 16px; font-size: 0.95rem; }
60
+ strong { color: #e8eaf0; }
61
+
62
+ /* ── Demo Buttons ─────────────────────────── */
63
+ .demo-buttons {
64
+ display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 32px;
65
+ }
66
+ .demo-buttons button {
67
+ padding: 9px 18px; border-radius: 8px; font-size: 13px; cursor: pointer;
68
+ font-weight: 500; font-family: inherit; border: 1px solid #2d3348;
69
+ background: #1a1d27; color: #c4c9d8; transition: all 0.15s ease;
70
+ }
71
+ .demo-buttons button:hover {
72
+ background: #222636; border-color: #6366f1; color: #e8eaf0;
73
+ box-shadow: 0 0 12px rgba(99,102,241,0.15);
74
+ }
75
+ .demo-buttons button.danger { border-color: #7f1d1d; color: #fca5a5; }
76
+ .demo-buttons button.danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
77
+
78
+ /* ── Demo Form ────────────────────────────── */
79
+ .demo-form {
80
+ background: #1a1d27; border: 1px solid #2d3348; border-radius: 12px;
81
+ padding: 24px; margin: 20px 0 32px;
82
+ }
83
+ .demo-form label {
84
+ display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #c4c9d8;
85
+ }
86
+ .demo-form input, .demo-form select, .demo-form textarea {
87
+ width: 100%; padding: 10px 12px; border: 1px solid #2d3348; border-radius: 8px;
88
+ font-size: 14px; margin-bottom: 16px; font-family: inherit;
89
+ background: #0f1117; color: #e8eaf0; transition: border-color 0.15s;
90
+ }
91
+ .demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus {
92
+ outline: none; border-color: #6366f1;
93
+ }
94
+ .demo-form input::placeholder, .demo-form textarea::placeholder { color: #4b5068; }
95
+ .demo-form button {
96
+ background: #6366f1; color: #fff; border: none; padding: 10px 24px;
97
+ border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 600;
98
+ font-family: inherit; transition: all 0.15s;
99
+ }
100
+ .demo-form button:hover { background: #5558e6; }
101
+
102
+ /* ── Code Block ───────────────────────────── */
103
+ pre {
104
+ background: #1a1d27; color: #a5b4fc; padding: 16px 20px; border-radius: 10px;
105
+ border: 1px solid #2d3348; overflow-x: auto; margin: 16px 0 24px;
106
+ font-size: 13px; font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
107
+ }
108
+
109
+ /* ── Info Cards ───────────────────────────── */
110
+ .info-grid {
111
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
112
+ gap: 12px; margin: 20px 0 32px;
113
+ }
114
+ .info-card {
115
+ background: #1a1d27; border: 1px solid #2d3348; border-radius: 10px; padding: 16px;
116
+ transition: border-color 0.15s;
117
+ }
118
+ .info-card:hover { border-color: #6366f1; }
119
+ .info-card .card-icon { font-size: 20px; margin-bottom: 8px; }
120
+ .info-card .card-title { font-size: 13px; font-weight: 600; color: #e8eaf0; margin-bottom: 4px; }
121
+ .info-card .card-desc { font-size: 12px; color: #636882; line-height: 1.5; }
122
+
123
+ /* ── Footer ───────────────────────────────── */
124
+ .footer {
125
+ text-align: center; padding: 32px 24px; border-top: 1px solid #2d3348;
126
+ color: #4b5068; font-size: 13px;
127
+ }
128
+ .footer a { color: #818cf8; text-decoration: none; }
129
+ .footer a:hover { text-decoration: underline; }
130
+ </style>
131
+ </head>
132
+ <body>
133
+
134
+ <div class="hero">
135
+ <a href="https://github.com/TeamStriebigSebastian/Bug-Report-Widget" target="_blank" class="hero-badge">
136
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
137
+ GitHub Projekt
138
+ </a>
139
+ <h1>Bug Report <span>Widget v2</span></h1>
140
+ <p>Strukturierte Fehlerberichte mit annotiertem Screenshot, Ist/Soll-Beschreibung und HTML-Dashboard — direkt aus dem Browser.</p>
141
+ </div>
142
+
143
+ <div class="content">
144
+
145
+ <h2><span class="icon">🧪</span> Ausprobieren</h2>
146
+ <p>Teste das Widget auf der <strong><a href="index.html" style="color:#818cf8;">NeonStore Demo-Seite →</a></strong></p>
147
+ <p>Oder nutze die Buttons unten, fülle das Formular aus, scrolle die Seite. Wenn du bereit bist, klicke auf den <strong>🐛 Button</strong> unten rechts.</p>
148
+
149
+ <div class="demo-buttons">
150
+ <button onclick="alert('Button geklickt!')">Klick mich</button>
151
+ <button onclick="console.log('Test Log')">console.log</button>
152
+ <button onclick="console.warn('Test Warning')">console.warn</button>
153
+ <button onclick="console.error('Test Error')">console.error</button>
154
+ <button onclick="fetch('https://httpbin.org/get')">Fetch Request</button>
155
+ <button onclick="fetch('https://httpbin.org/status/500')">Fetch 500</button>
156
+ <button class="danger" onclick="undefinedFunction()">JS Error auslösen</button>
157
+ </div>
158
+
159
+ <h2><span class="icon">📝</span> Demo-Formular</h2>
160
+ <p>Formularwerte werden <strong>niemals</strong> erfasst — nur die Tatsache, dass ein Change- oder Submit-Event stattfand.</p>
161
+
162
+ <div class="demo-form">
163
+ <label for="name">Name</label>
164
+ <input type="text" id="name" placeholder="Dein Name">
165
+ <label for="email">E-Mail</label>
166
+ <input type="email" id="email" placeholder="name@beispiel.de">
167
+ <label for="category">Kategorie</label>
168
+ <select id="category">
169
+ <option>Fehlerbericht</option>
170
+ <option>Feature-Wunsch</option>
171
+ <option>Frage</option>
172
+ </select>
173
+ <label for="desc">Beschreibung</label>
174
+ <textarea id="desc" rows="3" placeholder="Beschreibe das Problem..."></textarea>
175
+ <button type="button" onclick="event.preventDefault(); alert('Formular gesendet (Demo)')">Absenden</button>
176
+ </div>
177
+
178
+ <h2><span class="icon">📦</span> Was wird erfasst?</h2>
179
+
180
+ <div class="info-grid">
181
+ <div class="info-card">
182
+ <div class="card-icon">📸</div>
183
+ <div class="card-title">Annotierter Screenshot</div>
184
+ <div class="card-desc">DOM-Geometrie wird auf Canvas gerendert, Klick-Pfad als nummerierte Kreise annotiert</div>
185
+ </div>
186
+ <div class="info-card">
187
+ <div class="card-icon">📝</div>
188
+ <div class="card-title">Ist / Soll</div>
189
+ <div class="card-desc">Benutzer beschreibt aktuelles und erwartetes Verhalten vor der Report-Erstellung</div>
190
+ </div>
191
+ <div class="info-card">
192
+ <div class="card-icon">📄</div>
193
+ <div class="card-title">HTML Dashboard</div>
194
+ <div class="card-desc">Standalone HTML-Datei mit eingebetteten Daten, Screenshot und aufklappbaren Sektionen</div>
195
+ </div>
196
+ <div class="info-card">
197
+ <div class="card-icon">👆</div>
198
+ <div class="card-title">Interaktionen</div>
199
+ <div class="card-desc">Klicks (mit X/Y-Koordinaten), Scrolls, Tastatureingaben, Formular-Events, Navigation</div>
200
+ </div>
201
+ <div class="info-card">
202
+ <div class="card-icon">📋</div>
203
+ <div class="card-title">Console Logs</div>
204
+ <div class="card-desc">log, warn, error, info, debug — max. 100 Einträge</div>
205
+ </div>
206
+ <div class="info-card">
207
+ <div class="card-icon">⚠️</div>
208
+ <div class="card-title">JS Errors</div>
209
+ <div class="card-desc">Runtime-Fehler und unbehandelte Promise-Rejections mit Stack Trace</div>
210
+ </div>
211
+ <div class="info-card">
212
+ <div class="card-icon">🌐</div>
213
+ <div class="card-title">Network Requests</div>
214
+ <div class="card-desc">fetch() und XMLHttpRequest — Methode, URL, Status, Dauer</div>
215
+ </div>
216
+ <div class="info-card">
217
+ <div class="card-icon">🔒</div>
218
+ <div class="card-title">Datenschutz</div>
219
+ <div class="card-desc">E-Mails, Tokens, Passwörter, API-Keys, Telefonnummern werden automatisch maskiert</div>
220
+ </div>
221
+ <div class="info-card">
222
+ <div class="card-icon">🚫</div>
223
+ <div class="card-title">Nicht erfasst</div>
224
+ <div class="card-desc">Keine Formularwerte, keine getippten Zeichen, keine Mausbewegungen, keine nativen Screenshots/Videos</div>
225
+ </div>
226
+ </div>
227
+
228
+ <h2><span class="icon">⚡</span> Integration</h2>
229
+ <p>Ein einziges Script-Tag genügt:</p>
230
+ <pre>&lt;script src="bug-report.js"&gt;&lt;/script&gt;</pre>
231
+ <p>Der 🐛 Button und das Modal werden automatisch eingeblendet. Keine weiteren Abhängigkeiten.</p>
232
+
233
+ </div>
234
+
235
+ <div class="footer">
236
+ <p>© 2026 <a href="https://striebig.pm">striebig.pm</a> &nbsp;|&nbsp; <a href="https://striebig.pm/impressum/">Impressum</a> &nbsp;|&nbsp; <a href="https://github.com/TeamStriebigSebastian/Bug-Report-Widget" target="_blank">GitHub</a></p>
237
+ </div>
238
+
239
+ <script src="bug-report.js"></script>
240
+ </body>
241
+ </html>