cjscrofani.com
•5 min read

Appshelf

Web DevelopmentChrome Extension

Transform your new tab into a beautiful, organized dashboard with quick search and keyboard shortcuts.

A clean, modern Chrome extension that transforms your new tab page into a beautiful, customizable bookmarks dashboard. Organize your favorite sites, search quickly, and boost your productivity with keyboard shortcuts and dark mode support.

View on GitHub

Key Features

Organized Bookmarks

Group your bookmarks in customizable folders for better organization and quick access

Quick Search

Search the web or your bookmarks directly from the new tab page

Clean Interface

Minimalist design that focuses on your content without distractions

Dark Mode

Toggle between light and dark themes based on your preference

Keyboard Shortcuts

Powerful keyboard shortcuts for quick bookmark and folder management

Import/Export

Easily backup and restore your bookmarks with import/export functionality

Installation

From Chrome Web Store
Coming Soon
  1. Visit the Chrome Web Store
  2. Click "Add to Chrome"
  3. Confirm the installation
Manual Installation
  1. Download or clone the repository from GitHub
  2. Open Chrome and navigate to chrome://extensions/
  3. Enable "Developer mode" in the top-right corner
  4. Click "Load unpacked" and select the app-shelf directory
  5. The extension is now installed and will replace your new tab page

Usage Guide

Adding Bookmarks
  1. Click the "+" button in the bottom-right corner
  2. Select "Add Bookmark"
  3. Enter the name and URL
  4. Choose a folder (or leave in "Unorganized")
  5. Click "Add Bookmark"
Managing Folders
  1. Click the "+" button in the bottom-right corner
  2. Select "Add Folder"
  3. Enter a name and unique ID for your folder
  4. Click "Add Folder"
Keyboard Shortcuts
Add a new bookmarkCtrl/Cmd + D
Add a new folderCtrl/Cmd + F
Export bookmarksCtrl/Cmd + S
Close popupsEsc

Project Structure

app-shelf/ ├── manifest.json # Extension manifest ├── newtab.html # Main HTML entry point ├── newtab.js # Main JavaScript entry point ├── css/ # Stylesheets │ ├── main.css # Main CSS entry point │ └── ... # Component-specific CSS files ├── js/ # JavaScript files │ ├── app.js # Main application controller │ ├── modules/ # Core functionality modules │ └── components/ # UI components └── assets/ # Icons and images └── icons/ # Extension icons

Development

App Shelf is built with vanilla JavaScript using ES6 modules for better code organization and maintainability. The extension follows modern web development best practices with a modular architecture.

Technology Stack

Vanilla JavaScript (ES6+)

Architecture

Modular ES6 Components

Storage

Chrome Storage API

License

MIT License

Additional Resources

GitHub RepositoryChrome Extension Docs