Week 3 - The Browser Extension Project

The Project

Earlier this week in class, we started a group project on browser extensions. Our task is to create a (relatively simple) open source browser extension for Firefox.

Our Project

In particular, our project is a parody of the stickers you sometimes find at gas stations these days of a pointing Joe Biden saying “I did that.” Our project adds a similar image of Trump to all White House domains. The functionality for this extension was relatively simple to code, so that’s where we started. Whenever a whitehouse.gov domain is accessed, a script (i-did-that.js) is run to fix an image to the bottom-left corner of the page. We quickly realized that this can cover some page content, so we added functionality so that when you click on the image, it moves to the other side of the page. I wrote most of the functionality in this script and the manifest file.

Smaller Challenges

While the code was pretty straightforward, it was the smaller, easy to forget things that posed (and still are posing!) bigger challenges for us. For example, while not explicitly necessary, Firefox extensions expect a small image to be provided as an icon to represent the extension. As such, I actually had to go to a pixel art website and create my own 48x48 image to be our extension’s icon, a kind of creative challenge that I haven’t faced in any more traditional CS classes. Another issue is that of image licensing- we realized that the photo we were using was not actually freely licensed, so we can’t host it in our repo, much less provide it under an open source license, so we will need to find a solution to that issue. Right now my working ideas are to either find an openly licensed image to use, or access the image via a link, rather than hosting it ourselves.

Looking Ahead

Other than the image licensing, we still have a few more non-coding tasks to accomplish. We need to add a proper license to our project to ensure it actually has open source status, write a README with instructions to install the project, and hopefully we’ll have the time to add a CONTRIBUTIONS file and a code of conduct, too. This project has really reinforced the ideas the professor has stressed in the lecture- that there’s a lot more to an open source project than just code.

Other Thoughts

This project has been my first experience coding in JavaScript, and I’ve found that I actually have a lot to learn about it. In the interest of learning more about it, I’ve started my own personal browser extension project (and just to make things extra hard on myself, I decided to make this one for Chrome instead of Firefox…). Between these two projects, I feel a lot more confident in (the basics of) GitHub and JavaScript, and I also feel more confident in my ability to pick up on new tools and technologies.

Written before or on February 7, 2025