如何永久移除元素的read-only CSS类，实现视频进度条自动可控？

目标元素代码片段：

<div id="seek" data-tabindex="0" tabindex="0" class="progress-bar read-only" style="position:  absolute; left: 0px; top: 0px; overflow: visible; transform-origin: center center; width: 169px; height: 30px; transform: translate(44px, 18px); display: block;">
      <style>
        #seek:before {
          border: 1px solid rgba(0, 0, 0, 0);
          background-image: initial;
          background-repeat: no-repeat !important;
        }
      </style>

方法1：用户脚本（永久自动生效） #

用Tampermonkey/Greasemonkey这类用户脚本管理器，添加以下脚本，打开目标视频页面时会自动移除read-only类：

// ==UserScript==
// @name         解锁视频进度条拖动
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动移除#seek元素的read-only类，恢复进度控制
// @match        *://你的视频网站域名/*  // 替换成实际域名，比如*://example.com/video/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 监听页面动态内容变化（应对懒加载/动态渲染）
    const observer = new MutationObserver(() => {
        const seekBar = document.getElementById('seek');
        if (seekBar?.classList.contains('read-only')) {
            seekBar.classList.remove('read-only');
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // 页面加载完成后立即检查一次
    window.addEventListener('load', () => {
        const seekBar = document.getElementById('seek');
        if (seekBar) seekBar.classList.remove('read-only');
    });
})();

注意：替换@match中的域名，确保脚本只在目标视频网站生效。脚本会自动处理页面刷新、跳转和动态加载的内容。

方法2：书签工具（临时快速处理） #

如果不想装脚本管理器，把以下代码做成浏览器书签，每次打开视频页面点击即可：

1. 浏览器新建书签，将“网址”替换为：

javascript:(function(){const e=document.getElementById('seek');e&&e.classList.contains('read-only')&&e.classList.remove('read-only');})();

方法3：CSS强制覆盖（备选方案） #

如果脚本方法失效，用Stylus等自定义CSS插件添加以下规则，强制恢复进度条交互：

#seek.read-only {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#seek.read-only:before {
    border: none !important;
}

这个方法不会移除read-only类，但会覆盖其禁用样式，让进度条可点击拖动。

内容的提问来源于stack exchange，提问作者user19332660