Vibe Coding a Chrome Extension

I wanted to make a Chrome extension that lets me hover over a video on the YouTube home page and hit x to mark it as not interested and w to add it to watch later. I asked Claude Code.

It was a pretty easy development process. Claude writes the code, I add it to Chrome through chrome://extensions by selecting the folder containing the code. Each time Claude makes changes I hit the refresh button in chrome://extensions.

First it finished in 20 seconds but hallucinated the DOM selectors so it didn't work.

Then we tried Playwright, but that was no good since it opens a fresh Chrome instance which isn't logged into YouTube, which means the not interested and save to watch later buttons aren't available. So this wasn't going to work.

Then we tried console.log debugging where I would try out the extension and paste the console logs back into Claude Code. This was slow and bloated the context due to other noise in the console.

Ideally I wanted a way for Claude to control my existing browser. Claude recently got the --chrome option, which lets it control Chrome. It can execute JavaScript to inspect the DOM. It (slowly) managed to debug all the DOM selectors and we got a working extension.

The code is here.