修改b站up的名字以及如何使用工具库

wwwwwllllk · 发表于 2023-6-17 08:27:25

本帖最后由 wwwwwllllk 于 2023-6-17 08:30 编辑

写文章动机

本来是不打算写的，因为脚本简单加上可能对别人几乎是没用的。但是用的过程发现想的太简单了。居然用到了MutationObserver来监听节点变化，之前用的时候也踩坑请教了道哥。但是偷懒没有写成博客分享。今天用的过程又翻了一下之前的笔记。所以正好通过脚本来分享一下,顺便写到了工具库虽然其实也没做多大贡献。

MutationObserver注意事项

主要是理解config的配置

config = { attributes: true, childList: false, subtree: true };

attributes：一个布尔值，表示是否监听目标节点的属性变化。
childList：一个布尔值，表示是否监听目标节点的子节点变化。
subtree：一个布尔值，表示是否监听目标节点的后代节点变化。

所以我们为了节省性能，如果理解了配置的意思我们可以直接定位到目标节点，或者同时监测子节点，subtree正常为false即可，假如我的需求就是监听某个节点，但是你监听了后代节点，敲好别的地方也有相同的类名，这个时候就可能会把我们不需要监听的内容也监听到了

工具库

我把MutationObserver写成了工具库，使用的时候我们就不需要还得从百度或者别的地方粘贴了。
// @require https://scriptcat.org/lib/1105/1.0.0/uniqueObserver.js

// 写上自己监听的节点
const nextPlay = document.querySelector('#next_play_btn');
// 自己的配置
const config = { attributes: true, childList: true, subtree: false };
const observer = observeNodeChanges(nextPlay, config, function(mutation) {
  // 监听的操作
  console.log('节点发生变化了', mutation.type);
});

写文章怕代码多，大家懒得看，封装了一下

（我平时是不会封装的，因为脚本很简单没有必要，大部分脚本我不会频繁的修改）

// ==UserScript==
// @name         修改某个up的名字
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.2
// @description  因为这个up改的昵称自己看了很难受，但是b站没有改备注的功能，所以我们写个脚本来实现
// @author       You
// @match        https://www.bilibili.com/video/*
// @require https://scriptcat.org/lib/1105/1.0.0/uniqueObserver.js
// ==/UserScript==

(function () {
    'use strict';
    setTimeout(() => {
        function modifyUpNameSliber() {
            if (document.querySelectorAll('.upname') && document.querySelectorAll('.upname').length > 0) {
                document.querySelectorAll('.upname a span').forEach((node) => {
                    if (node.innerText.indexOf('神奇宝鳖') > -1) {
                        node.innerText = '我是小志'
                    }
                })
            }
        }
        const nextPlay = document.querySelector('.next-play')
        const config = { attributes: true, childList: true, subtree: false };
        const observerUpName = observeNodeChanges(nextPlay, config, function (mutation) {
            console.log('开始播放下一个视频了', mutation.type);
            modifyUpNameSliber()
        });
        let upMessage = document.querySelector('.up-detail-top a').innerText
        if (upMessage.indexOf('神奇宝鳖') > -1) {
            document.querySelector('.up-detail-top a').innerText = '我是小志'
        }
        modifyUpNameSliber()

    }, 3000)
})();

之前代码(感觉代码也不多)

// ==UserScript==
// @name         修改某个up的名字
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.2
// @description  因为这个up改的昵称自己看了很难受，但是b站没有改备注的功能，所以我们写个脚本来实现
// @author       You
// @match        https://www.bilibili.com/video/*
// ==/UserScript==

(function() {
    'use strict';
    setTimeout(() => {
        const observerUpName = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                console.log('开始播放下一个视频了', mutation.type);
                if (document.querySelectorAll('.upname') && document.querySelectorAll('.upname').length > 0) {
                    document.querySelectorAll('.upname a span').forEach((node) => {
                        if(node.innerText.indexOf('神奇宝鳖') > -1) {
                            node.innerText = '我是小志'
                        }
                    })
                 }
            });    
        });
        const nextPlay = document.querySelector('.next-play')
        const config = { attributes: true, childList: true, subtree: false };
        observerUpName.observe(nextPlay, config)
        let upMessage = document.querySelector('.up-detail-top a').innerText
        if (upMessage.indexOf('神奇宝鳖') > -1) {
            document.querySelector('.up-detail-top a').innerText = '我是小志'
        }
        if (document.querySelectorAll('.upname') && document.querySelectorAll('.upname').length > 0) {
            document.querySelectorAll('.upname a span').forEach((node) => {
                if(node.innerText.indexOf('神奇宝鳖') > -1) {
                    node.innerText = '我是小志'
                }
            })
        }
    }, 3000)
})();