DEV Community

Nowshad Hossain Rahat
Nowshad Hossain Rahat

Posted on

Why I Chose Svelte and Zero-Knowledge Encryption for My New Chrome Extension

#javascript #svelte #security #privacy

Building a clipboard manager sounds simple until you consider the two biggest constraints in 2026: Privacy and Browser Performance.

I just launched the Encrypted Clipboard Manager, and I wanted to share some of the technical decisions I made while building it-specifically why I moved away from common extension patterns in favor of Svelte and E2E encryption.

1. Why Svelte for a Chrome Extension?

Most extensions use React or Vue, but for a tool that lives in the Side Panel and interacts with every page you visit, bundle size and "cold-start" time are everything.

Svelte was a non-negotiable choice for me because:

  • No Virtual DOM: Svelte compiles to highly optimized vanilla JS. When the Side Panel is opened, it's interactive almost instantly.
  • Reactive State: Managing clipboard history updates across multiple components (Sidebar, Floating Notch, Settings) is incredibly clean with Svelte’s $state and $effect signals.

I used a centralized Svelte store to handle real-time updates from the background service worker, ensuring that the UI always reflects the local IndexedDB state without unnecessary re-renders.

2. Implementing Zero-Knowledge Encryption

"Privacy by design" is hard. For this extension, I implemented a Zero-Knowledge Architecture using the Web Crypto API.

The flow works like this:

  1. Local Encryption: Before an item (text or image) is synced to the cloud, it is encrypted locally in the background service worker using a user-defined master password.
  2. PBKDF2 Derivation: I use PBKDF2 to derive a strong encryption key from the password, combined with a local salt.
  3. No Keys on Server: The raw password and the derived key never leave the user's browser.

This ensures that even if my backend was compromised, the data stored in MongoDB is just unreadable blobs.

3. Utilizing the Chrome Side Panel API

One of the biggest UX improvements I made was moving away from the traditional "Popup" UI. Popups are ephemeral—they close as soon as you click the page.

By utilizing the Side Panel API, the extension now has a persistent home.

// Opening the side panel on command
await chrome.sidePanel.setOptions({
  path: 'sidebar/index.html',
  enabled: true
});
Enter fullscreen mode Exit fullscreen mode

This allows for a true multitasking workflow where you can drag and drop items from your history directly into your active tabs.

4. Performance & Memory Management

Handling images in a clipboard history can quickly bloat memory if not handled correctly. I used IndexedDB for local storage and implemented a proper thumbnail generation service in an offscreen document.

This keeps the main background script lightweight while offloading the heavy lifting of image processing to a separate thread, preventing browser jank.

The Result

The result is a clipboard manager that is:

  • Fast: Svelte-powered and Side-Panel native.
  • Private: Zero-knowledge encryption by default.
  • Reliable: Handles binary data and complex sync logic without breaking a sweat.

I’d love to hear from other extension devs, how are you handling E2E encryption in your apps?

Check out the project: EncryptedClipboard.app

or upvote us on Peerlist!

Top comments (0)