Removing the Unread Messages Counter on Gmail

As a big fan of Cal Newport’s So Good They Can’t Ignore You: Why Skills Trump Passion in the Quest for Work You Love and Deep Work: Rules for Focused Success in a Distracted World, I’m now reading through Digital Minimalism: Choosing a Focused Life in a Noisy World, which I also highly recommend.

Digital Minimalism frequently mentions notifications as a tool that technology companies use to keep people using their services for longer periods of time, and notes that this presents the challenge of fragmented attention. Most of my notifications are disabled, but I really enjoy Gmail’s web-based interface. I’ve bookmarked a Gmail search result page so that I don’t have to see new messages in my inbox unless I mean to see them. Unfortunately, there is no built-in way to turn off the unread message counter. There are a few Chrome Extensions that will do this for you, but I am generally wary of Chrome Extensions from a security standpoint. So, before the kids woke up this morning, I decided to learn how to write Chrome Extensions and block the counter with my own code. I am sharing the very barebones code here so you can see and install it yourself without having to trust anyone’s black box Chrome Extension.

A Chrome Extension consists of a set of files – a manifest.json file and the other files to which it optionally refers (e.g. Javascript files, CSS files, icon images, etc). I’ve tackled the counter that appears in the left panel using CSS and the counter that appears in the title (i.e., on the browser tab) using Javascript. In all, I’ve written three very short files:

manifest.json contains the following:

{
  "manifest_version": 2,
  
  "name": "Hide Gmail Counter",
  "description": "Hides the Gmail counter.",
  "version": "1",
  
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["remover.js"],
      "css": ["styles.css"]
    }
  ]
}

remover.js contains the following:

function nodeInsertedCallback(event) {
  if ((event.path[1].localName=="title") && (event.path[1].innerHTML.match(/Inbox \([0-9]+\) -/))) {
    document.title = event.path[1].innerHTML.replace(/Inbox \([0-9]+\) -/g,"Inbox -");
  }
};
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);

styles.css contains the following

.bsU {
 visibility: hidden;
}

I then:
1. put all three files in a folder I called “Hide Gmail Counter”
2. chose “Extensions” from Chrome’s “Window” dropdown menu
3. turned on “Developer Mode”
4. clicked “Load Unpacked” and chose the folder created in #1 above.

That’s it. I now have no more counter and you can use the simple code above without trusting anyone’s black box Chrome Extension.

Leave a Reply

Your email address will not be published. Required fields are marked *