Everyone has a favorite extension installed on their web browsers, unless they are using Internet Explorer (seems like even Internet Explorer has extension support). My favorite extensions are FireShot and uBlock. They help me take full page screenshots and block annoying endless ads. These extensions save a lot of time and make my life easier. However, sometimes, there are no extensions available for performing a certain task I need to perform, or the existing extension is deprecated. So, the question becomes, “How can we build an extension for our web browsers to perform a certain task?”

Last week, we worked on building Firefox extensions from scratch and answered this question. We started with the beginner tutorials from The Mozilla Developer Network. I was part of a group of three people (Eva, Noah, and me) and this was our very first attempt to create a browser extension. The tutorials were easy to follow, and we managed to complete the tutorials with the help of each other. We also learned about the documents such as README, CONTRIBUTING, LICENSE, and CODE OF CONDUCT that have to be present in open source projects. Without these documents, the projects would be open code but not open source. I learned the basics of creating a browser extension and files that need to be in an open source project after completing the class activity.

Left: Extension enabled, Right: Extension disabled
The first extension I created using the tutorial found here. It adds red borders to pages under the google.com domain.

After completing the tutorials, our task was to come up with a new extension, possibly one that doesn’t exist yet. We came up with the idea of creating an extension that would classify downloaded files into separate folders within the downloads directory based on the file types. I like keeping my downloads folders clean, and I manually move downloaded files to corresponding folders. Some people don’t bother organizing the files at all, so that this extension could benefit these kinds of people as well. After further thinking, we decided to call it “autodown”. I worked on creating a license for our project. Initially, I was considering choosing the MIT license, but later I decided to choose the GNU General Public License v3.0. I usually choose the MIT license for my projects, but last week, I realized that GNU General Public License v3.0 requires other people to state the changes they have made. I think stating the changes is very important. Also, I contributed to writing the CONTRIBUTING file and made small changes on the README file.

After a while, my teammates decided that it would not be possible to finish “autodown” before the deadline, and they wanted to change the extension idea. They suggested creating an extension that replaces any images on all pages with a meme celebrity like Nicholas Cage. I think the “autodown” idea was great, but we are doing this as a team, and the majority of the team wanted to change the proposition. After this pivot within our team, I created a basic functioning version of the newly proposed image replacing extension. We will keep the same license and the CONTRIBUTING file because they apply to this idea as well. There is already a website dedicated to giving a random Nicholas Cage image based on the dimensions we want and this website was useful for creating the extension we wanted.

Left: Extension enabled, Right: Extension disabled
The very first version of the extension for replacing any image with Nicholas Cage’s images.

The current version (commit 77de8ad), is not working all the time because the javascript code is loaded at the same time with the web page. So, if the web page loads new images, the extension doesn’t always replace these images. Somehow the extension should be loaded after the page is completely loaded. This is one of the problems we have at the moment. We also want to add more features like replacing images with something that the user chooses. I think we can finish the Firefox extension with these additional features until the due date since we already have the base code for replacing images.