I Built a Zero-Latency Chrome Extension with Svelte 5 (Runes) & Tailwind v4

The Problem

I’ve tried almost every "New Tab" extension out there. They usually fall into two categories:

1. Bloated: Takes 2 seconds to load because it's fetching data from 5 different APIs.
2. Cluttered: Filled with motivational quotes, random wallpapers, or ads I didn't ask for.

I wanted something instant, keyboard-first, and private. So, I built DevDash.

The Tech Stack: Bleeding Edge

I didn't just want to build an extension; I wanted to experiment with the latest tools in the ecosystem. Here is the stack I chose and why:

• Svelte 5 (Runes): I used the new Runes syntax ($state, $effect, $props) for everything. It makes reactivity incredibly explicit and removes a lot of the "magic" from Svelte 4.
• Tailwind CSS v4: Yes, v4. It’s faster, has zero configuration (CSS-first), and integrates seamlessly with Vite.
• SvelteKit + Vite: Used for the build pipeline to compile everything down to a static, zero-runtime-overhead extension.
• TypeScript: Strict mode enabled. No any allowed.

---

Feature Highlights

1. Zero Latency

Because Svelte compiles to vanilla JavaScript, there is no heavy runtime. The new tab loads instantly.

2. The Command Palette (Omnibar)

I’m a Vim user, so I hate reaching for the mouse. The central Omnibar lets you:

• Search Google (g <query>)
• Search GitHub (gh <repo>)
• Open localhost ports (l 3000 -> localhost:3000)
• Navigate history with ↑ / ↓

3. Privacy First

Everything is stored in chrome.storage.local. No analytics, no tracking, no external API calls unless you explicitly ask for them (like the Weather widget).

🛠️ Under the Hood: Svelte 5 Runes

If you haven't tried Svelte 5 yet, here is a snippet from my Clock.svelte component. Look how clean the state management is:

<script lang="ts">
  let time = $state(new Date());

  $effect(() => {
    const interval = setInterval(() => {
      time = new Date();
    }, 1000);

    return () => clearInterval(interval);
  });
</script>

<div class="font-mono text-6xl">
  {time.toLocaleTimeString()}
</div>

No more onMount, no more imports for lifecycle hooks. Just standard JS with $effect.

🎨 Tailwind v4 Configuration

One of the coolest parts of this project was using Tailwind v4. I didn't need a tailwind.config.js. Everything is configured directly in CSS:

@import "tailwindcss";

@theme {
  --color-bg-primary: #0d1117;
  --color-accent: #58a6ff;
  --font-mono: "JetBrains Mono", monospace;
}

Roadmap & Contributing

This project is fully open source. I’m currently working on:

• [ ] Firefox/Edge support
• [ ] A plugin system for custom widgets
• [ ] Cloud sync (optional)

---

🤝 Call for Contributors

I built the core of DevDash, but I want this to be the ultimate developer dashboard—and I can't build every widget alone.

If you are looking for a project to contribute to (or just want to play with Svelte 5 runes), this is a great place to start.

Here is what I need help with right now:

1. Build New Widgets 🧩

The widget system is modular. I’m looking for community contributions for:

• Crypto/Stocks Ticker: A simple price watcher.
• Hacker News Feed: A minimal list of top stories.
• Todoist/Notion Integration: Sync tasks via API.
• System Monitor: CPU/Ram usage (using Chrome System API).

2. Browser Support 🌐

Currently, the build pipeline targets Chrome. I need help testing and tweaking the manifest.json for:

• Firefox (Gecko)
• Microsoft Edge
• Brave

3. Internationalization (i18n) 🌍

I want DevDash to be accessible to everyone. Setting up a lightweight translation layer would be a huge win.

💡 How to Start

I’ve tagged a few issues as good first issue on the repo.

1. Fork the repo.
2. Run pnpm install && pnpm dev.
3. Create a new file in src/lib/components/widgets/.
4. Open a PR!

Check out the Issues tab here: Issues

---

If you want to see how a Svelte 5 app is structured in production or just want a faster new tab page, check out the repo!

🔗 GitHub Repo:

Zayan-Mohamed / dev-dash

A zero-latency, keyboard-first Chrome Extension that replaces your new tab with a developer-focused dashboard built with Svelte 5 and Tailwind CSS v4.

A Zero-Latency Developer New Tab Extension

Replace your Chrome new tab with a blazing-fast, keyboard-first developer dashboard

Features • Screenshots • Installation • Usage • Development • Tech Stack

---

📸 Screenshots

Main dashboard with clock, top sites, and omnibar

Optional widgets: Pomodoro, Notepad, Weather, and more

Customizable settings panel

---

✨ Features

🎯 Core Features

• ⚡ Zero Latency - Instant page load with compiled Svelte (no runtime overhead)
• ⌨️ Keyboard First - Command palette with Vim-inspired shortcuts
• 🎨 Hacker Aesthetic - GitHub Dark Dimmed theme with monospace fonts
• 🔒 Privacy Focused - 100% local storage, zero tracking, no external calls
• 🚀 Modern Stack - Built with Svelte 5 (runes), SvelteKit, TypeScript, Tailwind v4

🧩 Widgets & Components

Widget	Description	Status
🕐 Clock	Large digital clock with 12/24h format & dynamic greeting	✅ Core
🔗 Top Sites	Most visited sites from Chrome history	✅ Core
⌨️ Omnibar	Universal search/command bar (Google, GitHub,

…

View on GitHub

Stars and PRs are welcome!