Hey, I'm Yana, a product manager and self-taught developer who crafted a Chrome extension for English learners, in just 5 days (or better to say evenings 😉) using mostly ChatGPT.
It will be correct to fully disclose my background to avoid adding hype around the hot question, "Will AI replace developers?"
- I work in tech, but I'm not a professional 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 "How to create a browser extension which should work as following:
- Person selects a text on a page and clicks right button
- Then from the menu person chooses my app
- My app gets all selected texts and sends it to external API
- After receiving response from external API app shows a popup"
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 rule "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.
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 this link in case you'd like to give a try.
And for all who want to have a chatGPT prompts cheatsheet - here you go, I distilled top 20 prompts that helped me to build the extension
1. How to create a browser extension which should work as following:
(1) Person selects a text on a page and clicks right button. (2) Then from the menu person chooses my app.
(3) My app gets all selected texts and sends it to external API.
(4) After receiving response from external API app shows a popup
2. Which APIs to use for making extension like google translate? I need this behaviour:
(1) app icon appears when I select or double-click text on the web page.
(2) additional info appears when I click on the app icon
3. Could you please rewrite the manifest for V3?
4. How to add a listener for selectionchange event in my content script that inserts my app icon?
5. I managed to capture selection, but it can't run this code: iconImage.src = chrome.runtime.getURL('star.png')
6. I'm trying messaging. Should I specify insertAppIcon() inside background.js?
7. Here is an error I'm observing in console: chrome-extension://invalid/:1 GET chrome-extension://invalid/ net::ERR_FAILED. How to debug it?
8. I managed to show icon on selection. How to render a tooltip with dynamic content when this icon is clicked?
9. I've added console.log into function showTooltip(content, rect) and this function didn't fire according to empty console.log. What should I try next?
10. I have followed all instructions and now I have a browser extension which appears as an icon when text is selected and tooltip is shown on click. Now I want to fix the icon behavior. When I select text by double click everything is ok - one icon appears. When I select symbol by symbol, icon appears multiple times
11. Thanks, now UI/UX is much better. now I want to dynamically provide text in the tooltip. The text should come from this API https://api...dev/api/v2/entries/en/{selection}
12. Where should I call API endpoint?
13. How can I call sendToExternalAPI from content.js if the function is defined inside background.js?
14. I still can't manage to provide selectedText to the sendToExternalAPI function. Can we redesign the workflow and run this function inside js so I don't have to pass selection between the files. While function is executing I can render empty div and then add received data.
15. Thanks, I managed to render data. But now I receive this error from time to time: Uncaught Error: Attempting to use a disconnected port object. How to have the port object connected?
16. Why does the port disconnection happen?
17. I have sendGaEvent function. It shows my credentials in content.js file. How to keep them hidden? Should I create .env file?
18. Could you please refactor my content.js?
19. Please help me create following effect:
(1) tooltip appears besides the screen visibility.
(2) then during 1-2 seconds it changes its position on X axis.(3) then stops when the right side of the tooltip div is 15px from the right
20. I'm going to publish this app. Could you please explain why do we use: scripting, storage, host permissions
Top comments (1)
Super helpful