The ChatGPT tool is a very powerful tool that can help you accomplish a lot of things you wouldn’t be able to do without it. Today, I’m going to show you how to build a Chrome extension without any coding experience. There are many advanced extensions you can make, but I made a really simple one. The way you give commands to ChatGPT is very important, so you should start with a simple one before building an advanced one. The next time I show you how to make money from extensions using ChatGPT, you won’t need a subscription or coding experience.
My knowledge of Chrome extensions was limited, so I asked ChatGPT for assistance. In a few paragraphs, it explained everything to me. I then came up with the idea to create an extension that gives credit to my website and opens ChatGPT with two options. The first step was to break this idea into smaller pieces and give ChatGPT the following command:
“Write a code for a Chrome extension that automatically redirects to this website: https://chat.openai.com/chat.“
I began working on the extension project by following the instructions provided by ChatGPT, a software tool that assists with coding tasks. To start, ChatGPT created three code files for me:
Manifest.json, Popup.html and Popup.js.
It also asked me to create an icon image, which I did using Canva. I then set up a new project in Visual Studio Code using the folder I had created for the extension, called “ChatGPT Shortcut.”
After uploading this folder to Chrome and testing it, I noticed that some improvements and design changes were necessary. So, I reached out to ChatGPT again and asked it to
“create a beautiful button for redirect in the above extension.”
In response, ChatGPT gave me additional lines of code to add to the Popup.html file and asked me to create a new file called style.css. Once I had completed these tasks and reloaded the extension in Chrome, I was able to test the functionality of the Redirect button. When clicked, it navigated me to the desired website, and its appearance was enhanced with a green background, white text, and a hover effect that changed the background color to a darker green.
I wanted to make some additional updates to the extension, so I asked ChatGPT for help. I asked it folllwoing instruction.
Add a button at the bottom of the extension that says “Created by ChatGPT Connect,” with the words “ChatGPT Connect” in bold and larger font, and “Created by” in smaller font. When someone clicks on this button, it should open a new tab and take them to the ChatGPT Connect website (https://chatgptconnect.com).
ChatGPT provided me with the code I needed to make this happen, and once I added it to the extension, it was ready to go. Finally, I published the extension on the Google Chrome store so that other people could use it too.
Here is the Extension published on Chrome Store.
You can also see whole conversation at the end of this page.
Summary:
Here are the steps that ChatGPT asked me to do:
- Enable Developer mode in Chrome
- Load the extension files in Chrome
- Make an icon image and create a folder for the extension
- Create the extension files in Visual Studio Code
- Upload the extension to Chrome and test it
- Make more changes to the extension using ChatGPT’s instructions
- Publish the extension on the Google Chrome store
This is the simplest form of extension that ChatGPT can make. Even someone who doesn’t know how to code can do it. In the future, I’ll show you how to make more advanced Chrome extensions using ChatGPT.
