Continuing with my open source projects, our class decided to develop a browser extension to improve our school’s BlackBoard website! This was a great way for us to experience what it’s like to start an open source project from scratch. The goal of the extension was to make improvements on the website such as removing elements that we thought were unnecessary.
The two tasks I took up were to create a dark theme for the website and an options panel for the extension itself. Creating a dark theme was simple enough: finding which elements on the page you wanted to change the properties of and putting it all into a CSS file. However the options panel took me days to figure out.
Implementing the Options Panel
Having never worked on browser extension before, I was a little nervous since I had only did a little research into how the files should be structured. I thought it would be easy enough though since there were other projects that implemented this feature such as Refined Twitter. I assumed that a simple copy and paste and some renaming would do the trick.
…Yeah that sounded too good to be true
Turns out that Refined Twitter structured their code very differently and also used a bunch of external libraries to achieve this. I didn’t exactly want to add a whole bunch of new files to the project as it would confuse everyone else that was working on it as well. Still, it was good to see how a working example of an options page looks like (and their design was one that I liked).
Instead, I turned to the good old documentation from chrome itself. Admittedly, it is something that I would normally avoid if there was a quicker solution. However considering that I knew almost nothing about extensions, this was the best solution. At the beginning, our manifest file looked like this:
However to get the options panel functioning the manifest now looks like this:
This meant reading up and understanding how the following functioned and interacted with each other:
From there I started with making the simplest options panel I could think of and used the example provided in the documentation to help me. In the end I did manage to get it working for the scripts that we had! However that’s where our next problem comes: splitting up all the implemented features of our extension.
Reorganizing the Code
Thankfully there weren’t too many features that were already implemented in the one file that we had running. All that was needed to be done was to split them all into separate files and organize them into another folder for organization. This did however mean that it would change the way future features were to be added into the project (which is fine since the intention of this task was to make features able to be switched on and off). I had to do some rebasing and also added comments throughout all the files I added so that others, who may not be too knowledgeable in extensions like me, would be able to easily identify what each of the files did.
Hopefully this pull request gets approved soon so that others that are currently working on new features can properly adjust for this change (and that way I could submit a PR for my dark theme too!).
Also I wanted to give a huge shout out to yevseytsev, the sole maintainer of the project. He has been quick with responses and always follows up with others’ comments and concerns. I’m sure that he has many other class projects like the rest of us students do, so for him to take the extra time to ensure this project is running smoothly is amazing!
Byte Box 