During the past week in the Open Source Development class, we were tasked with creating a Firefox browser extension, with the focus mostly on getting used to working on a repository as a team rather than how complex the extension is. My group’s original idea was to create an extension that lets you pick a mood you’re in and it will play random songs from Spotify related to that mood. In theory this seemed pretty easy - all you would have to do is connect to the Spotify API and you are good to go - but a couple of challenges came along while we attempted this idea.

The first challenge was to figure out how to use the WebExtension API. It seemed pretty simple when we were following along with the Mozilla Web Docs on creating some extensions, but when we actually had to start from scratch, it took a while to dig through the docs and find what does what. Previously, when I learned new tools and languages, I would enroll in an online video course and take my time going through those. However, this was the first time in a while when I relied purely on sifting through the docs. In particular, the hardest part was conceptually figuring out the difference between the popup JS file, content script file, and background script file. Once I figured that out, I had to figure out how to send messages and communicate between the files. After learning how to do this, I felt pretty accomplished and confident that we would be able to finish this browser extension.

The second challenge came when we had to integrate the Spotify API into the extension. This seemed pretty simple at first because, according to the docs, you just need to call the API in the javascript file linked to the html page. However, I was not sure if this would be able to work since we would have to call the API in the javascript file for the browser extension. The task seemed pretty daunting, and we thought it would be best to move towards an easier idea. Our new idea is to have the extension show the table of contents for a webpage and allow the user to click on the headers in the extension to navigate to that part of the page. This idea came to me after browsing many different developer docs!

Now that we finalized our idea, it was time to get to work! I managed to make the extension display the table of contents for a webpage, but I was having trouble with adding the jump to header functionality. The overall structure of the extension is to first have the content script send a message to the extension and populate the table of contents. Then the extension will send a message to the content script telling it to jump to a specific header. At the time, the jump to header functionality wasn’t working because the extension to content script message wasn’t working. After staring at it for a solid 1.5 hours, Prince helped point out a typo to me and after fixing it, the extension finally worked!

Right now the core functionality of the extension is working so we do have something to hand in. However, we are looking for a website we could use to cater the extension specifically to. Additinally, since we have a lot more time until the assignment is due we are trying to think of some other functionalities we could add.

This was a rewarding project to work on. I was able to learn more about how to use git for collaboration. I learned how to create browser extensions and could possibly create another one in my free time. I also really enjoyed working on this project with my team because we learned about each others skills and delegated work to each other so that we are all were able to have an important role.

Overall, I enjoyed working on this project and my group and I will continue to try to find new things that we could add to it before Wednesday. Thank you for reading this weeks post!