haven't read part 1? Start with this link first.
When I decided to build my own app, I also wanted to validate the hype around the hot take – "Will AI replace developers."
Short answer (in my opinion) - NO!
Details will follow. But first, I'll start with my background:
I work in tech, but I'm not a developer now and never was one in the past (I'm a product manager).
I took a Udemy course on web development (though I dropped out at 70%).
My hobby is low-code automation.
I'm totally fine with reading manuals, guides, instructions.
With this background, I managed to build a Chrome extension that tracks a selected word, makes a call to a dictionary API, and returns results in an overlay. 90% of the code is from ChatGPT, and 10% is from official Google Docs.
Let's go through my experience step by step.
My first prompt was "create a code boilerplate for a Chrome extension. This extension should be able to render a pop-up upon the extension's icon click."
And I got the extension source code:
Based on manifest.json v2.
Extension as an item in the context menu (which appears on control+right-click).
Pop-up appearing on context menu click.
Not bad for the very first prompt, but then I figured out that Google is going to terminate the v2 manifests in early 2024. Also, from a UX perspective, I didn't want to introduce the extension's functionality through the context menu (I'm an adept of the idea "less clicks and friction is better").
So, I started to refine my prompts:
Create an icon that appears when I'm selecting the text on the page.
Support 2 modes: selection by double-click and selection symbol-by-symbol.
Don't duplicate the icon when I select symbol-by-symbol.
Console.log selected text.
Render the overlay on the current page and display the selected text.
Make an API call.
Show the API response in the overlay.
I liked the progress; with every next prompt, I added necessary functionality. The only issue I had was with the overlay. Instead of a kind of sliding overlay right to the selected word, it tried to add a page in a new tab.
Finally, I remembered the web dev course I took (DOM section particularly) and asked to append a div with some styles.
Tada! I built an app and started browsing the internet.
After a few websites, I noticed that website styles affected my extension's overlay, and sometimes the developer's console was flooded with errors.
The first issue I wasn't able to solve with ChatGPT, so I asked StackOverflow (the hint with CSS "all: unset" was great).
As for the second issue, ChatGPT diagnosed the reason very fast: the "message passing" feature wasn't implemented correctly. However, for the fix, I turned to StackOverflow again because ChatGPT offered very generic recommendations while I wanted the code.
I found a topic with a similar problem on SO, and the first reply was like, "why do you even use message passing? just transfer your code from background.js to content.js until it's safe." By the way, there's a real charm in human assistance (as opposed to AI). People may provide the right questions, and you can figure out the answer by yourself. After this question, I reorganized the code so most of the logic was in content.js. Message passing between background and content didn't bother me anymore.
Then I decided to implement Google Analytics. I didn't expect that for this part, Google Docs would be much more helpful than ChatGPT. I asked it to "create code that will help me track the extension install event." ChatGPT couldn't comprehend the specific use case - the extension is not a website, and I cannot place gtag.js. Google Docs explained clearly how to handle the extension's specific use case and provided a ready-to-use piece of code.
After adding analytics, I considered my MVP ready to be published to the Google Chrome Web Store.
Follow me for part 3 where I summarize this experience and list all prompts I've used.