Project Overview

A productivity-focused Chrome extension that replaces the default new tab page with a customisable dashboard featuring bookmarks, shortcuts, search functionality, and widgets.

Key Features

• Custom New Tab Page—Clean, customizable interface replacing Chrome’s default tab
• Integrated Search—Respects user’s default search engine via Chrome Search API
• Dynamic Clock & Date—Customisable position, style (digital/analog), and size options
• Bookmarks Integration—Direct access to Chrome bookmarks with folder navigation
• Customisable Shortcuts—Add, edit, and manage favorite website shortcuts with icon selection
• Flexible Backgrounds—Curated collection, random rotation, custom uploads, or solid colors
• Extensive Theming—Background dimming/blur, borders, accent colors, and widget management
• Context Menu Integration—Right-click to add shortcuts from any webpage
  
  

Technical Implementation

Architecture

• Manifest V3 compliance for modern Chrome extension standards
• Service Worker background script for context menu functionality
• Content Scripts for cross-page shortcut addition modal
• Local Storage for settings and data persistence
  
  

Key Technologies

• JavaScript ES6+—Modern syntax and features
• HTML5/CSS3 – Responsive design with custom properties
• Chrome Extension APIs—bookmarks, search, contextMenus, activeTab
• RemixIcon—Comprehensive icon library integration

Code Highlights

// Chrome Search API integration for user preference compliance
const performSearch = () => {
    const query = searchBox.value;
    if (query) {
        chrome.search.query({ text: query });
    }
};

// Dynamic icon loading and caching system
async function loadIconSVGs(iconNames) {
    const svgs = {};
    for (const iconName of iconNames) {
        const response = await fetch(chrome.runtime.getURL(`icons/${iconName}.svg`));
        if (response.ok) svgs[iconName] = await response.text();
    }
    return svgs;
}

Chrome Web Store Compliance

• Minimal Permissions—Only requests necessary permissions (bookmarks, contextMenus, activeTab, search)
• Single Purpose—Focused on new tab enhancement without bundled unrelated functionality
• User Privacy—All data stored locally, no external data collection
• Search API Compliance—Respects user’s default search engine settings
  
  

Performance Optimizations

• Icon Caching—Preloads and caches SVG icons for instant rendering
• Lazy Loading—Background images loaded on demand
• Efficient DOM Manipulation—Minimal reflows and repaints
• Local Storage—Fast data access without API calls
  
  

Development Challenges Solved

1. Chrome Web Store Policy Compliance—Navigated complex permission requirements and single-purpose guidelines
2. Cross-Context Communication—Implemented seamless data sharing between background, content, and popup scripts
3. Dynamic Theming System—Built flexible CSS custom property system for real-time theme updates
4. Icon Management—Created efficient SVG loading and caching system for 1000+ icons