I found myself constantly jumping between 20 different tabs just to find a Markdown note, copy a canned response for a support ticket, or use an AI chat wrapper to rewrite an email. The friction was exhausting.

Instead of complaining about it, I decided to build a solution. That’s how NexoPad was born.

What is NexoPad?

At its core, NexoPad is an all-in-one browser workspace. I wanted to unify the tools I used every day directly into the browser's native layers, bringing the tools to the webpage, not the other way around.

It combines four main pillars:

1. Dynamic Text Expander: Injects templates directly into the active DOM.

2. Inline AI Assistant: A Bring-Your-Own-Key (BYOK) model for privacy-first AI.

3. Local-first Notes: Markdown editing with a web clipper.

4. Advanced Tab Manager: Native Chrome Tab Group integration.

The Tech Stack: Keeping it Vanilla

In a world obsessed with heavy JavaScript frameworks, I decided to keep the frontend of this extension as lean as possible. The UI elements (the popup, the persistent side panel, and the injected content scripts) are built primarily with HTML5 and Vanilla JavaScript.

For the backend—handling the Free/Pro/Teams tiers, data synchronization, and Role-Based Access Control (RBAC)—I rely on Supabase. It provides the perfect balance of a robust PostgreSQL database with real-time capabilities without the headache of managing my own servers.

The Biggest Technical Challenge: DOM Injection in SPAs

Building a Chrome extension in the Manifest V3 era is already tricky due to service worker lifecycles, but the real final boss was the DOM injection.

I wanted users to type a quick trigger (like /reply) and have NexoPad instantly expand that into a full template inside whatever website they were on. Doing this in a simple <textarea> is easy. But making it work flawlessly across complex Single-Page Applications (SPAs) like Zendesk, Gmail, or modern CRMs—without breaking their internal state (like React's virtual DOM)—was a massive headache.

I ended up building a custom parser that not only injects the text safely but also handles dynamic variables like {{input}} and Spintax on the fly. I even added a visual inspector that allows users to click any DOM element on the page (like a client's name or price) and extract it as a variable for their templates.

The Privacy First Approach: BYOK AI

I strongly dislike the current trend of AI wrappers charging $20/mo just to act as a middleman and log your data.

For the AI integration in NexoPad, I implemented a Bring-Your-Own-Key (BYOK) architecture. Users plug in their own API keys (OpenAI, Anthropic, Gemini), and the API calls go directly from their local browser to the provider. No middleman servers, no data logging. It allows users to highlight text on any page and trigger an AI prompt via a floating UI that replaces the original text seamlessly.

The Milestone: Google's Featured Badge

When I launched the very first iteration of this tool, it got crickets. But I kept iterating, listening to the few users I had, and refining the code.

Last week, that persistence paid off. The Google Chrome Web Store review team manually evaluated the extension and officially awarded it the ⭐ "Featured" badge. For an independent developer, getting that level of technical and design validation from Google feels incredible.

Wrapping Up

If you are tired of tab overload and want to test a native, privacy-first workspace, you can check out the extension here: nexopad.app

I’d love to hear from other extension developers! What has been your biggest challenge working with Manifest V3 or DOM injection? Let me know in the comments below.