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.


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.


This file is empty. Nothing here.


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.


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 domain because we specify that in the manifest.json.


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store