⬡ Hellion NewTab v1.2.0

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 — 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 fuer Links — per Drag & Drop umsortierbar
• Bookmarks mit Favicon, Titel, optionaler Beschreibung
• Boards per Blur-Button verstecken (Privat-Modus)
• HTML-Import von Browser-Lesezeichen (Chrome, Edge, Firefox)
• JSON Export & Import (Backup & Restore)

Suchleiste

• Google, DuckDuckGo oder Bing — per Klick wechselbar
• Ein/ausblendbar über Settings

Sticky Note

• 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	Gruen	Circuit Board
Hellion Energy	Matrix-Gruen	Tactical

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	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. Repository als ZIP herunterladen oder git clone
2. chrome://extensions oeffnen (oder edge:// / brave:// / opera://)
3. Entwicklermodus aktivieren
4. "Entpackte Erweiterung laden" → Ordner auswählen in dem manifest.json liegt
5. Neuen Tab oeffnen

Firefox

Firefox benoetigt manifest.json im Format V2.

# manifest.json durch Firefox-Version ersetzen:
copy manifest.firefox.json manifest.json   # Windows
cp manifest.firefox.json manifest.json     # Linux/Mac

1. about:debugging#/runtime/this-firefox oeffnen
2. "Temporaeres Add-on laden"
3. Die manifest.json aus dem Projektordner auswählen

Hinweis: Temporaere Add-ons werden beim Browser-Neustart entfernt. Fuer dauerhafte Installation ist eine signierte .xpi-Datei noetig.

---

Browser-Bookmarks exportieren & importieren

Browser	Export-Pfad
Chrome / Edge	Einstellungen → Lesezeichen → Exportieren
Firefox	Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren

Die exportierte .html-Datei ueber den Import-Button in der Extension laden.

---

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

hellion-newtab/
├── 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 + 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 + Responsive Breakpoints
│
├── 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

# Release erstellen:
git tag v1.2.0
git push origin v1.2.0
# → GitHub Action erstellt automatisch Release mit ZIP-Dateien

---

Entwicklung

# 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

Kein Build-Schritt noetig. Dateien aendern, Extension neu laden, fertig.

---

Lizenz & Impressum

Proprietaeres Projekt — alle Rechte vorbehalten.

Entwickler	Florian Wathling
Unternehmen	Hellion Online Media
Web	hellion-media.de
Impressum	hellion-media.de/impressum
Bug Reports	kontakt@hellion-media.de

---

Changelog

v1.2.0 — 20.03.2026

• Projektstruktur in src/js/, src/css/, assets/ aufgeteilt
• 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 (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 (Privat-Modus)
• Drag & Drop auf Pointer Events umgestellt
• Opera / Opera GX Kompatibilitaet

v1.0.0 — 20.03.2026

• Initiales Release
• Boards & Bookmarks mit Drag & Drop
• 3 Themes (Astronaut, Cosmic Clock, Void Mage)
• HTML-Import (Browser-Lesezeichen)
• Settings Panel

---

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 — JonKazama-Hellion