Updated
Chrome
My experience with Chrome Extensions starts with Codesmith. As part of Codesmith's CSX platform, which is designed to prepare students for the bootcamp course, the final assignment is to build a Chrome Extension. This assignment came with a tutorial that walks you through how to create a Chrome Extension and build its functionality through DOM manipulation. This particular extension is very simple - it is just shows an overlay over a page advising you to be productive if you have been browsing certain sites, like YoutTube, for too long.
However, I quickly became frustrated with the tutorial - primarily because it was illustrating how to build an extension with Manifest v2 - but Chrome had more recently introduced Manifest v3 and updated all their documentation to be geared towards use of v3. So I decided to challenge myself to make my own extension, with no tutorial, using only Manifest v3 and the Chrome Extension documentation.
The problem I chose to solve was an issue I had quite frequently - whenever I was looking for a recipe to cook something, every cooking blog website that provided a recipe would only do so after a long blog post. So I set out to make an extension that would "skip" the blog post and go straight to the recipe. The most challenging part of this was understanding how the Manifest v3 worked and wrapping my head around service workers, popups, and the overall execution context of the code I was writing. The extension works great, I use it all the time now and it works flawlessly - all with less than 100 lines of code.
My next experience with Chrome Extensions was during a hackathon in my Codesmith cohort. The hackathon requirements were simple - develop a Chrome Extension. That's it. The key here was that nowhere in the program had they yet taught us how to do that - and we only had about 36 hours to do it. By this time, I had electively forgotten most of what I learned from my recipe extension, so I had to relearn most of the concepts relating to Manifest v3 and such from scratch again. My partner and I elected to develop an extension that would allow the user to "break" the webpage with a hammer.
So out of this hackathon, Hammer Time was born. Once again, the most challenging part of this was figuring out the execution context of the service workers, the popup, and when the code was or wasn't being executed in the DOM (and how to persist data after execution context has left the DOM).
It was a really fun project - and I particularly liked writing all the DOM manipulation code needed for the application's main function. My favorite part is using the Web Animation API to create particle effects (nothing like animating 40 divs all at once). This project actually won the hackathon in which we participated.
