Coding for a designer: Developing a Chrome extension with Chat GPT help
Here is my adventure of coding an extension that highlights companies that are still operating in russia and sponsoring the full invasion of Ukraine.
A Designer’s Hands In A Code
Let me tell you about an adventure where I, a designer with zero coding experience, decided to take on a project that turned out to be as rewarding as it was challenging: creating a Chrome extension that highlights companies still operating in russia and indirectly sponsoring the invasion of Ukraine.
It was a journey of frustration, breakthroughs, and everything in between. I didn’t just want to sit on the sidelines; I wanted to create something meaningful. And what better way to do that than by making informed decisions? The idea was simple: highlight which companies were still funding russian war.
Getting Started
The first step was to understand how to build a Chrome extension. No easy feat for a designer, but hey, that’s where my partnership with ChatGPT came in. I started by outlining the extension’s basic structure and figuring out how I wanted it to work. A few clicks, a lot of Googling, and I was deep in Visual Studio Code.
This is where ChatGPT really became helpful. Every time I hit an error (which was often), I turned to ChatGPT. Sometimes it gave me perfect answers, other times it led me on a wild goose chase. But in the end, the trial and error was part of the learning curve that transformed gibberish error codes into teachable moments.
The Real Challenge: Data, CORS, and Persistence
My next task was to compile a list of companies still operating in russia. Yale University had a comprehensive list of over 1,000 companies — fantastic! I naively thought I could pull this data directly from the web. Turns out, the internet has rules, and Cross-Origin Resource Sharing (CORS) wasn’t about to let me access it that easily.
So, I did what any determined person would do: I found a workaround. I copied the entire list into Excel and asked ChatGPT to help me turn that raw data into something usable — in this case, a JSON file for my extension. After a bit of back and forth (and a few facepalms), I managed to convert it in a way that worked.
But, of course, then come bug fixing again. I returned to my debugging work, dedicating a few more hours to fixing errors and ensuring hundreds of companies were being accurately highlighted. The extension was far from perfect, with some companies still slipping through the cracks, but it was a step closer to my vision.
Next, I went into creating a user-friendly popup for my extension, complete with helpful links and instructions. After a few checks and tests, I had an extension that worked, at least locally.
As I prepared for publishing my extension on the Chrome Web Store — I requested a roadmap from GPT. There were some problems with the manifest file due to the limited knowledge of GPT by the year 2021. So I had to update to the newest 3.0 version. Also, my extension were requiring more rights than it needed.
It was an exhausting step that took almost a week, but it was worth it.
The Bigger Picture: Take Aways
And finally, it went live. While my journey had its fair share of challenges, it was the process that truly mattered:
- Achieving this was significant, especially considering that I am not a developer;
- I made a few mistakes and I learned from them;
- I developed this extension before I started learning prompt engineering and plugins were unavailable;
- publishing the extension took x5 more time than developing;
- And most important, Chat GPT is an incredible solution that brings coding and creating products closer to everyone. (I wrote this article with GPT also).
