Gmail Chrome Extension

This is a custom extension I use to make Gmail more readable in Chrome.

How to use

1. Download this repo on your machine.
2. Optional: Customise the styles (see below).
3. Visit chrome://extensions/
4. Turn on developer mode
5. Click Load Unpacked and upload the folder you downloaded in step 1. You'll need to repeat this step every time you update any of the files inside the folder.
6. Visit gmail.com. Voilà!

Customise

Focus mode

Visit chrome://extensions/ and click on the extension's Details button. Scroll down to Extension options. This should open a popup that lets you hide various part of the Gmail interface, such as Hangouts and Meets. The side panel isn't an option since Gmail already lets you do collapse it.

Highlight color

Update the --primary and --primary-light variables in styles.css.

Typography

Import your font in typography.css and update the font-family in styles.css.

Customise labels

Update labels in scripts.js with the labels you want to customise and the colors. You can add a new label in the following ways:

Option 1: Use the colors values You should be able to use any value that is valid in CSS (hex, rgb, rgba, etc...)

{ displayName: "Payments", bgColor: "#FFE6E2", color: "#CA3214" }

Option 2: Use Radix UI color combinations In scripts.js, there is a list of 19 presetColors based on the Radix UI accessible color palette. You can use them like this:

{ displayName: "Payments", ...colorPresets.red }

Contribute

Please feel free to submit PRs or create an issue.

Made by ♥ by Serena Antonetti