当前位置：首页 > article >正文

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

article 2024/12/23 12:35:34

问题描述

在一个视频网站看视频，在播放视频时，如果当鼠标移到视频外，只要有点击鼠标的动作，视频就会暂停播放（包括 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);
        });
    });

})();