用于消除 Facebook、Linkedin 等页面标题上烦人的通知计数器的用户脚本

Question

我正在尝试创建一个用户脚本，以消除 Facebook、Linkedin 等页面标题上烦人的通知计数器

首先，我尝试在用户 Sérgio Loureiro 的评论中使用扩展名“重命名选项卡标题”https://chrome.google.com/webstore/detail/rename-tab-title/kppndhfiaenbiioipolacicknfmdcdep 以及该页面的“支持”选项卡中描述的配置。但是没有成功。

我的意思是页面标题前的“(1)”，它将呈现在相应的选项卡上。在这种情况下，我是为 Vivaldi 浏览器做的，它支持来自基础的用户脚本，没有任何扩展。我认为这也可以通过 tampermonkey 或 greasemonkey 用于其他浏览器。

一个例子：

所以我写了一个 *.user.js 文件，内容如下：

// ==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);
})();

并按照 https://forum.vivaldi.net/topic/66719/userscript-installation 上的流程将其作为扩展添加到浏览器，但我继续看到这个令人分心的计数器。 ☹️

所以，作为 javascript 和用户脚本方面的外行人，我的问题是：我做错了什么？

我已经编写了变异观察器处理程序来捕获服务器页面何时试图从页面加载请求操作中更改页面标题，但在我看来它不起作用。

Answer 1

我想我已经成功了，遵循@double-beep的建议，不仅要观看characterData。

这是我现在的脚本。我还必须在替换之前进行 .match 检查，因为有些网站变得没有响应。

// ==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);
})();

如果有人发现所提供的代码有问题，请告诉我；我不是讲授 javascript 的人，更不是讲授用户脚本的人。

Answer 2

我看到您有一个可行的解决方案，但有一些地方可以改进。这是我的解决方案：

// ==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();
})();

关于您的解决方案的注释：

定义变量和创建函数有助于避免混淆和重复自己。如果你给他们起的名字很好，你也几乎可以在他们解释自己的时候不写评论。

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

我用 .test() 做了类似的检查。否则你可能会陷入无限循环，因为它会不断更改标题并触发另一个突变。

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

在这种情况下，您实际上并不关心触发回调函数的突变事件。只有在观察元素的多个不同方面并根据突变类型执行不同操作时，才真正需要遍历突变。

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

当标题文本发生变化时，实际上检测到的是childList突变。这意味着不需要 subtree 和 characterData。

希望笔记对您有所帮助！ -来自维瓦尔第论坛的游牧

Answer 3

根据我自己的测试和@cactus12 的经验，这是一个似乎有效的用户脚本。

需要遵循https://forum.vivaldi.net/topic/66719/userscript-installation中的流程使用如下脚本：

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

(function () {
    function cleanTitle()
    {
        const regex = /^\(.*\) /;

        if(document.title.match(regex) != null)
            document.title = document.title.replace(regex, '');
    }

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

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

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

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

    //-----------------------------------------------------------------

    cleanTitle();   //initial clean
})();

用于消除 Facebook、Linkedin 等页面标题上烦人的通知计数器的用户脚本

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

javascript

notifications

greasemonkey

userscripts

tampermonkey

关于您的解决方案的注释：