Building Jaabz Chrome Extension

This morning I had a small wow moment with AI.

For the first time in my life, I built a Chrome extension.
It took about 30 minutes. I used Gemini.
Writing this post took another 30 minutes. Fair trade 🙂

The Problem

I was browsing a job platform and felt the pain fast.

I had to:

• Open each job one by one
• Read the full description
• Decide if it matched my profile

This was slow and boring. I thought, why not show a match score directly on the job list page?

The Idea

I wanted to see how well a job matches my CV without opening it.

The goal was simple:

• Read job info from the list page
• Compare it with my CV
• Show a match score next to each job

No new tab. No extra clicks.

The Solution

I decided to build a Chrome extension with Gemini.

I gave Gemini:

• The HTML of one job card
• My CV
• Clear instructions on where to show the result

It worked. On the first real try.

I recorded a short video that shows the extension working on the job list page.
You can see the match score updating live without opening any job.

Next step is to do the same for the LinkedIn jobs page.

The Result

This small project helped me understand the real power of AI driven personalization.

AI is great for automation.
It removes boring manual work.
No more opening many pages.
No more reading and comparing text by hand.

It also made Google Disco vision more clear to me.
Each browser tab can become a small web app.
Not just links. Real value.

https://labs.google/disco

What I Learned

AI works best when you guide it step by step.

Best Practices

1. Build in Cycles, Step by Step
   Based on my experience, AI generated code either works at first or never works!
   It takes a lot of time and effort to discover why it is not working
   In that case, try to build and test step by step

   1. First print a simple HTML element in the console
   2. Then connect to Gemini and log its response
   3. Then add the CV and the logic
   4. Finally ask it to enhance the UI design and UX, without changing logic/content

2. Use git from the start
   If something breaks, you can roll back fast

3. Ask Gemini to add logs and error handling
   Debugging becomes much easier

How to Build It Step by Step

1. Install VS Code
   https://code.visualstudio.com/

2. Install the Gemini extension for VS Code
   Link from the VS Code marketplace

3. Ask Gemini to create a Chrome extension
   In the prompt, include:

   1. HTML of one job card
      o Inspect the page.
      o Find the job element .
      o Right click and copy HTML.
   2. Where to place the output.
      o Mention the exact HTML or CSS selector.

4. Get a Gemini API key from Google AI Studio
   https://aistudio.google.com/

   Note:
   o There is a rate limit
   o You will see it happening in logs and error messages
   o You can also check usage and limits in the aistudio

Final Thought

This was a small project, but a big signal.

AI is not just about chat.
It is about building fast.
Testing ideas fast.
And removing friction from daily work.

The video below shows the full flow in action.
Building your first Chrome extension feels great 😄