How I Built My Own Chrome Extension (And How You Can Too)
Vibe coding, the right way!
Hello Riddlers!
You know the drill!
📌 Your support keeps this newsletter FREE —> [☕Buy Me a Coffee☕]💡 Want more from me? [SEO Strategy Course] | [Build Your Own SEO Tools (with Python & Agentic AI)] | [Premium SEO Mastermind]
Also did you check out my FREE PEOPLE ALSO ASKED tool yet?
On a random moment of time
I decided to finally work on my chrome extension. I have been wanting to build it for a while, but never got the time.
Recently, I installed Claude Code and spent some time figuring out how to actually use it. What it’s good at, where it struggles, and how to get decent output from it.
So I gave it a real task:
Build a Chrome extension that analyzes Google search results and visualizes SERP feature distribution in a pie chart.
3… 2… 1…
Claude Code built it.
…or did it?
The first round
The problem with Claude Code (CC) is that it will take the prompt and start working right away. You’d think this is super cool, it’s not because there are so many things that need to be flushed out first.
Anyways, CC took some time and came back telling me it’s done, it also provided instructions on how to test it.
It was working, but it was not working…. 😂
There was no errors or bugs, and it generated an output, but it was not working correctly. The numbers in the pie chart were just not right, and many SERPs features where not detected.
This is where I had to intervene.
Round two
I started doing searches, and getting the html source code of the SERPs results pages.
I then saved them in files, used both Chatgpt, and CC to try to find patterns and match them to search features, but this was a mess of a task…. the html was very big and they were looking at a needle in a hay stack…
A complete mess and waste of tokens… so I build a Python script that converts the SERPs code into what I called a SERPs Map.
The purpose of the code is to remove all the noise and convert the SERPs into a tree/map format of the main dev components. That way the file size is smaller and we can analyze the find patterns and match then with SERPs features, right?
I took those SERPs maps and fed them to Claude Code, one after the other to analyze them for patterns. It would ask me to verify what SERPs features I actually see compared to what it can detect… I became it’s eyes 😂
We then went to work from there, and made adjustments to our code, and the chrome extension came to life…. but once again it was not working properly.
Detecting patterns in SERPs is very difficult and unreliable. I spent time looking for what others have done online and understand the problem, and then after hours and backward and forward with Claude Code I decided to shift gears.
This round took the most time btw… 🤷♀️🤷♀️🤷♀️
Round three
It was up to me at that point to decide how to tackle this problem. I decided to use SerpAPI. I already have an account and credits that I used for my Build Your Own SEO Tools (with Python & Agentic AI) course, because if you signup you get free credits (in the screenshot I have paid credits, free accounts get way less).
I went back to Claude code and started building. Even with SerpAPIwe still had issues, for example an image carousel was labeled as “knowledge panel” by the api 🤷♀️
So I had to introduce a set of new rules, where the extension will also check the headers in search, so for example if there’s a label in search we will use that label. Here’s an example of what I mean by a label:
There are a lot of labels in search like:
Popular products
Discussions and forums
People Also Asked
and so on… so if they’re present, the plugin will incorporate this information.
So now I had a plugin that can detect the features… how to accurately calculate the percentages?
There were two options:
Are we talking about how much space on your screen a certain result takes
Or how much of this result exist in SERPs
As you can see, and as I always say, you need to know what you’re doing, you cannot simply delegate everything to Claude Code.
So I made the decision that, if there are 20 total items and 5 are organic results for example, organic gets (5/20) * 100 = 25.0%. Each category’s percentage represents its share of total SERP feature items counted.
The Feedback
I finally uploaded the extension, and once it got approved, I shared it and got some very reasonable feedback:
The colors of the pie chart for one… it was horrible, but you see I’m not a designed so I did not account for things that a usual designer would…
I made some changes later, and have not pushed them live yet, but someone pointed out to take into account the color blind audience, and choose a suitable color palette. So I decided to dig into that myself. It’s a very interesting learning opportunity for me.
Others have asked for more instructions on using the plugin, which is fair enough. I made the changes by giving very clear instructions to Claude Code, don’t assume it will know how to fix an issue on it’s own. This is right now ready but not pushed live, so stay tuned:
And That’s a Wrap (Almost 😄)
I think the goal of this blog it to show you that to build something that is providing meaningful output, you need to know what you’re doing and understand how a good code works.
Claude Code definitely accelerates a lot of work, but there’s a some learning curve and few more skills you’ll need to learn.
One thing I didn’t account for is having to maintain the extension and release updates and fixes as needed. Every piece of code you write needs regular maintenance, something that we don’t discuss much in SEO.
Any how, hope you found this useful!
That’s that for today folks and see you next newsletter!!!
Also check out my Build Your Own SEO Tools (with Python & Agentic AI) course where I teach you the basics you need, so you can start building with the right foundations!
Support the Riddler!
Sign up for my newsletter if you’re not already.
Share the newsletter and invite your friends to signup. Help me reach 2k signups by end of 2025 please 🙂
Provide feedback on how I can make this newsletter better!!!
If you’re an SEO tool or an SEO service provider, consider sponsoring my newsletter. I’m also open to other partnership ideas as well.
Disclaimer: LLMs were used to assist in wording and phrasing this blog.