I Spent 3 Months Building a SaaS Nobody Used. Then a 10-Minute Chrome Extension Got 2,000 Users.

It was 2:15 AM on a Tuesday when I launched my dream project: an AI-powered reader dashboard.

I had spent 90 days perfecting the tech stack: Next.js 14, Tailwind, Supabase auth, Stripe billing, PostgreSQL, and custom dark mode themes. I posted it on Twitter and Reddit, sat back, and waited for the signups to roll in.

Silence. Absolute crickets.

In two weeks, I had 12 visits and exactly 0 registered users. The cold reality hit me hard: Nobody wanted another web app tab open. People already had 40 tabs cluttering their browsers—they didn’t want to visit my site to solve their problem.

That’s when I noticed my own browsing habits. Every time I hit a paywall, an annoying popup, or a dense technical article, I didn’t open a new tool; I looked up at my extension toolbar.

The Pivot: Meeting Users Where They Already Live

I decided to take the core feature of my failed SaaS—an AI text processor—and slap it directly inside the user’s current webpage.

Instead of asking people to copy-paste text into my dashboard, what if they could highlight any text on any website, right-click, and get immediate results inside their existing workflow?

I opened VS Code, but immediately hit the infamous Manifest V3 brick wall:

1. Modern websites (like X/Twitter, LinkedIn, or GitHub) are Single Page Applications (SPAs). Standard document.onload scripts execute once and break the second the page re-renders.
2. Background service workers die every 30 seconds of inactivity.
3. Passing asynchronous messages between content scripts and background workers requires endless boilerplate.

I spent 4 hours just fighting Chrome permission flags and CORS errors before writing a single line of feature logic.

🛠️ The Technical Fix: Master the MutationObserver

If you want to build Chrome extensions that work seamlessly on modern, dynamic web pages (React, Next.js, Vue), forget `window.onload. You must use a MutationObserver` to watch the DOM as it dynamically updates.

Here is the exact battle-tested pattern every extension developer needs to know:

// content.js - Injecting features into dynamic SPAs without breaking performance
const targetSelector = '.tweet-text'; // Target element on dynamic site

function handleNewElements(nodes) {
  nodes.forEach((node) => {
    // Ensure it's an element node and matches our target
    if (node.nodeType === 1) {
      const targets = node.querySelectorAll?.(targetSelector) || [];
      targets.forEach(injectCustomUI);
    }
  });
}

// 1. Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.addedNodes.length) {
      handleNewElements(mutation.addedNodes);
    }
  }
});

// 2. Start observing the document body for injected DOM elements
observer.observe(document.body, {
  childList: true,
  subtree: true
});

function injectCustomUI(element) {
  if (element.dataset.processed) return; // Prevent duplicate injection
  element.dataset.processed = "true";

  // Custom logic here (e.g., adding an inline AI button)
  const btn = document.createElement('button');
  btn.innerText = '✨ AI Action';
  element.appendChild(btn);
}

Enter fullscreen mode Exit fullscreen mode

How ManifestGo Saved the Project

While knowing the MutationObserver pattern is crucial, wiring together manifest.json, background scripts, host permissions, options pages, and CSS isolation still took hours of tedious setup every time I had a new idea.

To speed up my workflow, I started using ManifestGo—an AI-powered Chrome extension builder designed specifically to skip the boilerplate nightmare.

Instead of hand-coding service worker lifecycle listeners and manifest permissions:

1. Prompted the Idea: I entered my concept into ManifestGo: “Build a Chrome extension that watches DOM changes on articles, highlights key technical terms, and shows an AI tooltip summary when hovered.”
2. Instant Architecture: ManifestGo generated a complete, Manifest V3-compliant folder structure complete with background workers, injected content scripts, and clean UI logic.
3. Shipped in Minutes: I downloaded the ready-to-load ZIP file, uploaded it to chrome://extensions in developer mode, and had a fully functional prototype running before my coffee got cold.

💡 The Big Lesson for Developers

Building for the web isn’t just about code; it’s about distribution friction.

• Web App Friction: User reads about tool → Clicks link → Navigates to site → Creates account → Confirms email → Tries to remember password → Bookmarks tab → Forgets it exists.
• Chrome Extension Friction: User clicks icon on a page they are already reading → Problem solved instantly.

If you have a SaaS idea sitting in your drafts, stop over-engineering full-stack web applications. Use a builder like ManifestGo to throw together a quick extension prototype, leverage native DOM APIs like MutationObserver, and test your idea directly where your users spend their time.

manifestgo.app