README komplett ueberarbeitet im Hellion-Projektstil

Badges, Tech-Stack-Tabelle, Architektur-Baum, GitHub Actions Dokumentation, Design-Prinzipien, AI-Hinweis und vollstaendiger Changelog mit allen v1.2.0 Fixes.
2026-03-20 22:53:22 +01:00
parent 87c30b24d0
commit 0ff9f1e252
1 changed files with 226 additions and 101 deletions
@@ -1,75 +1,115 @@
-# ⬡ Hellion NewTab
+# ⬡ Hellion NewTab v1.2.0

-> **Privates Projekt — Proprietär · Nicht open source**  
-> Entwickelt von Florian Wathling · [Hellion Online Media](https://hellion-media.de)
+![Version](https://img.shields.io/badge/Version-1.2.0-blue)
+![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla%20ES2020-F7DF1E?logo=javascript&logoColor=black)
+![Manifest](https://img.shields.io/badge/Manifest-V3%20%7C%20V2-green)
+![License](https://img.shields.io/badge/License-Propriet%C3%A4r-red)
+![Privacy](https://img.shields.io/badge/Privacy-100%25%20Lokal-448f45)

-Persönlicher Bookmark-Dashboard als Browser-Extension.  
 **Kein Account. Kein Abo. Keine Cloud. Alle Daten bleiben 100% lokal.**

+Ein persoenlicher Bookmark-Dashboard als Browser-Extension.
+Boards, Drag & Drop, 8 Themes, Suchleiste, Sticky Notes — alles im Browser, alles offline.
+Keine externe Datenübertragung, keine Tracker, keine Analytics, keine Werbung.
+
+Entwickelt von **[Hellion Online Media](https://hellion-media.de)** — JonKazama-Hellion.
+
+---
+
+## Was diese Extension NICHT ist
+
+- Kein Cloud-Sync und kein Account-System
+- Keine Datenerfassung oder Telemetrie
+- Keine Drittanbieter-Abhängigkeiten oder Build-Tools
+- Kein Netzwerkverkehr ausser Favicon-Abruf (Google Favicons API)
+
+## Was diese Extension IST
+
+Ein lokaler, privater NewTab-Ersatz für alle gaengigen Browser.
+Bookmarks werden in `chrome.storage.local` gespeichert — nichts verlässt den Browser.
+Was angezeigt wird, ist was gespeichert ist. Keine Magie.
+
 ---

 ## Features

-### 📋 Boards & Bookmarks
- Boards als Gruppen für Links — per Drag & Drop umsortierbar
+### Boards & Bookmarks
+
+- Boards als Gruppen fuer Links — per Drag & Drop umsortierbar
 - Bookmarks mit Favicon, Titel, optionaler Beschreibung
- Boards per 🔒 blurren (Privat-Modus)
+- Boards per Blur-Button verstecken (Privat-Modus)
+- HTML-Import von Browser-Lesezeichen (Chrome, Edge, Firefox)
+- JSON Export & Import (Backup & Restore)
+
+### Suchleiste

-### 🔍 Suchleiste
 - Google, DuckDuckGo oder Bing — per Klick wechselbar
+- Ein/ausblendbar über Settings

-### 📝 Sticky Note
- Schwebendes Notiz-Widget, frei positionierbar, persistent
+### Sticky Note

-### 🎨 8 Themes
+- Schwebendes Notiz-Widget, frei positionierbar
+- Text und Position werden persistent gespeichert
+
+### 8 Themes

 | Theme | Akzent | Stil |
-|---|---|---|
+| --- | --- | --- |
 | Astronaut | Orange | Dark / Space |
 | Cosmic Clock | Gold | Warm / Mystisch |
 | Void Mage | Lila | Arkan |
 | Merchantman | Teal | Industrial Sci-Fi |
 | Julia & Jin | Blau | FFXIV Night |
 | SC Sunset | Amber | Planet-Side |
-| Hellion HUD | Grün | Circuit Board |
-| Hellion Energy | Matrix-Grün | Tactical |
+| Hellion HUD | Gruen | Circuit Board |
+| Hellion Energy | Matrix-Gruen | Tactical |

-### ⚙️ Settings
- Compact mode · Shorten titles · Open in new tab
- Show descriptions · Hide extra bookmarks (5/10/20)
- Hintergrundbild (URL oder lokaler Upload)
+### Settings
+
+- Compact Mode — reduziert Abstände fuer mehr Bookmarks
+- Shorten Titles — kürzt lange Titel auf eine Zeile
+- Open in New Tab — Bookmarks in neuem Tab oeffnen
+- Show Descriptions — Beschreibungen unter Bookmarks anzeigen
+- Hide Extra Bookmarks — Boards ab 5/10/20 Bookmarks einklappen
+- Hintergrundbild — URL oder lokaler Upload
 - Suchleiste ein/ausblenden
 - JSON Export / Import
+- Danger Zone — Reset aller Daten

 ---

 ## Browser-Kompatibilität

 | Browser | Status | Manifest |
-|---|---|---|
-| Chrome | ✅ | V3 (`manifest.json`) |
-| Edge | ✅ | V3 (`manifest.json`) |
-| Brave | ✅ | V3 (`manifest.json`) |
-| Opera | ✅ | V3 (`manifest.json`) |
-| Opera GX | ✅ | V3 (`manifest.json`) |
-| Vivaldi | ✅ | V3 (`manifest.json`) |
-| Firefox | ✅ | V2 (`manifest.firefox.json`) |
+| --- | --- | --- |
+| Chrome | Kompatibel | V3 (`manifest.json`) |
+| Edge | Kompatibel | V3 (`manifest.json`) |
+| Brave | Kompatibel | V3 (`manifest.json`) |
+| Opera | Kompatibel | V3 (`manifest.json`) |
+| Opera GX | Kompatibel | V3 (`manifest.json`) |
+| Vivaldi | Kompatibel | V3 (`manifest.json`) |
+| Firefox | Kompatibel | V2 (`manifest.firefox.json`) |
+
+> **Firefox-Hinweis:** Firefox verwendet aktuell Manifest V2. Mozilla arbeitet an MV3-Support —
+> sobald stabil, wird die Extension migriert. MV2 wird von Mozilla weiterhin unterstuetzt.

 ---

 ## Installation

 ### Chrome / Edge / Brave / Opera / Opera GX / Vivaldi
-```
-1. Repo klonen oder ZIP entpacken
-2. chrome://extensions  (oder edge:// / brave:// / opera://)
+
+```text
+1. Repository als ZIP herunterladen oder git clone
+2. chrome://extensions oeffnen (oder edge:// / brave:// / opera://)
 3. Entwicklermodus aktivieren
-4. "Entpackte Erweiterung laden" → Ordner "hellion-newtab" auswählen
-5. Neuen Tab öffnen ✓
+4. "Entpackte Erweiterung laden" → Ordner auswählen in dem manifest.json liegt
+5. Neuen Tab oeffnen
 ```

 ### Firefox
-Firefox benötigt `manifest.json` im Format V2.
+
+Firefox benoetigt `manifest.json` im Format V2.

 ```bash
 # manifest.json durch Firefox-Version ersetzen:
@@ -77,71 +117,139 @@ copy manifest.firefox.json manifest.json   # Windows
 cp manifest.firefox.json manifest.json     # Linux/Mac
 ```

-```
-1. about:debugging#/runtime/this-firefox öffnen
-2. "Temporäres Add-on laden"
-3. Die manifest.json aus dem hellion-newtab Ordner auswählen
+```text
+1. about:debugging#/runtime/this-firefox oeffnen
+2. "Temporaeres Add-on laden"
+3. Die manifest.json aus dem Projektordner auswählen
 ```

-> **Hinweis Firefox:** Temporäre Add-ons werden beim Browser-Neustart entfernt.  
-> Für dauerhafte Installation ist eine signierte `.xpi`-Datei nötig.
-
-> **Wichtig allgemein:** Den Ordner auswählen, in dem `manifest.json` direkt liegt.
+> **Hinweis:** Temporaere Add-ons werden beim Browser-Neustart entfernt.
+> Fuer dauerhafte Installation ist eine signierte `.xpi`-Datei noetig.

 ---

 ## Browser-Bookmarks exportieren & importieren

-**Chrome / Edge:**
-```
-Einstellungen → Lesezeichen → Exportieren
-```
-**Firefox:**
-```
-Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren
-```
+| Browser | Export-Pfad |
+| --- | --- |
+| Chrome / Edge | Einstellungen → Lesezeichen → Exportieren |
+| Firefox | Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren |

-Die exportierte `.html` Datei über den `Import`-Button in der Extension laden.
+Die exportierte `.html`-Datei ueber den **Import**-Button in der Extension laden.

 ---

-## Projektstruktur
+## Datenschutz

-```
+- Keine externe Datenübertragung (ausser Google Favicons API fuer Icons)
+- Speicherung in `chrome.storage.local` (Chromium) bzw. `browser.storage.local` (Firefox)
+- Keine Tracker, keine Analytics, keine Werbung
+- Keine Cookies, keine Session-Daten
+- Storage-Quota-Pruefung warnt bei 8 MB+ (Limit: 10 MB)
+- Permissions: `storage`, `bookmarks`
+
+---
+
+## Tech-Stack
+
+| Komponente | Details |
+| --- | --- |
+| Sprache | JavaScript (Vanilla ES2020, keine Frameworks) |
+| Styling | CSS Custom Properties (Theme-System) |
+| Fonts | Google Fonts (Rajdhani, Inter, Cinzel) |
+| Storage | chrome.storage.local / localStorage Fallback |
+| Favicons | Google Favicons API (`/s2/favicons`) |
+| Drag & Drop | Pointer Events API (nativ) |
+| Build | Kein Build-Schritt — direkt lauffähig |
+| CI/CD | GitHub Actions (Security, Quality, Release) |
+
+---
+
+## Architektur
+
+```text
 hellion-newtab/
-├── manifest.json              ← Chrome, Edge, Brave, Opera, Vivaldi (MV3)
-├── manifest.firefox.json      ← Firefox (MV2)
-├── newtab.html                ← Haupt-HTML
+├── manifest.json                   # Chrome, Edge, Brave, Opera, Vivaldi (MV3)
+├── manifest.firefox.json           # Firefox (MV2)
+├── newtab.html                     # Haupt-HTML (UI-Struktur, Modals, Settings Panel)
 │
 ├── src/
 │   ├── js/
-│   │   ├── storage.js         ← Storage Abstraction (chrome.storage / localStorage)
-│   │   ├── state.js           ← Globaler State, Defaults, Hilfsfunktionen
-│   │   ├── themes.js          ← Theme-Definitionen & Anwendungslogik
-│   │   ├── boards.js          ← Board/Bookmark Rendering & Modals
-│   │   ├── drag.js            ← Drag & Drop (Pointer Events)
-│   │   ├── settings.js        ← Settings Panel Logik
-│   │   ├── search.js          ← Suchleiste
-│   │   ├── sticky.js          ← Sticky Note Widget
-│   │   ├── data.js            ← JSON Export / Import
-│   │   └── app.js             ← Init, Clock, globale Events (Einstiegspunkt)
+│   │   ├── storage.js              # Storage Abstraction + Quota-Pruefung
+│   │   ├── state.js                # Globaler State, Defaults, Hilfsfunktionen
+│   │   ├── themes.js               # Theme-Definitionen & Anwendungslogik
+│   │   ├── boards.js               # Board/Bookmark Rendering, Event Delegation, Modals
+│   │   ├── drag.js                 # Drag & Drop (Pointer Events, Board + Bookmark)
+│   │   ├── settings.js             # Settings Panel (Toggles, Theme-Picker, Background)
+│   │   ├── search.js               # Suchleiste (Google, DuckDuckGo, Bing)
+│   │   ├── sticky.js               # Sticky Note Widget (Drag, Persist, Toggle)
+│   │   ├── data.js                 # JSON Export / Import mit Validierung
+│   │   └── app.js                  # Init, Clock, globale Events (Einstiegspunkt)
 │   └── css/
-│       └── main.css           ← Styles + Theme-System (CSS Custom Properties)
+│       └── main.css                # Styles + Theme-System + Responsive Breakpoints
 │
-└── assets/
-    ├── themes/
-    │   ├── bg-astronaut.jpg
-    │   ├── bg-cosmic-clock.jpg
-    │   ├── bg-void-mage.jpg
-    │   ├── bg-merchantman.webp
-    │   ├── bg-julia-jin.png
-    │   ├── bg-sc-sunset.jpg
-    │   ├── bg-hellion-hud.png
-    │   └── bg-hellion-energy.jpg
-    └── icons/
-        ├── icon16.png
-        ├── icon48.png
-        └── icon128.png
+├── assets/
+│   ├── themes/                     # 8 Theme-Hintergrundbilder
+│   │   ├── bg-astronaut.jpg
+│   │   ├── bg-cosmic-clock.jpg
+│   │   ├── bg-void-mage.jpg
+│   │   ├── bg-merchantman.webp
+│   │   ├── bg-julia-jin.png
+│   │   ├── bg-sc-sunset.jpg
+│   │   ├── bg-hellion-hud.png
+│   │   └── bg-hellion-energy.jpg
+│   └── icons/
+│       ├── icon16.png
+│       ├── icon48.png
+│       └── icon128.png
+│
+└── .github/
+    └── workflows/
+        ├── security.yml            # CodeQL-Analyse + Dependency Review
+        ├── quality.yml             # Struktur, Manifest, Syntax, Versions-Konsistenz
+        └── release.yml             # ZIP-Pakete (Chrome + Firefox) + SHA256 Checksummen
+```
+
+### Design-Prinzipien
+
+- **Zero Dependencies** — Kein npm, kein Build, kein Framework. Direkt lauffähig
+- **Privacy First** — Alle Daten lokal, kein Server-Kontakt
+- **Modular** — 10 JS-Dateien mit klarer Zuständigkeit
+- **Responsive** — Tablet (768px) und Smartphone (480px) Breakpoints
+- **Secure** — createElement statt innerHTML, URL-Validierung, Storage-Fehlerbehandlung
+- **Event Delegation** — Ein Listener pro Board-Liste statt pro Bookmark (Performance)
+- **Theme-System** — CSS Custom Properties, 8 Themes, Custom-Background-Support
+
+---
+
+## GitHub Actions
+
+### Security Scan (`security.yml`)
+
+- **CodeQL-Analyse** — Statische Sicherheitsanalyse fuer JavaScript
+- **Dependency Review** — Prueft Pull Requests auf bekannte Schwachstellen
+- **Zeitplan** — Automatisch wöchentlich (Montag 06:00 UTC) + bei Push/PR
+
+### Code Quality (`quality.yml`)
+
+- **Projektstruktur** — Alle Pflichtdateien und -ordner vorhanden
+- **Manifest-Validierung** — JSON-Syntax, Version, Permissions
+- **JavaScript Syntax-Check** — `node --check` fuer alle JS-Dateien
+- **Versions-Konsistenz** — manifest.json, manifest.firefox.json und newtab.html muessen übereinstimmen
+- **Icon-Pruefung** — Alle Extension-Icons vorhanden
+
+### Release (`release.yml`)
+
+- **Trigger** — Bei Git-Tag (`v*`)
+- **Pakete** — Chrome-ZIP (MV3) + Firefox-ZIP (MV2)
+- **Checksummen** — SHA256 fuer alle Artefakte
+- **GitHub Release** — Automatisch mit Installationsanleitung
+
+```bash
+# Release erstellen:
+git tag v1.2.0
+git push origin v1.2.0
+# → GitHub Action erstellt automatisch Release mit ZIP-Dateien
 ```

 ---
@@ -149,27 +257,25 @@ hellion-newtab/
 ## Entwicklung

 ```bash
-# Nach Änderungen: Extension im Browser neu laden
-chrome://extensions → Hellion NewTab → ↻ Neu laden
+# Repository klonen
+git clone https://github.com/JonKazama-Hellion/Hellion-NewTab.git
+
+# Extension im Browser laden (siehe Installation)
+
+# Nach Aenderungen: Extension neu laden
+chrome://extensions → Hellion NewTab → Neu laden
 ```

---
-
-## Datenschutz
-
- Keine externe Datenübertragung
- Speicherung in `chrome.storage.local` (Chromium) bzw. `browser.storage.local` (Firefox)
- Keine Tracker, keine Analytics, keine Werbung
- Permissions: `storage`, `bookmarks`
+Kein Build-Schritt noetig. Dateien aendern, Extension neu laden, fertig.

 ---

 ## Lizenz & Impressum

-**Proprietäres Projekt — alle Rechte vorbehalten.**
+**Proprietaeres Projekt — alle Rechte vorbehalten.**

 | | |
-|---|---|
+| --- | --- |
 | **Entwickler** | Florian Wathling |
 | **Unternehmen** | Hellion Online Media |
 | **Web** | [hellion-media.de](https://hellion-media.de) |
@@ -181,29 +287,48 @@ chrome://extensions → Hellion NewTab → ↻ Neu laden
 ## Changelog

 ### v1.2.0 — 20.03.2026
+
 - Projektstruktur in `src/js/`, `src/css/`, `assets/` aufgeteilt
- JS in Module aufgeteilt (storage, state, themes, boards, drag, settings, search, sticky, data, app)
- Firefox-Kompatibilität (`manifest.firefox.json`, Manifest V2)
- Vivaldi bestätigt kompatibel
+- JS in 10 Module aufgeteilt (storage, state, themes, boards, drag, settings, search, sticky, data, app)
+- Firefox-Kompatibilitaet (`manifest.firefox.json`, Manifest V2)
+- Vivaldi bestaetigt kompatibel
+- Theme-Bildpfade korrigiert (Settings Preview)
+- URL-Validierung bei Bookmark-Erstellung
+- JSON-Import mit Board- und Bookmark-Struktur-Validierung
+- XSS-Schutz: createElement statt innerHTML fuer Bookmarks
+- Storage-Quota-Pruefung mit Warnung bei 8 MB+
+- Event Delegation fuer Bookmark-Klicks (Performance)
+- Responsive Design (Tablet 768px, Smartphone 480px)
+- Sticky Note Header-Kollision behoben
+- FileReader-Fehlerbehandlung fuer Hintergrundbild-Upload
+- GitHub Actions: Security Scan, Code Quality, Release Automation

 ### v1.1.0 — 20.03.2026
- 5 neue Themes
- Suchleiste (Google / DDG / Bing)
+
+- 5 neue Themes (Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy)
+- Suchleiste (Google / DuckDuckGo / Bing)
 - Sticky Note Widget
 - JSON Export & Import
 - Datum neben der Uhr
 - About / Impressum in Settings
- Board Blur-Funktion
+- Board Blur-Funktion (Privat-Modus)
 - Drag & Drop auf Pointer Events umgestellt
- Opera / Opera GX Kompatibilität
+- Opera / Opera GX Kompatibilitaet

 ### v1.0.0 — 20.03.2026
+
 - Initiales Release
 - Boards & Bookmarks mit Drag & Drop
- 3 Themes
- HTML-Import
+- 3 Themes (Astronaut, Cosmic Clock, Void Mage)
+- HTML-Import (Browser-Lesezeichen)
 - Settings Panel

 ---

-> **Hinweis:** Bei der Entwicklung dieses Projekts wurde [Claude Code (Opus 4.6)](https://claude.ai) von Anthropic als Assistent zur Fehleridentifikation und Code-Qualitätssicherung eingesetzt.
+### Einsatz von AI
+
+AI (Claude Code, Opus 4.6 von Anthropic) wurde als Hilfsmittel eingesetzt — fuer Fehleridentifikation, Code-Review und Qualitaetssicherung. Architektur, Features und alle Entscheidungen sind Eigenleistung.
+
+---
+
+**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion