It’s only been three days since I released Terp Data, a Google Chrome extension that allows University of Maryland students to view professor reviews and ratings on Testudo’s course pages instead of having to open up a third-party site to search for them. Since then however, many people have asked me what it took to develop this extension (i.e. what tools I used, how long it took, etc.). For that reason, I will share my experience with you all today.
Learning How Chrome Extensions Work
Roughly a week into the making of this journey, I began researching chrome extension development. What I learned is that chrome extensions tend to comprise of the following files:
- manifest.json
- content.js
- background.js
- popup.html
- default_icon (png, jpeg, etc.)
manifest.json
This file is the core of your extension. It has all configurations that are responsible for what functions the extensions is responsible for. More importantly, it contains the name of your extension and the version of the package. The manifest file also details what content and background scripts your extension uses and what urls these scripts run on as well as a reference to your popup HTML file and default icon. If your extension uses third-party resources, then you can expect the manifest file to also contain content security policies and a list of accessible resources.
content.js
This is the script that runs behind the scenes on all the urls you’ve specified in the manifest file. Get creative with this. Maybe you want a script that changes the src attribute for all image tags to point to a specific image. Maybe you want a script that changes the background color for all paragraph tags to red. It’s all up to you!
background.js
This script is always running when the browser is running. You can track browser actions like clicks and tab openings and then create function calls based on those events. You can even use it to send data to other tabs and then get those tabs to act a certain way. Some extensions don’t need this, but many others do, as it does offer powerful functionality.
popup.html
When a user installs your extension, your extension’s icon will be loaded on the upper right corner of the Chrome browser. Upon clicking that icon, you can give the user a pop up page that does anything you want it to do. You can have it be a feedback form or maybe a description of your extension and what it does. This isn’t required as part of the extension but having it results in no harm.
default_icon
This is the thumbnail shown to users when installing your extension and in the upper right corner of Chrome after installation. This icon has a specified image size requirement of 128 x 128 pixels.
How I Made Terp Data
Collecting Data
To get the professor reviews and ratings, I had to first scrape data from another site, Planet Terp, that a friend of mine made for rating and reviewing University of Maryland professors specifically. I also wanted to get data from Rate My Professors but they have a strict policy against data scraping, so that clearly wasn’t an option.
To scrape the data, I used Python’s BeautifulSoup library. I let it run on 5,945 professor pages through a single click and then loaded the data in JSON format, which would then be used in the chrome extension.
Building the Extension
After getting all the data, all I had to do was simply write the content script that would run on Testudo pages. I had to observe the DOM for mutations and then find the
tags that had the information I needed, fetch the professor data I scraped earlier, and finally inject an overlay div with all that data. And as usual, it took a lot of searching on Stack Overflow and asking others for feedback.
Final Outlook
This was my first time developing a chrome extension and it was not by any means easy. I struggled a lot and learned a lot from this experience. For that reason, I advise beginners who are learning any specific language or framework to just dive head in and try to build projects. The more you fail and learn from those failures, the more you succeed.
I’ve also heard a lot of people building projects with languages unfamiliar to them saying that they quit on a certain project because they felt that experts in that language could easily replicate their work and make it 100x better in a shorter time frame. I’ve personally been there, and I can assure you that this is not the right way to go. Who cares if someone can develop something better than you? The real reason you’re working on the project is for experience, not for making the best version possible. Once you’re done, even if the project didn’t seem so good, you can definitely see a significant improvement in your depth of knowledge in that specific field. Thus, even if someone does develop something better than you, it’s not a loss at all. You’ve learned something and you get to showcase it, which makes it a win for you. If you ever feel like discontinuing a project, think back and reconsider all that you’ve learned along the way. On a superficial level, it may seem like you haven’t achieved much, but if you dig through the dirt, you’ll find that you’ve actually progressed quite far.
“Whatever it takes to finish things, finish. You will learn more from a glorious failure than you ever will from something you never finished.” — Neil Gaiman
That being said, if you have any project that you’re proud of, feel free to share it below in the comments. These posts are for me to learn from you all as it is for you to hopefully learn something from me.