直接让 Chatgpt 写一个油猴插件,将字幕展示区的字符串拼接起来,然后在视频播放完后,直接点击右下角浮动按钮,让其展示文本框,然后复制粘贴走。
// ==UserScript==
// @name 油猴创建导出字幕按钮并弹出浮动层(显示字幕可复制)
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 在 YouTube 页面右下角创建一个浮动按钮,点击后弹出一个浮动层,显示英文字幕和中文字幕,并允许复制
// @match *://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let sourceSubtitles = []; // 存储英文字幕(源语言)
let targetSubtitles = []; // 存储中文字幕(翻译后字幕)
// 创建浮动层
function createFloatingLayer() {
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100vw';
overlay.style.height = '100vh';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
overlay.style.display = 'flex';
overlay.style.alignItems = 'center';
overlay.style.justifyContent = 'center';
overlay.style.zIndex = '9999';
overlay.style.display = 'none'; // 初始隐藏
// 创建弹窗内容容器
const container = document.createElement('div');
container.style.backgroundColor = '#fff';
container.style.padding = '20px';
container.style.borderRadius = '8px';
container.style.width = '80%';
container.style.maxWidth = '900px';
container.style.textAlign = 'center';
// 创建英文字幕文本框
const sourceTextarea = document.createElement('textarea');
sourceTextarea.value = sourceSubtitles.join('\n');
sourceTextarea.style.width = '100%';
sourceTextarea.style.height = '200px';
sourceTextarea.style.marginBottom = '10px';
sourceTextarea.style.resize = 'none';
sourceTextarea.setAttribute('readonly', 'true'); // 设置为只读,防止修改
// 创建中文字幕文本框
const targetTextarea = document.createElement('textarea');
targetTextarea.value = targetSubtitles.join('\n');
targetTextarea.style.width = '100%';
targetTextarea.style.height = '200px';
targetTextarea.style.marginBottom = '10px';
targetTextarea.style.resize = 'none';
targetTextarea.setAttribute('readonly', 'true'); // 设置为只读,防止修改
// 关闭按钮
const closeButton = document.createElement('button');
closeButton.textContent = '关闭';
closeButton.style.backgroundColor = '#FF0000';
closeButton.style.color = '#fff';
closeButton.style.border = 'none';
closeButton.style.padding = '10px 15px';
closeButton.style.fontSize = '16px';
closeButton.style.cursor = 'pointer';
closeButton.style.borderRadius = '5px';
closeButton.addEventListener('click', () => {
overlay.style.display = 'none'; // 点击关闭按钮后隐藏弹窗
});
// 将所有内容添加到容器
container.appendChild(sourceTextarea);
container.appendChild(targetTextarea);
container.appendChild(closeButton);
// 将容器添加到浮动层
overlay.appendChild(container);
// 将浮动层添加到页面
document.body.appendChild(overlay);
// 显示浮动层
overlay.style.display = 'flex';
}
// 定时检查字幕并累积
function checkSubtitles() {
const captionWindow = document.querySelector('#immersive-translate-caption-window');
if (captionWindow && captionWindow.shadowRoot) {
const shadowRoot = captionWindow.shadowRoot;
const sourceText = shadowRoot.querySelector('.source-cue')?.textContent?.trim();
const translatedText = shadowRoot.querySelector('.target-cue')?.textContent?.trim();
// 处理英文字幕
if (sourceText && !sourceSubtitles.includes(sourceText)) {
sourceSubtitles.push(sourceText); // 累积英文字幕
console.log('✅ 新英文字幕:', sourceText); // 输出新的英文字幕
}
// 处理中文字幕
if (translatedText && !targetSubtitles.includes(translatedText)) {
targetSubtitles.push(translatedText); // 累积中文字幕
console.log('✅ 新中文字幕:', translatedText); // 输出新的中文字幕
}
}
}
// 创建浮动按钮
function createFloatingButton() {
const button = document.createElement('button');
button.textContent = '显示字幕';
button.style.position = 'fixed';
button.style.bottom = '20px';
button.style.right = '20px';
button.style.padding = '10px 15px';
button.style.backgroundColor = '#FF0000';
button.style.color = '#fff';
button.style.border = 'none';
button.style.fontSize = '16px';
button.style.cursor = 'pointer';
button.style.borderRadius = '5px';
button.style.zIndex = '9999';
// 设置点击按钮的行为,弹出字幕浮动层
button.addEventListener('click', () => {
createFloatingLayer();
});
// 将按钮添加到页面
document.body.appendChild(button);
console.log('✅ 浮动导出字幕按钮已创建');
}
// 页面加载完成后创建浮动按钮
const interval = setInterval(() => {
const menu = document.querySelector('#menu');
if (menu) {
createFloatingButton(); // 创建按钮
clearInterval(interval); // 终止定时器
console.log('✅ 页面元素加载完成,浮动按钮已创建');
}
}, 1000); // 每隔1秒检查一次
// 每隔1秒检查字幕并累积
setInterval(checkSubtitles, 1000);
})();