油猴脚本之弹幕屏蔽

前言

笔者是平常比较喜欢看虎牙直播，但是网页版虎牙并没有弹幕屏蔽功能，在油猴上也没有找到相关的脚本，自己就做了一个。

说明

• 笔者的设计初衷是在弹幕还没有进入DOM渲染流之前，也就是在刚请求完弹幕之后，对弹幕的内容进行正则。可惜虎牙的弹幕请求方式以比笔者目前的水平还没法弄懂。
• 所以，笔者是在弹幕DOM渲染完成之后才用DOM操作获取弹幕内容然后正则。
• 这里的弹幕屏蔽只有视频中的弹幕可以屏蔽，侧边的弹幕列表中是没有屏蔽的。如果像屏蔽侧边弹幕，可以自行改造，原理相同。
• 这里的setTimeout的3000ms延迟，是让网页中的弹幕区域先加载。
• 对于油猴脚本的编写，可以参考这篇教程

效果图

源码

// ==UserScript==
// @name         弹幕关键词屏蔽
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://www.huya.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @require      https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// ==/UserScript==

(function() {
   
    // Your code here...
    GM_addStyle(`
   .nav_btn {
        position: absolute;top: 0;right: 8rem
    }
    .nav-expand-list ul > li:hover {
        background-color: #eee;
    }
    .nav-expand-list ul > li > a {
        display: inline-block;
        width: 100%;
        text-decoration: none;
        line-height: 3rem;
        color: #555;
    }
    #mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .3);
        display: none;
        z-index: 2147483647;
        color: #010101;
    }

   #mask a:hover {
        text-decoration: underline;
    }

    #dialog {
        position: absolute;
        width: 30rem;
        min-height: 15rem;
        background-color: #ffffff;
        border-radius: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 1rem;
        box-sizing: border-box;
        user-select: none;
    }

    .words {
        display: inline-block;
        padding: .2rem;
        border: 2px solid #999;
        margin: 0 0 1rem 1rem;
        border-radius: 3px;
    }

    .words > svg {
        width: 1rem;
        height: 1rem;
        margin-left: 1.5rem;
    }

    #save > input {
        outline: none;
        border: 2px skyblue solid;
        border-radius: 4px;
        height: 1.7rem;
        font-size: 1.3rem;
    }

    #save > button {
        color: #fff;
        background: skyblue;
        font-size: 1.3rem;
        cursor: pointer;
    }

    .remove {
        cursor: pointer;
    }

    #exist {
        margin: 2rem 0;
    }

    #exist > div {
        margin: 1rem 0 0 7%;
        width: 80%;
        border: 1px solid #666;
        border-radius: 3px;
        padding: 1rem;
    }

    #tips:hover {
        color: #010101;
    }`)

    let keywords = GM_getValue('keywords') || []
    let observer = new MutationObserver(() => {
   
        let danmus = document.querySelectorAll