Modify Gmail with your chrome extension

Gmail is pretty nice right. Now let’s remove the stuff that we never use, making it a lot more cleaner, with a chrome extension.

Photo by T.H. Chia on Unsplash

Creating an extension

Create a folder, name it what ever u like. I’m gonna name it ‘freshness’. Now inside that folder create a manifest.json, background.js, script.js & style.css.

Every extension needs an icon, so also create a folder called images and place some icon png files in there. I took mine from the Google Chrome Extension Tutorial (https://developer.chrome.com/extensions/getstarted).

Manifest

The manifest defines the chrome extension. Without it Chrome can’t do anything. This manifest is an extended version of the one from the tutorial mentioned above.

Background.js

This file is empty. Nothing here.

Script.js

This one is fairly simple. We add our class to the body element. And we also make an event listener for keydown events. Anytime CMD+J is pressed the class will be toggled on/off from the body element.

Style.css

Here is where the magic happens. Go to Gmail as it is now, open development tools and find with inspect, the elements that you want to hide. Basically hide, move whatever you like.

Enable extension

Go to chrome://extensions and on the right side it will say “Developer mode”. Turn that on. Now click “Load unpacked” and find and select the folder where you have this code. The extension only works on mail.google.com domain because we specify that in the manifest.json.

The end.

developer