In-Class Activity

During the in-class activity this week, I worked in a team with Kyle Nelson and Fenglei Gu to “implement” our first and second browser extensions (by copying and pasting the code provided by Mozilla). The activity gave me a taste of how a browser extension is created, what files are necessary, and in what fashion should the files be organized. It made me realize that building a browser extension can be much simpler than I have imagined, and even one line of JavaScript code can do the trick (here I’m talking about Borderify). After doing the activity, I felt that I would be able to build an actual browser extension together with my teammates.

Brainstorming

Since we have less than a week to finish the browser extension project, it should not be overly ambitious. What we want is something that’s just a little bit more complex than Beastify but is hopefully a little bit more meaningful.

Trying to figure out what to build for the project was fun. My first idea was an extension that allows users to pick a time zone, and a clock will appear on the top of every web page. I also came up with many other ideas, such as an extension that will identify the fonts used on the page, and an extension that can make any page look like the login page of NYU Albert (so that it looks like you’re about to log into Albert rather than browsing Reddit in class).

I made sure that all these ideas are implementable before I wrote them down and propose them to my teammates. For example, for the font identifier, I tried to get the font-family property of the text by first locating the element and then examine the CSS information, which was a success. An idea I had to give up was an extension that only shows someone’s original tweets on Twitter. I figured that it would be too much work to be done within one week after studying Twitter’s page source, besides one can do that with Twitter’s built-in feature (though I still believe that an extension like this will be an easier solution).

After discussing with group members, we finally decide to build an extension to show a clock for one of the three degree-granting campuses of NYU.

Setting up the Repository

This is the first time I set up a repository for teamwork on my own. In the past, I’ve only created repositories for individual work or simply work with repositories owned by others. At first, I didn’t even realize that I have to grant my group members access to the repository I created, for the reason that I thought there would be no need of doing that since we are in the same organization.

When working on the project, I accidentally committed the .idea folder generated by the WebStorm IDE to Git, and it ended up taking me quite a while to remove the folder from Git. What I’ve learned is that I should have added these local files to .gitignore file in the very beginning.

The actual work

So far, I’ve added manifest.json, the icons, the Html for the popup, and all the boilerplate files needed, and Nelson has written most of the JavaScript code. There’s the issue that the time of the clock won’t change for different time zones, which we will try to fix later. Based on what we currently have, I believe that we will have a working product by the due date!