How to remove Facebook's notification count in browser's title bar?

Question

To remove distractions from Facebook, I can use F.B. Purity or uBlock Origin with element picker to block individual element. But how can I remove the notification count appears in title bar of the browser?

To block an individual script, one need to open the logger of uBlock Origin and search for it. But when I do this with Facebook, I don't know which one should I choose. From my understanding, it's a kind of obfuscation of Facebook to prevent unwanted modifications.

There are tutorials on making the title bar changing, but I can't find how to turn it off. However, this question may help: How to disable the flashing title when someone messages me on Facebook?

Answer 1

You can write a userscript (using something like Tampermonkey) and do something like this:

// ==UserScript==
// @name         Title notification remover
// @namespace    https://zachsaucier.com/
// @version      0.1
// @description  Removes the notification count from the title of all webpages
// @author       Zach Saucier
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // The actual functionality to remove the notification in the page title
    var notificationCountRegex = new RegExp('^\\(\\d+\\)+');
    function removeTitleNotification() {
        if(notificationCountRegex.test(document.head.querySelector("title").innerText))
            document.head.querySelector("title").innerText = document.head.querySelector("title").innerText.split(')')[1];
    }
    removeTitleNotification();

    var observeDOM = (function() {
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
            eventListenerSupported = window.addEventListener;

        return function(obj, callback) {
            if(MutationObserver) {
                // Define a new observer
                var obs = new MutationObserver(function(mutations, observer){
                    if(mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                        callback();
                });
                // Have the observer observe foo for changes in children
                obs.observe(obj, {childList: true, subtree: true});
            }
            else if(eventListenerSupported ) {
                obj.addEventListener('DOMNodeInserted', callback, false);
                obj.addEventListener('DOMNodeRemoved', callback, false);
            }
        };
    })();

    // Observe a specific DOM element:
    observeDOM(document.head.querySelector("title"), function() { 
        removeTitleNotification();
    });
})();

This will remove the anything matching (int) at the start of a page's title and remove it on load and in any title changes on every webpage (provided your browser supports mutation observers).

I posted it on Greasy Fork if you want to install it from there.

The DOM observer part was pulled from this SO post.

Answer 2

From the picture I assume that you want to have (9) Title or (99) Title or (99+) as notification indicator.

Here is the clean code that I am using.

Works in Vanilla JS, jQuery, ReactJS, AngularJS (not tested) and most probably any JavaScript framework or library

filterDocumentTitle = () => document.title.replace(/^\((\d+|\d+\+)\)/gm, '').trim()

Usage

if(notification > 0) {
    document.title = `(${notification}) ${filterDocumentTitle()}`
} else {
    document.title = filterDocumentTitle()
}

Jquery

$.ajax({
  url: '/api/notification-check',
  method: 'POST',
  success: function(notification) {
    if(notification > 0) {
        document.title = `(${notification}) ${filterDocumentTitle()}`
    } else {
        document.title = filterDocumentTitle()
    }
  }
});

Axios

axiso.post('/api/notification-check').then(({ data }) => {
  if(data.notification > 0) {
    document.title = `(${data.notification}) ${filterDocumentTitle()}`
  } else {
    document.title = filterDocumentTitle()
  }
})

The filterDocumentTitle function removes everything that matches the above examples as notification indicator.