L10 XP00

How to vibe code a Chrome extension

Chrome extensions are a hidden gem for vibe coding: small surface area, instant local install, and they scratch personal itches nothing else can — tweak a site you use daily, add a button a product refuses to ship, build your own new-tab page.

The agent handles the part that stops most people (Manifest V3's permission model and the three-context architecture of popup, content script, and background worker); you just describe what should happen on which sites.

Tool: Claude Code is great here — extensions are file-first, and its permission-gated shell fits the edit → reload loop. Time: one sitting. The free deep-dive: Vibe Coding using Claude Code.

The steps
  1. 1

    Define the trigger and the effect

    Extensions reduce to: on [these pages], when [this happens], do [this]. 'On YouTube, hide Shorts.' 'On any page, one click saves the URL + selection to my notes file.' Write that sentence first — it becomes the manifest's permissions.

  2. 2

    Scaffold Manifest V3

    Ask for the standard trio: manifest.json (least permissions possible), a content script for in-page changes, a popup for controls. The starter prompt below sets this up.

  3. 3

    Load it unpacked and iterate

    chrome://extensions → Developer mode → Load unpacked → your folder. Changes apply on reload. Test on the real sites, screenshot weirdness, paste it back to the agent.

  4. 4

    Add storage and options

    chrome.storage.sync makes settings persist and roam with your Google account. An options page (or popup toggles) turns a hack into a tool: enable per-site, tweak behavior, export data.

  5. 5

    Keep it personal, or publish

    Unpacked is fine forever for personal tools. Publishing to the Chrome Web Store is a $5 one-time fee plus a review — worth it the moment one friend asks for the extension.

Starter prompt — paste into your agent
Build a Chrome extension (Manifest V3): [your one-sentence trigger + effect]. Structure: manifest.json with the minimum permissions needed (explain each one you request), a content script that [the in-page behavior], and a popup with an on/off toggle plus any settings, persisted via chrome.storage.sync. No build step — plain JS/HTML/CSS so I can load it unpacked. Include a README with the exact load-unpacked steps, and comment the message-passing between popup and content script.
Frequently asked questions

Can a vibe-coded extension get me in trouble with permissions?

The risk isn't legal, it's hygiene: over-broad permissions ('read all my data on all sites') are the extension smell. Ask the agent to justify every permission in the manifest and use activeTab plus specific host patterns instead of <all_urls> wherever possible. Review that section yourself — it's five lines.

Do extensions work in other browsers?

Mostly yes — Edge, Brave, and Arc run Chrome extensions as-is; Firefox needs small manifest tweaks the agent can apply in one prompt. Build for Chrome first, port on request.

Keep going

Related verdicts: Raycast, CleanShot X. All guides: a browser game · a mobile app · a SaaS · a Discord bot · a dashboard · a portfolio site