… and learned a lot about JavaScript in the process
I’ve been a Twitter user for over a decade, and throughout the years, I’ve compiled a list of features I’d love it to have. Things like downloading embedded videos, reading tweets from users who have blocked me, and more. While many of these actions can be achieved through third-party websites or workarounds, I felt that a more seamless experience would be welcome.
So, some time ago, I decided to create a Chrome extension to introduce those features. The event that triggered me was the platform’s new owner replacing the blue bird with the soulless ‘X’ logo. I really wanted to bring the bird logo back, and while I was at it, I figured I might as well tackle items from my wish list.
The thing is, Chrome extensions are scripted in JavaScript, and my relationship with that language is, well, complicated. For the past 15 years, whenever I’ve needed to use it -and it’s more often than I’d like to admit- I simply Google the task at hand, figure out how to execute it, deliver the work and then forget all about it. And, of course, I had never developed a Chrome extension again in my life.
«ChatGPT, act as my JavaScript mentor»
So, I decided to turn to ChatGPT for assistance, and see if I could develop an actually working extension without having to go through Google’s documentation or JavaScript tutorials - simply by posing my queries and following its guidance. I won’t leave you in suspense: it was successful. And, honestly, I was quite amazed at how smoothly it all went.
For starters, I asked ChatGPT to give me a general overview of what a chrome extension is and how it is structured.
Next, I prompted it to produce sample code for the key components of the extension, and I worked my way from there.
The whole process involved searching through Twitter’s source using DevTools, locating the elements I wanted to modify (like the X logo), then replacing them with whatever I wanted. ChatGPT didn’t just provide me with the commands required to do this, but also explained how they work.
Raising the level
Some other features I wanted to implement were more demanding, so I had to ask my AI mentor more advanced questions. For example:
- For a feature that swaps the tweets of a selected account with random quotes from the Lord of the Rings (think of it as a funnier version of mute), I needed a listener that detected whenever the page content was updated with new tweets.
- For a feature that appends a download button beneath each embedded video, I wanted my extension’s background service worker to send a POST request to an external API and pass the result to the content script.
- For custom styling, I wanted to inject my own CSS classes into the Twitter web page.
ChatGPT delivered thorough instructions with code examples and helpful breakdown of what each part of the code does. Its suggestions weren’t always 100% correct, but whenever an error occurred, I would come back, share the error message, and promptly receive both an explanation and a fix.
The cherry on top: after the extension was ready, I also used ChatGPT to design its logo, as well as to review this very article you ‘re reading and fix any syntax and grammar mistakes.
Conclusion
I dare say that the experiment was a startling success. Within a matter of days, I created an extension that could “re-brand” X back to Twitter, transform the tweets of selected accounts to random Lord of the Rings quotes and create direct download links for embedded videos. Considering that when I started, I barely grasped the Document Object Model and had never executed a JS background service worker, it’s evident that ChatGPR proved to be an exceptional mentor.
I really like this extension, and I already have a few more features in mind to add whenever I find the time. Of course, I’m open to suggestions. I’d also appreciate it if you gave it a try and shared your feedback, either in the comments below or on Chrome Web Store.
