＜ Chrome Extension : TamperMonkey ＞ 去禁用网页的鼠标的事件 （水文）

问题描述

在一个视频网站看视频，在播放视频时， 如果当鼠标移到视频外，只要有点击鼠标的动作，视频就会暂停播放（包括 Window 下的 其它 tab）。有种被打劫完财物，还被凌辱的感觉。

解决方案

使用 浏览器扩展程序 TamperMonkey 去运行自定义脚本 ( javascript ) ，实现屏蔽对鼠标事件的监控。我也是第一天用。 

1. 环境准备：

软件位置： Tampermonkey

浏览器：Chrome  

操作系统：Windows 11 24h2

2. 安装 （略）

3. TamperMonkey 操作

a.确保它是运行

用浏览器打开：  chrome://extensions/      并pin到工具条上。

b.添加代码

在浏览器工具条找到图标，点："create a new script.... "

会看到这个：（下面的代码是复制了全部内容，但修改了 脚本头部信息，但有加入注释 ）

c. 修改过脚本头部信息后-完整代码

// ==UserScript==
// @name         #管理界面显示 我会写：网络名称 功能描述
// @namespace    #标识脚本
// @version      #0.6 已经改到第6次了
// @description  #功能详细描述
// @author       # 作者
// @match        # 指定脚本运行的 https://视频网址.com/*
// @grant        none # 不需要特别权限
// @run-at       #脚本执行的时机， document-start <- 加载页面时最先执行
// ==/UserScript==

(function() {
    'use strict';

    function injectDebugCode() {
        const script = document.createElement('script');
        script.textContent = `
            // Debug logging
            const debug = (...args) => console.log('[Debug]', ...args);

            // Monitor video element state changes
            const monitorVideo = (video) => {
                const events = ['play', 'pause', 'seeking', 'volumechange'];
                events.forEach(event => {
                    video.addEventListener(event, (e) => {
                        debug(\`Video \${event} event\`, {
                            paused: video.paused,
                            currentTime: video.currentTime,
                            source: e.target,
                            trigger: e.type
                        });
                    });
                });

                // Override pause method
                const originalPause = video.pause;
                video.pause = function() {
                    debug('Pause attempted', new Error().stack);
                    // 返回一个永远不会完成的Promise
                    return new Promise(() => {});
                };
            };

            // Monitor DOM for video elements
            const observer = new MutationObserver((mutations) => {
                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        if (node.nodeName === 'VIDEO') {
                            debug('New video element added:', node);
                            monitorVideo(node);
                        }
                    });
                });
            });

            // Observe document for new video elements
            observer.observe(document.documentElement, {
                childList: true,
                subtree: true
            });



        `;
        (document.head || document.documentElement).appendChild(script);
        script.remove();
    }

    // 立即注入调试代码
    injectDebugCode();

    // 在页面加载完成后也执行一次
    document.addEventListener('DOMContentLoaded', () => {
        // 查找所有现有的视频元素
        document.querySelectorAll('video').forEach(video => {
            console.log('[Debug] Found existing video:', video);
            const clone = video.cloneNode(true);
            video.parentNode.replaceChild(clone, video);
        });
    });

})();

d. 应用代码

用以上内容，替换。参考脚本“注释”修改其部分内容后，按 ctrl+s 保存代码

在视频页面，按 ctrl+F5 重新加载页面，这时就会加载 tampermonky 中的脚本。

4. 代码简介

• 在控制台输出调试信息 const debug
• 监听视频的各种事件（播放、暂停、查找、音量变化） const monitorVideo
• 阻止视频暂停 const originalPause
• 监听 DOM 变化 当新的视频元素被添加到页面时，立即开始监控  const observer

已知问题

因为使用自定义的脚本，去禁用了网页播放器的"暂停"事件，所以在 Tampermonkey 中启了脚本后，视频一但播放后，是无法暂停的。 但 seeking 前后快进，及其它功能不受影响。

TamperMonkey 有一个 停止脚本功能，不需要运行脚本，可以停用它，如下图的红圈：

补充：

“脚本头部信息” 功能，相当于一个 filter ，推荐只用来匹配唯一的网站。描述是给自己看的，越清晰越方便。

可能是因为没充值，现在要发 2 篇才给流量券，今天第二篇比较水，见谅了。