How I made a chrome extension to combat my screen addiction

Jay Shi
Jay Shi
Dec 2, 2018 · 3 min read

Context

Things all started when I was only looking to watch a five-minute video clip but then ended up spending THREE HOURS on Youtube. I soon realized that I have screen addiction.

I was looking for a solution to my addiction. I soon found an article about how gray scale can make videos or images look boring, and which in turn helps with the addiction. An idea sparked in my mind and I realized I can do this within three lines of code. That’s how I started making this simple chrome extension.

What this Chrome extension does

This chrome extension will apply grayscale filters to the images and videos on a website.

How to make this extension

gray-filter (Working Directory)
---- manifest.json
---- style.css

The above shows the directory structure.


A chrome extension must have manifest.json. This JSON file contains metadata about the chrome extension. So things like title, icons, and where to look for files are included here.

The following is the code snippet of manifest.json that I used to make this extension.

Here you might notice a property called content_scripts . Content_scripts are the scripts that run on the webpage it matched. (More details about content_scripts can be found here)

In the above snippet, the style.css will be applied to the websites that’s served using http/https protocol.

Alright! This is the magic three-line code that does the trick. This css styling tells the browser to apply a grayscale to all image and video elements. The code!important is there to ensure that the grayscale is applied.

We also need to have another important property called permission . Since we are accessing and modifying the websites, we need to ask permission from users. The permission property is where we declare required permissions for our extension. (More details about permissions can be found here)

How to add this extension to Chrome

  1. Open Chrome, type chrome://extensions/ in the URL bar.
  2. Make sure you have this Developer mode option toggle on.
  3. Click Load unpacked and select the directory where your working files are. For example, my manifest.json and style is stored under the directory named gray-filter. Then I will select gray-filter to load.

TADA! Now you have your a grayscale-filter chrome extension installed!

Or you can skip all those steps and just install it from the extension store ;)

Final Result

Now a grayscale is applied to images and videos. Seems like our chrome extension is doing a great job!


Jay Shi

Written by

Jay Shi

Software Developer, Mechanical Engineer and Lifelong Learner. All that "er"s.

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