How We Built a Chrome Extension for 54 Developer Tools

We built a Chrome extension that gives developers instant access to all 54 tools from the browser toolbar. Here is how.

Manifest V3

Manifest V3 is required for all new Chrome extensions. Key differences from V2: service workers instead of background pages, promise-based APIs, and stricter CSP.

The Popup

Our popup is a 400px wide panel with a search bar, category filters, and a grid of all 54 tools. Pure vanilla HTML/CSS/JS — no build step. Each tool links to the web app with the appropriate path.

Context Menus

Right-click any selected text and choose "Decode JWT", "Encode Base64", "URL Encode", or "Generate Hash". The extension opens the tool page with the selected text pre-filled via URL parameters.

New Tab Override

Optional: replace your new tab page with a clean dashboard showing the current time, quick-access tool cards, and a search bar. Stored in chrome.storage.sync so the preference syncs across devices.

Key Learnings

Keep it simple — vanilla JS is fine for extension popups

Use chrome.storage.sync for preferences (not localStorage)

Context menus are registered in the service worker on install

Deep-link to the web app rather than reimplementing tool logic in the extension

The extension is available in our repository under the /extension directory.