Contribution #3 for Hacktoberfest

Ryan Wilson
Oct 17 · 5 min read

This week I contributed my third pull request for Hacktoberfest. This pull request was for an add-on/extension for your Chrome and Firefox browser and the fix was a bug where images were displaying incorrectly on a specific URL. The installation for this project was different and it was a new experience, since I have never worked with a browser add on before. Unlike the last two pull requests, this project is a larger project with 297 contributors and 1,847,901 users currently using it as of October 17, 2019. I chose this repository because it is a popular add on that I myself use and it would be great to contribute to it, since it is an open source project.

Dark Reader

Darkreader is a add on/extension for Chrome or Firefox and the name says it all, it is an add on that turns your web page dark. Darkreader is mainly created using typescript and the styling is created using css, but they use Less.js to format the css.

Installation

The installation for Darkreader was unique as it was essentially running a React server, but also generates two file folders to be used in your browser and is probably new for those that have not worked with add-on’s before

The installation starts with the basics (cloning the repo and installing the dependencies with npm install)

Then “npm run debug” is which starts the application, but also generates two files. The debug folder is used for Chrome and debug-firefox folder is used for Firefox.

Debug folders

The next steps include how to run the add on on both Chrome and Firefox.

Chrome — chrome://extensions ➜ disable official darkreader ➜ enable developer mode ➜ Load unpacked extensions ➜ navigate and select the debug folder

Firefox — open about:addons ➜ disable official darkreader ➜ open about:debugging#addons ➜ Load Temporary Add-on ➜ navigate and open the manifest.json in the debug-firefox folder.

The issue

https://github.com/darkreader/darkreader/issues/1623

Scary Image on Java.com

The above screenshot is the issue that occurs to the images on Java.com.

Original page

This is the original image that is displayed on Java.com

There’s not much to talk about for this issue because the images talk for themselves. So right away, I started investigating why this issue occurs.

Preparation

The first thing I noticed when i navigated to Java.com, is that it is a different image from the one they talked about on the issue.

So i started to refresh the page and noticed that they rotate between 5 different images and some of the images were not affected by Darkreader on dynamic mode.

Darkreader comes with four modes, on dynamic mode 3 of the images turned scary as shown above, on Filter/Filter+ all 5 images turned scary and on static mode none of the images turned scary.

First I had to figure out how Darkreader changes these images, I inspected the elements to figure out this out and found out that Darkreader replaces the images with a modified version.

For the images that have not turned scary keep the image format (.jpg).

Along with the 5 different images, each of the images have a different class that corresponds with it.

Solution

https://github.com/darkreader/darkreader/pull/1638/commits/510ce19711420829c61f8c80b33efe58d2642ed7

Darkreader uses config files to configure specific web pages to work with Darkreader. Since the images only turned scary for the dynamic and filter/filter+ modes I only had to change the dynamic-theme-fixes.config and inversion-fixes.config file.

src/config/dynamic-theme-fixes.config

java.com

INVERT
html #jvc0v2.bg1 .jvc0w1
html #jvc0v2.bg3 .jvc0w1
html #jvc0v2.bg5 .jvc0w1

src/config/inversion-fixes.config

java.com

INVERT
html #jvc0v2.bg1 .jvc0w1
html #jvc0v2.bg2 .jvc0w1
html #jvc0v2.bg3 .jvc0w1
html #jvc0v2.bg4 .jvc0w1
html #jvc0v2.bg5 .jvc0w1

Darkreader config file comes with features that help with the configuration of the website. Some keywords include INVERT, NO INVERT, REMOVE BG, CSS.

For this case, I used the keyword INVERT and which inverts the image back to its original appearance. Inversion-fixes.config has more changes because for the dynamic view, Darkreader only affected 3 images. Just like applying CSS, (html #jvc0v2.bg1 .jvc0w1) represents the class for the 5 different images.

After I finished the changes, I had to run tests to ensure that my changes did not affect the other code. The first time I ran “NPM Test”, i failed the test because of formatting issues. To ensure that it works on both Chrome and Firefox, I had to install the add-on for both browsers and test it manually.

Learning Experience

Unlike my previous pull requests where I had access to the back-end code, to make changes using Darkreader you have to reverse engineer from the front-end of a website. This was the first time that I had to run tests before pushing the code and it made me realize that tests are very powerful when it comes to software development. Their tests for Darkreader consisted of alphabetical order and proper format for their config files. The approach and preparation I did for this pull request went well and gave me a through understanding on how this add-on works, for next time I will use a similar approach before actually solving the issue. I really enjoyed to play around with the front-end and it is nice to see different file types such as .config or .less files.

Interacting with the community

I filed and fixed the issue, but sadly I did not have any interaction with the project maintainers yet. Aside from my initial comment stating that I would like to work on the project, I ensured that my changes passed all the test so my code can be easily merged along with leaving a comment on my pull request saying the changes that I made.

Links

Project — https://github.com/darkreader/darkreader

Issue — https://github.com/darkreader/darkreader/issues/1623

Pull Request — https://github.com/darkreader/darkreader/pull/1638

Ryan Wilson

Written by

Hi my name is Ryan Wilson and these blogs are for a course called OSD600

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade