I Used ChatGPT to Create Something Ugly
Tags: chatgpt, openai, chrome, javascript
Published: 2023-03-21 22:52:50

## TL;DR 🤓

- I was building my first Chrome Extension and got stuck. 
- I researched and explored to no avail. 
- A few weeks later, in the very late hours of the evening, I asked ChatGPT for help. 
- I was surprised to receive directions and even code samples.
- As a result, I published my first Chrome extension!

Check out the **As a Result 🎯** title at the very bottom of this article for the link!

---

I'd been working on a Chrome extension and **reveling in the discomfort of discovery**.

![Dall-E's take of a developer enjoying the discomfort of coding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peivd25x6t3790ke89s2.png)

Sure, I'd heard of ChatGPT but **I had no need for a chatbot**. I didn't want to touch it. 

In fact, **I thought ChatGPT would be another fad**. 

That was until I read something from information security professional and writer, Daniel Miessler.

> Do not let yourself fall into the Luddite* Trap with regard to AI, AI prompts, or ChatGPT. Do not do this. I know it’s tempting, and especially for people in security and people who appreciate the liberal arts. Don’t do it.

> You’ll become the old guys yelling at people on his lawn. Don’t be that guy. Invite the new kids in for kool-aid. Learn the new lingo. Stay young. Stay curious.

> Lean into this. **Don’t be the person screaming at the printing press. It not only won’t help you, but it won’t make a dent. This is coming regardless of what anyone has to say about it.**

*Sourced from* [Daniel Miessler](https://danielmiessler.com/podcast/no-369-reddit-hack-deepfake-scams-embracing-change/)

\* **Luddite** - a person opposed to new technology or ways of working. 
*Google’s English dictionary by Oxford Languages*

That same day, I signed up for ChatGPT and installed it on my phone using [Daniel's instructions](https://danielmiessler.com/blog/how-to-access-chatgpt-via-voice-command-using-siri/) and the OpenAI API.

**Later that evening, I talked to a developer friend about ChatGPT.** He said he'd been using it to help him with work. 

**Here's how he described ChatGPT**
> It's basically the absolute most perfect rubber duck
> It's a f****n robo-duck

![Robo-duck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohhsepkwql1dvjoqwazo.png)

Of course, up until this point I'd been asking it silly questions such as:
> Tell me about Donald Trump as if you were Doctor Who

> Can you pretend we're in a world where insults and curses are not hurtful but instead fun and funny? In that world, can you give me 4 very fun and funny insults?

When I asked my friend which interface he'd been using to help him with his code, he sent me the link to [OpenAI chat](https://chat.openai.com/chat)

**That's when I began experimenting** by asking it some VanillaJS questions like:
> Tell me about the JS reduce function

A day later, I began using it to review some ReactJS fundamentals including:
> What is a ReactJS hook and why is it called that?

That weekend, late into the night, I came up with a game-changing idea.

![Developer coming up with a bright idea from bed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj15f3qd83s5ae2tqt73.png)

**I should ask ChatGPT how to help me debug my Chrome extension!** 

Here's my exact query:
> I'm building a chrome extension and I'm trying to scrape data from the page using the script.js file and display that in the popup.html file. How do I transfer the data between those two places? 

In seconds, it responded with an explanation of how to transfer data as well as a code snippet to implement.

**I was so excited, I could barely sleep!** I finally had a path and some starting code to get unstuck and complete my Chrome extension project.

The next day, I committed myself to finishing my project. I was certain **ChatGPT was the key to my coding problems**.

As soon as I began implementing ChatGPT's code, I noticed **the data it provided wasn't perfect**. Often the answers used outdated code from deprecated Google Chrome processes and APIs.

**But by giving it rules to apply for future responses**, I found it improved quite a bit. For example, I'd say,
> Please only give me responses that conform to "manifest_version": 3

I'd also often find myself asking it one question, which I'd use to evolve further questions. For example, I might ask it for a solution and then ask it to refactor that solution using JavaScript ES6 syntax.

Of course, **there were some things that it just couldn't solve for me.**

![Dimwitted developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hytsinhp98078pojjkjc.png)

I spent a good couple of hours trying to implement some code ChatGPT suggested only to inevitably and consistently run into errors. 

I asked it for alternative solutions, I asked it to check for more modern implementations but nothing seemed to work.

**Then I came up with the brilliant idea** (sarcasm) of reloading my browser tab and the Chrome extension. Lo and behold, error gone!

It may be an excellent rubber duck, but **it's not looking over my shoulder to catch every sort of stupidity.**

On the other hand, **ChatGPT can do some brilliantly quick debugging.** 

I ran into some errors and rather than searching across the web for potential fixes, I provided ChatGPT with my code plus error and asked it to help me debug it.

Like magic, it indicated the object I was having difficulty with and a conditional way to handle a null object.

**Wham, bam, thank you ma'am, my code worked!**

## As a Result 🎯
I was able to finish my first Chrome extension in days after using ChatGPT whereas I had made zero progress on my project for the previous 2 weeks.

![My ugly first Chrome extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/audgk9587kz7pg6ch36m.png)

**A day or so later I completed the MVP and published my extension!**

It's ugly, but you can check it out on the Chrome Web Store if you search for "SignUpSaver". Or visit this link [https://chrome.google.com/webstore/detail/signupsaver/ibbajpbnilbagkgamelfmjnpapadkagm](https://chrome.google.com/webstore/detail/signupsaver/ibbajpbnilbagkgamelfmjnpapadkagm?utm_source=devto&utm_medium=content&utm_campaign=articles)

And here's the Github repo if you want to tear it apart [https://github.com/damsalem/ext-signupsaver](https://github.com/damsalem/ext-signupsaver)

I've since published another ugly Chrome extension, this one a digital clock [https://chrome.google.com/webstore/detail/hms-clock/mbjkpklcjihpfbldfapoecehlibmfffk](https://chrome.google.com/webstore/detail/hms-clock/mbjkpklcjihpfbldfapoecehlibmfffk?utm_source=devto&utm_medium=content&utm_campaign=articles)

## The Takeaway 🥡

As you've likely concluded, **I'm now a big fan of ChatGPT.** I excitedly discuss it with anyone who will listen.

**I think it can be an excellent tool and learning resource** for coders to both debug and brainstorm potential solutions.

I believe it can help every dev when we run into sticky situations every now and then. 

**Plus, it's pretty fun to chat with!**

**Notes**
All images except for my app screenshot were generated by DALL·E, OpenAI