Portfolio Project

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

Project Gallery