Building a Currency Converter Browser Extension with ChatGPT and Replit
A Step-by-Step Guide to Creating a Useful Extension with Minimal Coding Skills
If you’ve ever wondered how to harness the power of AI to create a helpful browser extension without requiring extensive coding skills, then this blog post is for you. As someone who hadn’t programmed for several years, I was curious to see if I could do just that with the help of ChatGPT.
The specific use case I chose for this project was a currency converter extension, which would allow me to quickly convert between AED and INR while I’m living in the UAE. Without the extension, I would have to open up a separate tab and manually enter the amounts I wanted to convert. But with the extension, I could do it directly on the same page, saving me time and effort.
In this blog post, I’ll walk you through my experience of building the currency converter extension using ChatGPT’s guidance. I’ll discuss the challenges I faced, how I overcame them with ChatGPT’s help, and provide code samples wherever necessary. Let’s get started!
Getting Started
To begin building my browser extension, I first needed to select a development environment. After some research, I decided to use Replit. This saved me the headache of setting up an IDE.
Once I created my Replit account, I started a new project and selected the “HTML CSS JS” template. This gave me a basic file structure to work with and included some pre-written code to get me started.
However, since I wanted to build a currency converter extension, I needed to modify the existing code and add my own functionality. This is where ChatGPT came in. ChatGPT provided the code for the manifest file, a popup file, and a JavaScript file. The manifest file contained important information about the extension, such as its name, version, and icon. The popup file contained the user interface that would be displayed when the extension was clicked on, and the JavaScript file contained the logic for the extension.
Coding the Extension
With our environment all set up, we were now ready to start coding the extension. I had never built a browser extension before, so I was excited to dive into this new experience.
With the help of OpenAI’s ChatGPT, I was able to create the necessary functions to convert INR to AED and AED to INR. However, the logic that ChatGPT provided used a hardcoded exchange rate — static value. This is obviously not what I wanted. So I asked it to tweak the code to fetch a live exchange rate. As expected, ChatGPT didn’t disappoint. The code also ensured that the exchange rates were updated on an hourly basis.
Once we had the functionality working correctly, we needed to pack up the extension so that it could be installed in the browser. ChatGPT walked me through the process of bundling all the files into a bundle.js file. I added a couple of icons to the bundle, so that my extension would have a nice professional look.
As instructed, I downloaded the zip file from Replit and proceeded to load the extension into my browser. Excited, I entered a value in the AED field expecting to see the corresponding INR figure. My extension merely stared back at me. It did nothing. I tried a couple more times. Same result.
Debugging the Extension
What was I to do but return to ChatGPT. I explained the situation and asked what the problem might be. It gave me a bunch of options to try out. For the next hour or so, I diligently did as it told me — checked for incorrect IDs, null elements yada yada. I added a bunch of logs to various functions to narrow down the problem. In the end it turned out that the DOM hadn’t loaded when the event listeners were being called. A small edit and voila! I had a perfectly working currency converter extension.
Conclusion
Building a browser extension may seem daunting at first, but with the help of tools like Replit and AI models like ChatGPT, it can be a fun and rewarding experience. By following the steps outlined in this article, you too can create your own browser extension with minimal coding knowledge. Whether you want to build a productivity tool, a custom theme, or a fun game, the possibilities are endless. Start building today!