diff --git a/README.md b/README.md index 643b7fc..516301e 100644 --- a/README.md +++ b/README.md @@ -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