马上三级,分享一个自己写的Hulu大写字幕转小写的油猴脚本

Hulu上有些英文字幕是全大写的,看着很不适应,此脚本可以将大写字幕转换为小写,同时兼容沉浸式翻译。

其他类似的网站也是类似的逻辑,有能力的佬友可以在代码基础上进行修改。

马上三级了,觉得有帮助的佬友麻烦点个赞。 :heart:

脚本功能

  • 将 Hulu 字幕中的大写英文转换为小写英文,和沉浸式翻译不冲突
  • 支持通过菜单选项启用或禁用字幕小写转换
  • 无需刷新页面,动态调整字幕样式

代码

// ==UserScript==
// @name         Hulu 字幕大小写转换
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  使用 CSS 将 Hulu 字幕转换为小写,支持启用/禁用功能
// @author       GuooGaii
// @match        *://*.hulu.com/*
// @grant        GM_registerMenuCommand
// @icon         https://www.hulu.com/favicon.ico
// ==/UserScript==

(function() {
    'use strict';

    // 注入小写字幕的 CSS 样式
    function injectLowercaseStyle() {
        // 检查样式是否已经存在,避免重复注入
        if (!document.querySelector('#lowercase-subtitle-style')) {
            const style = document.createElement('style');
            style.id = 'lowercase-subtitle-style';
            style.textContent = `
                .CaptionBox p {
                    text-transform: lowercase !important;
                }
            `;
            document.head.appendChild(style);
        }
    }

    // 移除小写字幕的 CSS 样式
    function removeLowercaseStyle() {
        const style = document.querySelector('#lowercase-subtitle-style');
        if (style) {
            style.remove();
        }
    }

    // 根据当前状态更新样式(启用或禁用)
    function updateState() {
        if (isEnabled()) {
            injectLowercaseStyle();  // 启用时注入样式
        } else {
            removeLowercaseStyle();  // 禁用时移除样式
        }
    }

    // 从 localStorage 获取当前的启用/禁用状态(默认启用)
    function isEnabled() {
        return localStorage.getItem('huluSubtitleEnabled') !== 'false';
    }

    // 切换启用/禁用状态
    function toggleState() {
        const currentState = isEnabled();
        localStorage.setItem('huluSubtitleEnabled', !currentState);  // 切换状态
        updateState();
        // 更新菜单项文本
        GM_registerMenuCommand(isEnabled() ? '禁用字幕小写转换' : '启用字幕小写转换', toggleState);
    }

    // 添加菜单命令,允许用户启用或禁用脚本功能
    GM_registerMenuCommand(isEnabled() ? '禁用字幕小写转换' : '启用字幕小写转换', toggleState);

    // 页面加载时根据状态更新样式
    updateState();

    // 监听 DOM 变化(例如新字幕加载),根据状态动态应用样式
    const observer = new MutationObserver(updateState);
    observer.observe(document.body, { childList: true, subtree: true });

})();

7 个赞

感谢大佬分享 。

感谢 分享 点赞

感谢分享,助你一赞~

好东西,MARK一下

1 个赞

欢迎新人加入 :smiling_face_with_three_hearts:

感谢佬的分享