When the browser extension project was first announced, I got really excited. I’ve always wanted to make a browser extension, but never got around to it because of school work or general lack of motivation. Having it as a school assignment would force me to learn and enable me to make more outside of school.

My team and I first decided on making a browser extension that would have a range of moods and emotions and clicking on them would play a Spotify playlist tailored for that mood. Prince took a look at the Spotify API and we soon realized that this was too ambitious especially for the timeframe we had. Matthew then came up with the idea of a table of contents that would show main headers on a given webpage. We thought this would be especially helpful when looking at long README files or documentation.

Since I have very little experience with JavaScript, I was a little nervous about how I would contribute. The small exercise for building our first extension did not really help me understand what the code was doing. Instead, I volunteered to do HTML and CSS formatting for the extension, and to make the icons.

On Saturday, February 8th, we met up to work on the project and over the course of a few hours, I made two icons (one for the toolbar and one for the extension) and I formatted the popup with CSS. I changed the font for the extension as a whole and changed the font sizes for the different header sizes so that they would look better in relation to each other. Going along with that, I indented smaller headers so that it was easier to read and look through. Prince and Matthew worked on the JavaScript and made it so each header could be clicked to take the user to that part of the page. Because of this, I made it so that each header had a hover state so the user knows they are clickable. By the end of the day, we had an operational extension that looked nice. We decided that it looked and worked well enough that we would be able to turn it in.

The process wasn’t completely smooth, though. Personally, I encountered issues such as things having a hover state that I didn’t want to have a hover state or my formatting not appearing as I wanted it to. Prince and Matthew ran into problems trying to get the scrolling mechanism to work, but they eventually figured it out as well.

Overall, the process was really fun and I enjoyed doing a project that resulted in something I could see and use. It allowed me to refresh my memory of HTML and CSS, and of Git and GitHub. I think my group worked well together and I really enjoyed using Slack to communicate; it made things clear and easy to access. I look forward to working on more group projects and to making more extensions in my free time now that I know how.