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)
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
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
- Open Chrome, type
chrome://extensions/in the URL bar.
- Make sure you have this
Developer modeoption toggle on.
Load unpackedand select the directory where your working files are. For example, my
styleis stored under the directory named
gray-filter. Then I will select
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 ;)
Now a grayscale is applied to images and videos. Seems like our chrome extension is doing a great job!