University of Kwazulu-Natal

Vibe Coding My First Chrome Extension With Gemini Cli Medium

Bonisiwe Shabane
-
vibe coding my first chrome extension with gemini cli medium

A few months ago, a colleague told me about an internal tool that my colleagueswere building:a CLI version of an LLM code assist which is code and file-system aware, and canhelp you create/fix code,... Think of a “bash version” of Cursor/Windsurf" (or a free version of Claude Code / Codex CLI), and built with my favourite model, ♊ **Gemini**! Since I’m a “cleek” (CLI geek - my invention), you can imagine my excitement to try it! But where to start? Impatient to try it out? Click here: ⏩https://github.com/google-gemini/gemini-cli/⏪

![image: 250603b4220753–ic2a2erzc3n.png) I often find myself staring at a wall of text online. It could be a lengthy technical article, a detailed news report, or a deep-dive blog post. My first thought is often: “Is this worth the time to read in full?” On top of that, for my podcast, Les Cast Codeurs, I’m constantly gathering links and need to create quick shownotes,... My first attempt to solve this was a custom Gemini Gems I created: a personalized chatbot that could summarize links. It worked, but I often ran into a wall: it couldn’t access paywalled content, pages that required a login, or dynamically generated sites that I was already viewing in my browser.

The solution was clear: I needed to bring the summarization to the content, not the other way around. The idea for a Chrome extension was born. This got me thinking: what if I had a browser extension that could give me the gist of any page with a single click? I had the idea and the need, but one small problem: I’d never built a Chrome extension before. This project became an experiment in the trendy “vibe-coding” approach, and my partner in crime was the Gemini CLI. I didn’t start by reading pages of documentation.

Instead, I had a clear vision for what I wanted and decided to build it interactively. What made the process so unique was that the Gemini CLI was incredibly proactive. From the very beginning, when I just created an empty directory for the project, it immediately understood my intent. Before I even had a chance to ask, it suggested that I probably wanted to create a Chrome extension for summarization and laid out a full plan, just by infering the intent because of... Vibe coding is an emerging software development practice that uses artificial intelligence (AI) to generate functional code from natural language prompts, accelerating development, and making app building more accessible, especially for those with limited... The term, coined by AI researcher Andrej Karpathy in early 2025, describes a workflow where the primary role shifts from writing code line-by-line to guiding an AI assistant such as Gemini CLI to generate,...

This frees you up to think about the big picture, or the main goal of your app, while the AI handles writing the actual code. Gemini CLI is an open-source AI agent that brings the power of Gemini directly into your terminal. The Gemini CLI project is open source and you can view the public roadmap to learn more about functionality enhancements, upcoming features, and bug fixes. In this lab, you learn how to perform the following tasks: This lab can be run entirely within Google Cloud Shell, which comes pre-installed with Gemini CLI. I've always wanted to write a Chrome Extension, but never found the time to learn.

The use case was clear - a little colorful bar on top of each website where I could type my notes of that URL (initially for Facebook "who the hell is this person i... Anyhow, thanks to #GeminiCLI I was able to code this in under one hour! Here's my article: https://lnkd.in/eVSUKemv - Use case - Lesson learnt - Tips on how to best call GC with a chubby Gemini.md ! - MCP, Memory, and other functionalities #googleCloud #geminicli #medium #chromext Taylor Mullen Gemini cli is really a very good move from u guys... burn to check it out...

Love this, Riccardo! Time to create useful extensions myself 🤠 Late at night, a single idea can feel like a promise: a small app that saves time, teaches a trick, or changes a routine. This guide honors that spark and shows how one idea becomes a working product using AI-first workflows. It frames the path as hands-on and practical, starting with a plan and ending with a tested extension. Readers will find step-by-step examples—from Windsurf’s Snap N Pin to a Gemini CLI summarizer—that show how prompts generate a Manifest V3 scaffold, assets, and runnable code.

The piece explains how tools and focused feedback loops trim complexity and speed development. It highlights where AI shines and where human judgment must guard security and UX. AI-driven workflows now convert natural language plans into functioning app scaffolds with minimal friction. Modern models interpret intent and propose a clear plan, so a single sentence can seed a first working page. Tools like the Gemini CLI even infer a developer’s goal from a folder name and offer a scaffolded plan. That proactive suggestion is one reason builders report fast results.

For example, Windsurf’s Snap N Pin moved from idea to an initial build in about 30–45 minutes. The strength of this approach is practical: a model maps interactions—clicks, states, overlays—to concrete files and service workers. Short feedback loops—run the app, check behavior, refine prompts—compress time-to-first-application.

People Also Search

A Few Months Ago, A Colleague Told Me About An

A few months ago, a colleague told me about an internal tool that my colleagueswere building:a CLI version of an LLM code assist which is code and file-system aware, and canhelp you create/fix code,... Think of a “bash version” of Cursor/Windsurf" (or a free version of Claude Code / Codex CLI), and built with my favourite model, ♊ **Gemini**! Since I’m a “cleek” (CLI geek - my invention), you can ...

![image: 250603b4220753–ic2a2erzc3n.png) I Often Find Myself Staring At A Wall

![image: 250603b4220753–ic2a2erzc3n.png) I often find myself staring at a wall of text online. It could be a lengthy technical article, a detailed news report, or a deep-dive blog post. My first thought is often: “Is this worth the time to read in full?” On top of that, for my podcast, Les Cast Codeurs, I’m constantly gathering links and need to create quick shownotes,... My first attempt to solve...

The Solution Was Clear: I Needed To Bring The Summarization

The solution was clear: I needed to bring the summarization to the content, not the other way around. The idea for a Chrome extension was born. This got me thinking: what if I had a browser extension that could give me the gist of any page with a single click? I had the idea and the need, but one small problem: I’d never built a Chrome extension before. This project became an experiment in the tre...

Instead, I Had A Clear Vision For What I Wanted

Instead, I had a clear vision for what I wanted and decided to build it interactively. What made the process so unique was that the Gemini CLI was incredibly proactive. From the very beginning, when I just created an empty directory for the project, it immediately understood my intent. Before I even had a chance to ask, it suggested that I probably wanted to create a Chrome extension for summariza...

This Frees You Up To Think About The Big Picture,

This frees you up to think about the big picture, or the main goal of your app, while the AI handles writing the actual code. Gemini CLI is an open-source AI agent that brings the power of Gemini directly into your terminal. The Gemini CLI project is open source and you can view the public roadmap to learn more about functionality enhancements, upcoming features, and bug fixes. In this lab, you le...