Mosaic: New Tab Extension

Mosaic is what happens when you're tired of default browser new tab pages but also tired of extension bloat. It's a premium, minimal new tab replacement with zero npm dependencies, loading in under 5 milliseconds.

The Engineering Constraint: Zero Dependencies

The biggest constraint I set for myself: no build tools, no frameworks, no npm install. Every browser extension adds overhead — dependency trees, build pipelines, chunked JavaScript bundles. Mosaic ships as three files: index.html, styles.css, app.js.

The result: a new tab page that paints instantly, uses under 200KB of disk space, and has zero runtime dependency security vulnerabilities.

Feature Engineering

Drag-and-Drop Without Libraries

Most drag-and-drop implementations pull in @dnd-kit or sortablejs. Mosaic implements it from scratch using the HTML5 Drag and Drop API:

function initDragAndDrop() {
  let dragSrc = null;

  document.addEventListener('dragstart', (e) => {
    const card = e.target.closest('.shortcut-card');
    if (!card) return;
    dragSrc = card;
    card.style.opacity = '0.4';
    e.dataTransfer.effectAllowed = 'move';
  });

  document.addEventListener('dragover', (e) => {
    e.preventDefault();
    const card = e.target.closest('.shortcut-card');
    if (card && card !== dragSrc) {
      card.classList.add('drag-over');
    }
  });

  document.addEventListener('drop', (e) => {
    e.preventDefault();
    const target = e.target.closest('.shortcut-card');
    if (target && target !== dragSrc) {
      swapCards(dragSrc, target);
      persistOrder();
    }
  });
}

View Transition API Theme Toggle

The dark/light theme switch uses the native View Transition API for a cross-fade animation — no CSS animation libraries needed:

function toggleTheme() {
  if (!document.startViewTransition) {
    applyTheme(theme === 'dark' ? 'light' : 'dark');
    return;
  }
  document.startViewTransition(() => {
    applyTheme(theme === 'dark' ? 'light' : 'dark');
  });
}

Google S2 Favicon API with Fallback

Auto-loading favicons for any URL with graceful degradation:

function getFaviconUrl(url) {
  try {
    const domain = new URL(url).hostname;
    return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
  } catch {
    return null; // Falls back to letter-badge avatar
  }
}

If the favicon fails to load, the card renders a colored letter-badge generated from the site name — no broken image icons.

Multi-Engine Search

Tab cycles through Google → GitHub → DuckDuckGo → YouTube:

const ENGINES = [
  { name: 'Google', url: 'https://google.com/search?q=' },
  { name: 'GitHub', url: 'https://github.com/search?q=' },
  { name: 'DuckDuckGo', url: 'https://duckduckgo.com/?q=' },
  { name: 'YouTube', url: 'https://youtube.com/results?search_query=' },
];

Available on Microsoft Edge Add-ons

Mosaic has been submitted to the Microsoft Edge Add-ons store and is pending review. The extension uses Manifest V3 for future-proof browser compatibility.

Performance Numbers