quickhub-extension

QuickHub - Brave Browser Extension

A beautiful browser extension for organizing your links in customizable groups on your new tab page, with integrated search and usage statistics.

Features

Installation

Load Unpacked Extension (Development)

  1. Open Brave browser
  2. Navigate to brave://extensions/
  3. Enable Developer mode (toggle in the top right corner)
  4. Click Load unpacked
  5. Select the quickhub-extension folder
  6. The extension is now installed!

Using the Extension

The extension will automatically replace your new tab page. Open a new tab to see it in action.

Usage

Simply type your search query in the search bar at the top and press Enter to search the web using your browser’s default search engine (respects your choice of Google, Bing, DuckDuckGo, etc.).

Statistics

The stats appear in the bottom-right corner (similar to the default new tab), displaying:

Creating Groups

  1. Click the “New Group” button in the top right
  2. Enter a name for your group
  3. Click Save

Collapsing/Expanding Groups

  1. Hover over a group to reveal the collapse button (▼)
  2. Click the collapse button to hide the links
  3. Click again to expand and show the links
  4. Collapsed state is saved automatically

Reordering Groups

  1. Hover over a group to see the drag handle (⋮⋮)
  2. Click and drag the group to reorder it
  3. Drop it in the desired position
  1. Hover over a link to see the drag handle (⋮⋮) on the left
  2. Click and drag the link to reorder it within the group
  3. Drop it in the desired position
  4. Links can only be moved within their own group

Setting a Background

  1. Click the Settings button (⚙️) in the top right
  2. Auto-rotating backgrounds:
    • Toggle on to get beautiful high-quality photos that change daily
    • Click “Get New Background” to instantly load a different random image
    • Each day automatically loads a fresh image
  3. Custom image: Toggle off auto-backgrounds, then click Upload Image to select your own
  4. Click Remove to restore the default background

Note: Custom images are limited to 5MB. Auto-backgrounds change daily and are cached locally.

Syncing Across Devices

  1. Click the Settings button (⚙️)
  2. Toggle “Sync across devices” on
  3. Make sure you’re logged into Brave on all your devices
  4. Your links will automatically sync everywhere!

Note: Brave’s sync has storage limits. If you have many groups, consider using Export/Import instead.

Backup and Restore

To backup your data:

  1. Click the Settings button (⚙️)
  2. Click Export Data
  3. Save the JSON file to a safe location

To restore from backup:

  1. Click the Settings button (⚙️)
  2. Click Import Data
  3. Select your backup JSON file
  4. Confirm the import

Tip: Export your data regularly as a backup, especially before making major changes!

  1. Hover over a group to reveal the action buttons
  2. Click the ”+” button (or click “Add Link” at the bottom of the group)
  3. Enter:
    • Link title - A friendly name for your link
    • Link URL - The full URL (e.g., https://example.com)
  4. Click Save

Managing Groups

Keyboard Shortcuts

Customization

You can customize the appearance by editing styles.css:

Color Scheme

The extension uses CSS variables for easy theming. Edit these in styles.css:

:root {
  --bg-primary: #0a0e14;      /* Main background */
  --bg-secondary: #141920;    /* Secondary background */
  --bg-tertiary: #1c2229;     /* Card backgrounds */
  --text-primary: #e6e9ef;    /* Primary text */
  --text-secondary: #9da3b0;  /* Secondary text */
  --accent: #f0c674;          /* Accent color */
  --accent-secondary: #6eb9d4; /* Secondary accent */
  --border: #2a3039;          /* Border color */
}

Fonts

The extension uses:

You can change these by editing the Google Fonts import in newtab.html.

Development

File Structure

quickhub-extension/
├── manifest.json       # Extension configuration
├── newtab.html        # New tab page HTML
├── styles.css         # Styling and animations
├── script.js          # Functionality and storage
├── icon16.png         # 16x16 icon
├── icon48.png         # 48x48 icon
├── icon128.png        # 128x128 icon
└── README.md          # This file

Storage

Data can be stored locally or synced across devices using Chrome’s storage APIs:

Local Storage (chrome.storage.local):

{
  linkGroups: [...],           // Your groups and links
  dailyVisits: {...},          // Daily visit statistics
  backgroundImage: "...",      // Custom background (base64)
  unsplashBackground: "...",   // Cached daily background
  unsplashDate: "...",        // Last fetch date
  autoBackground: true/false,  // Auto-background setting
  useSync: true/false         // Sync preference
}

Sync Storage (chrome.storage.sync):

{
  linkGroups: [...]  // Synced when "Sync across devices" is enabled
}

Privacy

This extension respects your privacy:

Permissions:

Note: When using auto-backgrounds, one image is fetched daily from Picsum Photos. No personal data is sent or collected.

Browser Compatibility

This extension is built for Chromium-based browsers using Manifest V3:

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

§Automated Releases: This repository uses GitHub Actions to automatically create releases. See .github/RELEASE_GUIDE.md for details.

License

MIT License - See LICENSE for full details.

Copyright (c) 2025 Mischa Dasberg

Permission is hereby granted, free of charge, to any person obtaining a copy of this software to use, modify, and distribute it. This software is provided “as is”, without warranty of any kind.

Support

If you find this extension helpful, consider:

Changelog

Version 1.0.0

Made with ❤️ for productivity enthusiasts

This site is open source. Improve this page.