DEV Community

Ari
Ari

Posted on

CAPS Chromium AI Plugin Skeleton

#kiro #webdev #github #typescript

Here is a polished, ready-to-publish blog entry based on your project description. I have formatted it to work well on platforms like Dev.to, Medium, or Hashnode.

Giving AI Its Sight Back: Introducing CAPS, the Chromium AI Plugin Skeleton 🦴

Project Repository: CAPS-Chromium-AI-Plugin-Skeleton

AI assistants have revolutionized how we write code, but until now, they’ve had a significant blind spot: Browser Extensions.

An AI agent can generate a popup.ts file, but it doesn't know if the popup actually renders. It can write a background worker, but it can't see if it initializes correctly. It’s like asking someone to paint a masterpiece while blindfolded—they can make the strokes, but they can't check their work.

I wanted to give AI its sight back.

Meet CAPS (Chromium AI Plugin Skeleton), a production-ready Chrome Extension V3 template that transforms AI from a blind code generator into a verified extension builder.

💡 The Inspiration

The concept fits perfectly into the "Skeleton Crew" category. This isn't just about building one extension; it's about building the foundation that lets AI build ANY extension.

I needed a skeleton that was lean enough to understand, but complete enough to verify. The bones that let the monster come alive.

🛠️ What it Does

CAPS solves the "verification gap." It automates the feedback loop so that when an AI (or a human) makes a change, they know immediately if it works.

The magic happens via a robust verification loop:

  • 🧪 E2E tests with Playwright: Actually loads the extension in a real Chrome browser.
  • 🔄 CI/CD Pipeline: Runs build → lint → unit tests → E2E tests on every change.
  • 📦 One-Command Launch: npm start builds and opens Chrome with the extension loaded.
  • ✅ Instant Feedback: The AI knows immediately if its code works.

⚡ Features at a Glance

For developers, this is a complete starter kit. For AI, it’s a superpower.

  • AI-Friendly Codebase: Clean TypeScript structure that AI context windows can digest easily.
  • Manifest V3 Ready: Modern API implementation with service workers (no legacy background pages).
  • Automated DevOps: GitHub Actions handling parallel linting, testing, and release artifact generation.
  • Strict Tooling: ESLint, Prettier, and Husky pre-configured.

Ready-to-Use Commands:

npm start           # Build + launch Chrome with extension loaded
npm run build       # Production build
npm test:e2e        # Run E2E tests in Chrome (Headless supported)
npm run check       # Type-check, lint, format, and test
Enter fullscreen mode Exit fullscreen mode

📚 Proof of Concept: One-Prompt Builds

To prove the skeleton works, I used it to generate two distinct extensions using single prompts with no manual intervention.

Extension Description Repository
🍬 Candy Counter A sidebar that counts candies on web pages. View Repo
⏱️ Countdown Timer A timer with notification integration. View Repo

🧠 How I Built It (With Kiro)

I used Kiro instrumentally throughout the development phase. We used a process I call "Spec Driven Development."

  1. Architecture: We started with natural conversations to define the three pillars: Chrome Foundation, Pipeline, and Quality Tooling.
  2. The Playwright Breakthrough: Getting Playwright to test extensions in headless mode is notoriously difficult. Kiro helped navigate the complexity of --headless=new, Service Worker detection, and dynamic Extension ID extraction to build e2e/fixtures.ts.
  3. CI/CD: We designed a parallel GitHub Actions workflow using Xvfb for headless testing in CI.

Challenges Overcome

  • The Headless Paradox: Extensions usually need a visible window. We had to utilize specific flags and event waiting to make tests pass in a CI environment.
  • Manifest V3 Async Nature: The shift to Service Workers introduced race conditions in testing. I added robust event listeners to ensure tests only run once the worker is active.

🚀 Why CAPS Matters

There are other extension boilerplates out there, but they are designed for humans who can manually check their work. CAPS is the first AI-First Architecture.

  1. Zero Configuration: Clone and deploy. The Chrome profile is persisted locally, so you don't need to re-login every session.
  2. Self-Correcting Agents: Because the tests run automatically, Kiro (or other agents) can see when a test fails and self-correct their code without human prompting.
  3. True E2E Verification: We aren't mocking the browser. If the test passes, the extension actually works.

🔮 What's Next?

  • MCP Integration: Creating a Model Context Protocol server to expose testing capabilities directly to AI assistants.
  • Recipe Library: Pre-built patterns for context menus, tab management, and more.
  • Cross-Browser Support: Extending the skeleton for Firefox and Edge.

🧟 One Last Thing...

The "Skeleton" metaphor isn't just a name. Using this skeleton, Kiro was able to implement two separate extensions with a single prompt, perfectly, without feedback, and without bugs.

The skeleton is alive. Now it's time to see what monsters you can create with it. 🎃

Check out the CAPS project on GitHub

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.