Creating a Chrome Extension in Under 30 Minutes with AI
Written on
Chapter 1: The AI Revolution in Coding
In recent times, ChatGPT has emerged as a game-changer in the realm of artificial intelligence, sparking discussions globally about its potential. As someone without a technical background, I have often wondered if AI could assist in coding from the ground up with just a straightforward request.
With the advent of GPT-4, my curiosity was finally addressed. I had longed to develop a Chrome Extension as a light-hearted side endeavor, and this was the perfect moment to embark on that journey. For those interested in a visual walkthrough, please check out my video below, or continue reading for a detailed explanation of the process.
To utilize GPT-4, a subscription to the Plus version of ChatGPT, priced at $20 USD, is necessary. I aimed to start with something uncomplicated, knowing that GPT-4 lacked access to real-time databases. Therefore, I had to devise a project that didn't rely on such features.
The concept I envisioned was akin to a bookmark tool for saving news articles. I preferred not to use my bookmark feature, which was reserved for long-term links, nor did I want to clutter my sticky notes with articles I simply wanted to read later. Often, during busy workdays, I come across intriguing pieces but have no time to dive into them immediately. My solution was to create a Chrome extension that would allow me to save a maximum of five articles, alerting me if I tried to save more.
Here's the prompt I crafted:
Despite my limited coding knowledge, which included only a basic understanding of HTML and some CSS, I proceeded with this idea. The AI promptly generated all the necessary components for my Chrome Extension. Initially, I was unfamiliar with terms like "manifest file" or "JSON" (though I recognized "js"), but I placed my trust in ChatGPT's guidance.
I sought clarification on several points, as my coding experience was minimal. I even asked whether 'folder' referred to saving files on my computer or something else entirely. ChatGPT provided clear explanations and simplified instructions to ensure I understood each step.
This engagement was incredibly helpful. I felt comfortable asking what I might consider "silly" questions in a classroom setting, knowing that ChatGPT would not judge my queries. Once I gathered all the components in the specified folders, I uploaded them to the Chrome Developer Tools.
After successfully creating the Chrome Extension, I wasn't quite satisfied. I desired to add two buttons—one for removing articles and another for saving them. So, I prompted ChatGPT again.
By updating my code files per the instructions provided, my extension functioned as desired! Here's how it turned out:
Though the project was relatively simple, I could have tackled it on my own in a day or two. Instead, I completed it in under 30 minutes without needing to learn the intricacies of coding.
I attempted to publish my extension on the Chrome Store, but discovered that ChatGPT had generated the code in Manifest V2, while V3 is now required.
Nonetheless, the AI efficiently converted everything for me, even assisting with the application process for the store, including aspects I didn't fully comprehend.
Currently, my extension is in a pending review state! I encourage you to try creating one yourself. It’s remarkably gratifying to use GPT-4 for building Chrome extensions from scratch, even without a deep understanding of the underlying technology.
While this does not qualify me to develop complex extensions, I can certainly manage fun, simple projects like this one. Why not give it a try? I completed this project in less than 30 minutes, so imagine what you could accomplish!
Join my Substack newsletter for the latest updates on technology, startups, and marketing strategies.