- README, CHANGELOG, DISCLAIMER, SECURITY auf Englisch übersetzen - Projekt-Docs (architecture, patterns, widget-schema, style-guide) übersetzen - CODEOWNERS für Master-Branch-Schutz hinzufügen - release.yml auf Englisch übersetzen - STYLE_GUIDE von src/css/ nach docs/ verschieben
⬡ Hellion Dashboard v1.9.0
No account. No subscription. No cloud. All data stays 100% local.
A personal bookmark dashboard as a browser extension. Boards, drag & drop, 11 themes, search bar, widget system with notes, calculator, timer and more. All in the browser, all offline. No external data transmission, no trackers, no analytics, no ads.
Developed by Hellion Online Media — Florian Wathling — JonKazama-Hellion.
What this extension is NOT
- No cloud sync and no account system
- No data collection or telemetry
- No third-party dependencies or build tools
- No network traffic except favicon fetching (Google Favicons API)
What this extension IS
A local, private NewTab replacement for all major browsers.
Bookmarks are stored in chrome.storage.local, nothing leaves the browser.
What you see is what's saved. No magic.
Features
Boards & Bookmarks
- Boards as groups for links, sortable via drag & drop
- Bookmarks with favicon, title and optional description
- Hide boards with the blur button (privacy mode)
- HTML import from browser bookmarks (Chrome, Edge, Firefox)
- JSON export & import (backup & restore)
Search Bar
- Google, DuckDuckGo or Bing, switchable with a click
- Toggleable via Settings
Widget System
- Notes & Checklists — Floating note widgets with text or checklist template (max. 5)
- Calculator — Shunting-yard parser (no
eval()), history, keyboard input - Timer / Countdown — Saveable presets, Web Audio API alarm, mute toggle, tab title blinks on completion
- Image Reference — Images as floating reference widgets, Canvas API WebP conversion (max. 3, enable in Settings)
- Notebook Sidebar — All notes at a glance
- Widget Toolbar — Floating buttons for quick access, position (left/right) configurable in Settings
- All widgets: draggable, resizable, z-index stacking on click
11 Themes
| Theme | Accent | Style |
|---|---|---|
| Nebula | #b359ff Magenta |
Cosmic Nebula |
| Crescent | #d4bd8a Gold |
Minimalist Night |
| Event Horizon | #9d5cff Purple |
Deep Space |
| Merchantman | #2eb8b8 Emerald |
Industrial Sci-Fi |
| Julia & Jin | #7db3ff Aetherial Blue |
FFXIV Night |
| SC Sunset | #ff8c3d Amber |
Planet-Side |
| Hellion HUD | #32ff6a Neon Green |
Circuit Board |
| Hellion Energy | #1eff8e Acid Green |
Tactical |
| Satisfactory | #00b4d8 Cyan |
Industrial Desert |
| Avorion | #2ec4a0 Turquoise |
Deep Void |
| Hellion Stealth | #5ec2ff Tech Blue |
Tactical Recon |
Image Credits
| Theme | Source | License |
|---|---|---|
| Nebula | Temel / mrwashingt0n on Pixabay | Pixabay License (free) |
| Crescent | Daniil Silantev on Unsplash | Unsplash License (free) |
| Event Horizon | Own work, still frame from hellion-initiative.online | Hellion Online Media |
| Merchantman | Roberts Space Industries, made by the community | RSI Community Content |
| SC Sunset | Screenshot from Star Citizen by Cloud Imperium Games | Fan Content |
| Julia & Jin | Own work, Final Fantasy XIV screenshot, edited in Photoshop | Hellion Online Media |
| Hellion HUD | Own work, AI-generated and post-processed for hellion-media.de | Hellion Online Media |
| Hellion Energy | Own work, AI-generated for hellion-media.de | Hellion Online Media |
| Satisfactory | Screenshot from Satisfactory by Coffee Stain Studios | Fan Content |
| Avorion | Own work, screenshot from Avorion, Hellion Initiative ship | Hellion Online Media |
| Hellion Stealth | Screenshot from Star Citizen by Cloud Imperium Games | Fan Content |
Onboarding & Dialogs
- 7-step welcome flow on first launch with widget explanation and optional gaming starter board
- Custom frosted glass dialogs instead of native browser popups
- Backup reminder every 7 days (warns about data loss on browser reset)
Appearance & Settings
- Appearance modal (header button), theme picker, background image and all display options in one modal
- Settings panel (header button), widgets, data & help, danger zone
- About footer, developer info, license and support links permanently visible
- Compact mode, shorten titles, search bar toggle, open links in new tab, descriptions, hide extra bookmarks
- JSON export & import (backup & restore)
- Onboarding repeatable
- All UI labels in German (English coming in v2.1)
Browser Compatibility
| Browser | Status | Manifest |
|---|---|---|
| Chrome | ✅ Compatible | V3 (manifest.json) |
| Edge | ✅ Compatible | V3 (manifest.json) |
| Brave | ✅ Compatible | V3 (manifest.json) |
| Opera | ✅ Compatible | V3 (manifest.opera.json) |
| Opera GX | ✅ Compatible | V3 (manifest.opera.json) |
| Vivaldi | ✅ Compatible | V3 (manifest.json) |
| Firefox | ✅ Compatible | V3 (manifest.firefox.json) |
Firefox note: From v1.2.0 onwards the extension runs on Manifest V3, identical to Chrome/Edge.
manifest.firefox.jsonremains a separate file for Firefox-specific adjustments.
Installation
Chrome / Edge / Brave / Vivaldi
1. Download the repository as ZIP or git clone
2. Open chrome://extensions (or edge:// / brave://)
3. Enable developer mode
4. Click "Load unpacked" and select the folder containing manifest.json
5. Open a new tab
Opera / Opera GX
# Use manifest.opera.json as manifest.json:
copy manifest.opera.json manifest.json # Windows
cp manifest.opera.json manifest.json # Linux/Mac
1. Open opera://extensions
2. Enable developer mode
3. Click "Load unpacked" and select the folder
4. Open a new tab
Opera note: Opera GX prioritizes Speed Dial, the included workaround takes over the new tab page reliably. Details: src/js/opera/README.md
Firefox
# Use manifest.firefox.json as manifest.json:
copy manifest.firefox.json manifest.json # Windows
cp manifest.firefox.json manifest.json # Linux/Mac
1. Open about:debugging#/runtime/this-firefox
2. Click "Load Temporary Add-on"
3. Select the manifest.json from the project folder
Note: Temporary add-ons are removed on browser restart. For permanent installation a signed
.xpifile is required.
Importing Browser Bookmarks
| Browser | Export path |
|---|---|
| Chrome / Edge | Settings → Bookmarks → Export bookmarks |
| Firefox | Bookmarks → All Bookmarks → Import and Backup → Export Bookmarks to HTML |
Load the exported .html file via the Import button in the extension.
Privacy
- No external data transmission (except Google Favicons API for icons)
- Storage in
chrome.storage.local(Chromium) orbrowser.storage.local(Firefox) - No trackers, no analytics, no ads
- No cookies, no session data
- Storage quota check warns at 8 MB+ (limit: 10 MB)
- Permissions:
storage,bookmarks(all browsers) +tabs(Opera / Opera GX only)
Tech Stack
| Component | Details |
|---|---|
| Language | JavaScript (Vanilla ES2020, no frameworks) |
| Styling | CSS Custom Properties (theme system) |
| Fonts | Local fonts (Rajdhani, Inter, Cinzel) |
| Storage | chrome.storage.local / localStorage fallback |
| Favicons | Google Favicons API (/s2/favicons) |
| Drag & Drop | Pointer Events API (native) |
| Build | No build step, runs directly |
| CI/CD | GitHub Actions (security, quality, release) |
Architecture
hellion-newtab/
├── manifest.json # Chrome, Edge, Brave, Vivaldi (MV3)
├── manifest.firefox.json # Firefox (MV3)
├── manifest.opera.json # Opera / Opera GX (MV3 + workaround)
├── newtab.html # Main HTML (UI structure, modals, settings panel)
├── LICENSE # CC BY-NC-SA 4.0
├── CHANGELOG.md # Version history
├── SECURITY.md # Security policy and reporting
├── DISCLAIMER.md # Disclaimer and legal
│
├── src/
│ ├── js/
│ │ ├── storage.js # Storage abstraction + quota check
│ │ ├── state.js # Global state, defaults, helpers
│ │ ├── dialog.js # Custom dialog system (HellionDialog.alert/confirm)
│ │ ├── themes.js # Theme definitions & application (11 themes)
│ │ ├── boards.js # Board/bookmark rendering, event delegation, modals
│ │ ├── drag.js # Drag & drop (Pointer Events, board + bookmark)
│ │ ├── settings.js # Settings panel, appearance modal, accordion
│ │ ├── search.js # Search bar (Google, DuckDuckGo, Bing)
│ │ ├── widgets.js # Widget manager (registry, drag, resize, z-index)
│ │ ├── notes.js # Notes & checklists (multi-instance, max. 5)
│ │ ├── calculator.js # Calculator (shunting-yard, history)
│ │ ├── timer.js # Timer/countdown (presets, Web Audio alarm)
│ │ ├── image-ref.js # Image reference widget (Canvas API, sessionStorage)
│ │ ├── data.js # JSON export / import with validation
│ │ ├── onboarding.js # 7-step welcome flow + gaming board
│ │ ├── app.js # Init, clock, global events (entry point)
│ │ └── opera/ # Opera GX workaround scripts
│ │ ├── background.js # Tab management against Speed Dial
│ │ └── redirect.js # Content script redirect
│ └── css/
│ └── main.css # Styles + 11 themes + responsive breakpoints
│
├── assets/
│ ├── fonts/ # Local fonts (Rajdhani, Inter, Cinzel)
│ ├── themes/ # 11 theme background images (WebP only)
│ └── icons/
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
│
├── docs/
│ ├── architecture.md # Project architecture and init sequence
│ ├── widget-schema.md # Widget system API and schema reference
│ ├── patterns.md # Code patterns and conventions
│ └── style-guide.md # Design system and theme documentation
│
└── .github/
└── workflows/
├── security.yml # CodeQL analysis + dependency review
├── quality.yml # Structure, manifest, syntax, version consistency
└── release.yml # ZIP packages (Chrome + Firefox + Opera) + SHA256
Design Principles
- Zero Dependencies — No npm, no build, no framework. Runs directly
- Privacy First — All data local, no server contact
- Modular — 15 JS files with clear responsibilities
- Responsive — Tablet (768px) and smartphone (480px) breakpoints
- Secure —
createElementinstead ofinnerHTML, URL validation, storage error handling - Event Delegation — One listener per board list instead of per bookmark (performance)
- Theme System — CSS Custom Properties, 11 themes, custom background support
GitHub Actions
Security Scan (security.yml)
- CodeQL analysis — Static security analysis for JavaScript
- Dependency review — Checks pull requests for known vulnerabilities
- Schedule — Automatically weekly (Monday 06:00 UTC) + on push/PR
Code Quality (quality.yml)
- Project structure — All required files and folders present
- Manifest validation — JSON syntax, version, permissions
- JavaScript syntax check —
node --checkfor all JS files - Version consistency — manifest.json, manifest.firefox.json and newtab.html must match
- Icon check — All extension icons present
Release (release.yml)
- Trigger — On Git tag (
v*) - Packages — Chrome ZIP + Firefox ZIP + Opera ZIP (all MV3)
- Checksums — SHA256 for all artifacts
- GitHub Release — Automatic with installation instructions
# Create a release:
git tag v1.10.0
git push origin v1.10.0
# → GitHub Action automatically creates release with ZIP files
Development
# Clone the repository
git clone https://github.com/JonKazama-Hellion/Hellion-NewTab.git
# Load the extension in your browser (see Installation)
# After changes: reload the extension
chrome://extensions → Hellion NewTab → Reload
No build step needed. Change files, reload extension, done.
Security
Please do not report security vulnerabilities through public GitHub issues. Details on reporting, response times and security architecture: SECURITY.md
License & Legal
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
- Free for private use
- Sharing and modification allowed with attribution
- Commercial use without permission prohibited
Full license: LICENSE | CC BY-NC-SA 4.0
| Developer | Florian Wathling |
| Company | Hellion Online Media |
| Web | hellion-media.de |
| Imprint | hellion-media.de/impressum |
| Bug Reports | kontakt@hellion-media.de |
| Security | SECURITY.md |
| Support | Ko-fi |
Use of AI
Claude: Code analysis, bug fixing, documentation and proofreading. Me: Architecture, features and logic are planned, thought through and written by me.
Details: DISCLAIMER.md
Full version history: CHANGELOG.md
Hellion NewTab — Hellion Online Media — JonKazama-Hellion