userscript for getting rid of annoying notifications counter on title of pages like Facebook, Linkedin, etc

Question

I am trying to do a userscript rid of annoying notifications counter on title of pages like Facebook, Linkedin, etc.

Firstly I tried to use the extension "Rename Tab Title" https://chrome.google.com/webstore/detail/rename-tab-title/kppndhfiaenbiioipolacicknfmdcdep with my configuration described in the Support tab of that page, in the comment of user Sérgio Loureiro. But had no success.

What I mean is the "(1) " thing before the page title, that will be rendered on the respective tab. In this case I was doing it for the Vivaldi browser, that supports user script from the base, without any extension. I think this is also available for other browsers via tampermonkey or greasemonkey.

An example:

So I wrote an *.user.js file with the contents:

// ==UserScript==
// @match http://*/*
// @match https://*/*
// ==/UserScript==

(function () {
    document.title = document.title.replace(/^\(.*\) /, '');

    // Select the node that will be observed for mutations
    const targetNode = document.getElementById('title');

    // Options for the observer (which mutations to observe)
    const config = { characterData: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer)
    {
        // Use traditional 'for loops' for IE 11
        for(const mutation of mutationsList)
        {
            document.title = document.title.replace(/^\(.*\) /, '');
        }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
})();

and followed the process on https://forum.vivaldi.net/topic/66719/userscript-installation to get it added to the browser as an extension, but I continue to see this distracting counter. ☹️

So, my question, as a very lay person on javascript and user scripts is: What am I doing wrong?

I've wrote the mutation observer handler to catch when the server page is trying to change the page title out of a page load request operation, but it seems to me it is not working.

Answer 1

I see you have a possible working solution, but there are a few things that could be improved. Here is my solution:

// ==UserScript==
// @name         Remove Tab Title Notifciation Counters
// @version      0.5
// @description  Removes webpage notification counters that appear at the begining of the tab title. Ex.) "(1) Example Title" becomes "Example Title"
// @author       nomadic
// @match        http://*/*
// @match        https://*/*
// ==/UserScript==

(function () {
  function cleanTitleText() {
    let title = document.title;
    const regex = /^\(.*\) /;
    const hasNotificationCounter = regex.test(title);

    if (hasNotificationCounter) {
      document.title = title.replace(regex, "");
    }
  }

  // observe changes in the webpage's title
  const targetElement = document.getElementsByTagName("title")[0];
  const configurationOptions = { childList: true };
  const observer = new MutationObserver(cleanTitleText);
  observer.observe(targetElement, configurationOptions);

  // perform an initial cleaning on load
  cleanTitleText();
})();

Notes on your solution:

It can be helpful to define variable and create functions to help avoid confusion and repeating yourself. If you name them well, you can also almost get away with not writing comments as they explain themselves.

I also had to make a .match check before the replace, because some sites were becoming unresponsive.

I do a similar check with .test(). Otherwise you can end up in an infinite loop because it keeps changing the title and triggering another mutation.

const callback = function(mutationsList, observer)
    {
        // Use traditional 'for loops' for IE 11
        for(const mutation of mutationsList)
        {

In this case you don't really care what mutation event is triggering the callback function. You only really need to loop through the mutations if you are observing multiple different aspects of an element and performing different actions based on the type of mutation.

const config = { subtree: true, characterData: true, childList: true};

When the title text is changed, it is actually the childList mutation that is detected. That means the subtree and characterData are unneeded.

---

Hope the notes help some! -nomadic from the Vivaldi Forums

Answer 2

I think I have succeeded, following @double-beep's advice of watching not only for characterData.

This is the script I have now. I also had to make a .match check before the replace, because some sites were becoming unresponsive.

// ==UserScript==
// @match http://*/*
// @match https://*/*
// ==/UserScript==

(function () {
    if(document.title.match(/^\(.*\) /) != null)
    {
        document.title = document.title.replace(/^\(.*\) /, '');
    }

    // Select the node that will be observed for mutations
    const targetNode = document.querySelector('title');

    // Options for the observer (which mutations to observe)
    const config = { subtree: true, characterData: true, childList: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer)
    {
        // Use traditional 'for loops' for IE 11
        for(const mutation of mutationsList)
        {
            if(document.title.match(/^\(.*\) /) != null)
            {
                document.title = document.title.replace(/^\(.*\) /, '');
            }   
        }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
})();

If someone sees a problem on the presented code, please tell me; I am not a lectured guy in javascript and even less in user scripts.