基本可用用

youtube_sub.js

@@ -0,0 +1,873 @@
+// ==UserScript==
+// @name         YouTube Subtitle Manager
+// @namespace    http://tampermonkey.net/
+// @version      1.1
+// @description  Enhanced YouTube subtitle manager with bilingual support
+// @author       Your name
+// @match        https://www.youtube.com/*
+// @grant        GM_addStyle
+// @run-at       document-end
+// ==/UserScript==
+
+// Critical z-index style - must be outside IIFE
+GM_addStyle(`
+    .subtitle-manager {
+        z-index: 9999999 !important;
+    }
+`);
+(function () {
+    'use strict';
+
+    // 增强的样式定义，添加过渡效果
+    const styles = `
+        .subtitle-manager {
+            position: fixed;
+            right: 0;
+            top: 60px;
+            width: 300px;
+            height: calc(100vh - 60px);
+            background: rgba(33, 33, 33, 0.95);
+            color: white;
+            z-index: 9999;
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.3s ease;
+        }
+
+        .subtitle-manager.collapsed {
+            transform: translateX(290px);
+        }
+
+        .subtitle-toggle {
+            position: absolute;
+            left: -30px;
+            top: 10px;
+            width: 30px;
+            height: 30px;
+            background: rgba(33, 33, 33, 0.95);
+            border: none;
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px 0 0 4px;
+        }
+
+        .subtitle-tabs {
+            display: flex;
+            border-bottom: 1px solid #444;
+        }
+
+        .subtitle-tab {
+            flex: 1;
+            padding: 10px;
+            text-align: center;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            color: white;
+            transition: background-color 0.2s ease;
+        }
+
+        .subtitle-tab.active {
+            background: #444;
+        }
+
+        .subtitle-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            transition: opacity 0.3s ease;
+        }
+
+        .subtitle-line {
+            padding: 8px;
+            margin: 4px 0;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+            position: relative;
+        }
+
+        .subtitle-line:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateX(5px);
+        }
+
+        .subtitle-line.active {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .mixed-line {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 12px 8px;
+        }
+
+        .en-text {
+            color: #fff;
+            font-size: 14px;
+        }
+
+        .zh-text {
+            color: #aaa;
+            font-size: 14px;
+        }
+
+        .timestamp {
+            position: absolute;
+            right: 8px;
+            top: 4px;
+            font-size: 10px;
+            color: #888;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .subtitle-line:hover .timestamp {
+            opacity: 1;
+        }
+
+        /* 自定义滚动条样式 */
+        .subtitle-content::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .subtitle-content::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .subtitle-content::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+        }
+    `;
+
+    // Apply main styles
+    GM_addStyle(styles);
+    // 添加调试日志函数
+    const debug = {
+        log: (...args) => {
+            console.log('%c[Subtitle Manager]', 'color: #4CAF50', ...args);
+        },
+        error: (...args) => {
+            console.error('%c[Subtitle Manager]', 'color: #f44336', ...args);
+        },
+        warn: (...args) => {
+            console.warn('%c[Subtitle Manager]', 'color: #ff9800', ...args);
+        }
+    };
+
+    // 注入样式的函数
+    function injectStyles(styles) {
+        try {
+            const styleSheet = document.createElement('style');
+            styleSheet.textContent = styles;
+            document.head.appendChild(styleSheet);
+            debug.log('Styles injected successfully');
+        } catch (error) {
+            debug.error('Failed to inject styles:', error);
+        }
+    }
+
+    class SubtitleManager {
+        constructor() {
+            this.currentTab = 'english';
+            this.subtitles = {
+                english: [],
+                chinese: [],
+            };
+            this.container = null;
+            this.currentTime = 0;
+            this.isCollapsed = false;
+            this.setupUI();
+            this.setupEventListeners();
+        }
+
+        checkCaptionSources(player) {
+            // Method 1: Direct caption track
+            const tracks = player.getElementsByTagName('track');
+            if (tracks.length) {
+                debug.log('Found caption tracks:', tracks.length);
+                return true;
+            }
+
+            // Method 2: YouTube caption button
+            const captionButton = document.querySelector('.ytp-subtitles-button');
+            if (captionButton) {
+                debug.log('Caption button state:', captionButton.getAttribute('aria-pressed'));
+                return true;
+            }
+
+            // Method 3: YouTube caption data
+            if (player.getPlayerResponse) {
+                const response = player.getPlayerResponse();
+                debug.log('Player response:', response);
+                if (response?.captions?.playerCaptionsTracklistRenderer?.captionTracks) {
+                    return true;
+                }
+            }
+
+            return false;
+        }
+
+        async waitForSubtitles() {
+            debug.log('Waiting for subtitles...');
+            return new Promise(resolve => {
+                const checkSubs = () => {
+                    const player = document.querySelector('.html5-video-player');
+                    if (!player) {
+                        debug.log('No player found, retrying...');
+                        requestAnimationFrame(checkSubs);
+                        return;
+                    }
+
+                    // Check multiple caption sources
+                    const hasCaptions = this.checkCaptionSources(player);
+
+                    if (hasCaptions) {
+                        debug.log('Captions found!');
+                        resolve(true);
+                    } else {
+                        debug.log('No captions yet, retrying...');
+                        requestAnimationFrame(checkSubs);
+                    }
+                };
+                checkSubs();
+            });
+        }
+        async waitForYouTubeAPI() {
+            debug.log('Waiting for YouTube API initialization...');
+            return new Promise(resolve => {
+                const check = () => {
+                    const player = document.querySelector('.html5-video-player');
+                    debug.log('Checking for player:', player);
+                    if (player) {
+                        debug.log('Player API methods:', Object.keys(player));
+                    }
+
+                    if (window.ytcfg && player) {
+                        debug.log('YouTube API ready');
+                        resolve();
+                    } else {
+                        requestAnimationFrame(check);
+                    }
+                };
+                check();
+            });
+        }
+
+        async getVideoTracks() {
+            debug.log('Getting video tracks...');
+
+            // Wait for API
+            await this.waitForYouTubeAPI();
+
+            // Get player with detailed logging
+            const player = document.querySelector('.html5-video-player');
+            debug.log('Player found:', player);
+            debug.log('Player methods:', Object.getOwnPropertyNames(player.__proto__));
+
+            // Try different methods to get captions
+            try {
+                // Method 1: Direct API
+                if (player.getSubtitlesTrackList) {
+                    const tracks = await player.getSubtitlesTrackList();
+                    debug.log('Tracks from API:', tracks);
+                    return tracks;
+                }
+
+                // Method 2: Get from player config 
+                if (player.getPlayerResponse) {
+                    const response = await player.getPlayerResponse();
+                    debug.log('Player response:', response);
+                    if (response.captions) {
+                        return response.captions.playerCaptionsTracklistRenderer.captionTracks;
+                    }
+                }
+
+                // Method 3: Get from DOM
+                const captionButton = document.querySelector('.ytp-subtitles-button');
+                debug.log('Caption button found:', captionButton);
+                if (captionButton) {
+                    captionButton.click();
+                    await new Promise(r => setTimeout(r, 1000));
+
+                    const menu = document.querySelector('.ytp-caption-window-container');
+                    debug.log('Caption menu found:', menu);
+                    if (menu) {
+                        const tracks = Array.from(menu.querySelectorAll('.ytp-caption-track'))
+                            .map(track => ({
+                                languageCode: track.dataset.code,
+                                baseUrl: track.dataset.url
+                            }));
+                        debug.log('Tracks from DOM:', tracks);
+                        return tracks;
+                    }
+                }
+
+            } catch (error) {
+                debug.error('Error getting tracks:', error);
+            }
+
+            debug.warn('No tracks found using any method');
+            return [];
+        }
+
+        async loadSubtitles(track) {
+            const MAX_RETRIES = 3;
+            let retries = 0;
+        
+            while (retries < MAX_RETRIES) {
+                try {
+                    // Use baseUrl instead of src
+                    const url = new URL(track.baseUrl);
+                    // Add required params for JSON format
+                    url.searchParams.set('fmt', 'json3');
+                    
+                    const response = await fetch(url.toString());
+                    if (!response.ok) {
+                        throw new Error(`HTTP error: ${response.status}`);
+                    }
+        
+                    const data = await response.json();
+                    debug.log('Subtitle data:', data);
+        
+                    if (!data?.events) {
+                        throw new Error('Invalid subtitle data format');
+                    }
+        
+                    const subtitles = data.events
+                        .filter(event => event.segs && event.tStartMs !== undefined)
+                        .map(event => ({
+                            startTime: event.tStartMs / 1000,
+                            endTime: (event.tStartMs + event.dDurationMs) / 1000,
+                            text: event.segs.map(seg => seg.utf8).join('').trim()
+                        }))
+                        .filter(sub => sub.text);
+        
+                    debug.log(`Loaded ${subtitles.length} subtitles`);
+                    return subtitles;
+        
+                } catch (error) {
+                    debug.error(`Subtitle load attempt ${retries + 1} failed:`, error);
+                    retries++;
+                    if (retries === MAX_RETRIES) {
+                        debug.error('Failed to load subtitles after all retries');
+                        return [];
+                    }
+                    // Exponential backoff
+                    await new Promise(r => setTimeout(r, 1000 * Math.pow(2, retries)));
+                }
+            }
+            return [];
+        }
+
+        parseVTT(vttText) {
+            const lines = vttText.trim().split('\n');
+            const subtitles = [];
+            let currentSubtitle = null;
+
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i].trim();
+
+                // 跳过 WEBVTT 头部
+                if (line === 'WEBVTT' || line === '') continue;
+
+                // 解析时间戳
+                const timeMatch = line.match(/(\d{2}):(\d{2}):(\d{2})\.(\d{3}) --> (\d{2}):(\d{2}):(\d{2})\.(\d{3})/);
+                if (timeMatch) {
+                    if (currentSubtitle) {
+                        subtitles.push(currentSubtitle);
+                    }
+
+                    currentSubtitle = {
+                        startTime: this.parseTime(timeMatch.slice(1, 5)),
+                        endTime: this.parseTime(timeMatch.slice(5, 9)),
+                        text: ''
+                    };
+                    continue;
+                }
+
+                // 收集字幕文本
+                if (currentSubtitle && line) {
+                    currentSubtitle.text += (currentSubtitle.text ? '\n' : '') + line;
+                }
+            }
+
+            // 添加最后一条字幕
+            if (currentSubtitle) {
+                subtitles.push(currentSubtitle);
+            }
+
+            return subtitles;
+        }
+
+        parseTime(timeParts) {
+            return parseInt(timeParts[0]) * 3600 +
+                parseInt(timeParts[1]) * 60 +
+                parseInt(timeParts[2]) +
+                parseInt(timeParts[3]) / 1000;
+        }
+
+        formatTime(seconds) {
+            const h = Math.floor(seconds / 3600);
+            const m = Math.floor((seconds % 3600) / 60);
+            const s = Math.floor(seconds % 60);
+            return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+        }
+
+        async waitForElement(selector, timeout = 10000) {
+            debug.log(`Waiting for element: ${selector}`);
+            const element = document.querySelector(selector);
+            if (element) return element;
+
+            return new Promise(resolve => {
+                const observer = new MutationObserver(() => {
+                    const element = document.querySelector(selector);
+                    if (element) {
+                        observer.disconnect();
+                        resolve(element);
+                    }
+                });
+
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true
+                });
+            });
+        }
+
+        setupUI() {
+            debug.log('Setting up UI');
+            try {
+                // Create container with trusted content
+                this.container = document.createElement('div');
+                this.container.className = 'subtitle-manager';
+
+                // Create toggle button
+                const toggleButton = document.createElement('button');
+                toggleButton.className = 'subtitle-toggle';
+                toggleButton.textContent = '≡'; // Use textContent instead of innerHTML
+
+                // Create tabs container
+                const tabs = document.createElement('div');
+                tabs.className = 'subtitle-tabs';
+
+                // Create tab buttons safely
+                const tabsData = [
+                    { id: 'english', text: 'English' },
+                    { id: 'chinese', text: '中文' },
+                    { id: 'mixed', text: 'Mixed' }
+                ];
+
+                tabsData.forEach(tab => {
+                    const button = document.createElement('button');
+                    button.className = 'subtitle-tab';
+                    button.dataset.tab = tab.id;
+                    button.textContent = tab.text;
+                    if (tab.id === 'english') button.classList.add('active');
+                    tabs.appendChild(button);
+                });
+
+                // Create content container
+                const content = document.createElement('div');
+                content.className = 'subtitle-content';
+
+                // Append elements
+                this.container.appendChild(toggleButton);
+                this.container.appendChild(tabs);
+                this.container.appendChild(content);
+
+                // Wait for document.body to be available
+                if (document.body) {
+                    document.body.appendChild(this.container);
+                } else {
+                    window.addEventListener('DOMContentLoaded', () => {
+                        document.body.appendChild(this.container);
+                    });
+                }
+
+                // Add toggle functionality
+                toggleButton.addEventListener('click', () => this.toggleCollapse());
+
+            } catch (error) {
+                debug.error('Error setting up UI:', error);
+            }
+        }
+
+        toggleCollapse() {
+            this.isCollapsed = !this.isCollapsed;
+            this.container.classList.toggle('collapsed', this.isCollapsed);
+        }
+
+        displaySingleLanguage(container, subtitles) {
+            subtitles.forEach((sub, index) => {
+                const line = document.createElement('div');
+                line.className = 'subtitle-line';
+
+                const text = document.createElement('span');
+                text.textContent = sub.text;
+
+                const timestamp = document.createElement('span');
+                timestamp.className = 'timestamp';
+                timestamp.textContent = this.formatTime(sub.startTime);
+
+                line.appendChild(text);
+                line.appendChild(timestamp);
+                line.dataset.time = sub.startTime;
+                line.dataset.index = index;
+
+                container.appendChild(line);
+            });
+        }
+
+        displayMixed(container) {
+            const maxLength = Math.max(
+                this.subtitles.english.length,
+                this.subtitles.chinese.length
+            );
+
+            for (let i = 0; i < maxLength; i++) {
+                const line = document.createElement('div');
+                line.className = 'subtitle-line mixed-line';
+
+                const enSub = this.subtitles.english[i];
+                const zhSub = this.subtitles.chinese[i];
+
+                const enText = document.createElement('div');
+                enText.className = 'en-text';
+                enText.textContent = enSub?.text || '';
+
+                const zhText = document.createElement('div');
+                zhText.className = 'zh-text';
+                zhText.textContent = zhSub?.text || '';
+
+                const timestamp = document.createElement('span');
+                timestamp.className = 'timestamp';
+                timestamp.textContent = enSub ? this.formatTime(enSub.startTime) : '';
+
+                line.appendChild(enText);
+                line.appendChild(zhText);
+                line.appendChild(timestamp);
+
+                if (enSub) {
+                    line.dataset.time = enSub.startTime;
+                    line.dataset.index = i;
+                }
+
+                container.appendChild(line);
+            }
+        }
+
+        setupEventListeners() {
+            // 标签切换
+            this.container.addEventListener('click', (e) => {
+                if (e.target.classList.contains('subtitle-tab')) {
+                    const tabs = this.container.querySelectorAll('.subtitle-tab');
+                    tabs.forEach(tab => tab.classList.remove('active'));
+                    e.target.classList.add('active');
+                    this.currentTab = e.target.dataset.tab;
+                    this.updateSubtitleDisplay();
+                }
+            });
+
+            // 字幕点击跳转
+            this.container.addEventListener('click', (e) => {
+                const line = e.target.closest('.subtitle-line');
+                if (line && line.dataset.time) {
+                    const video = document.querySelector('video');
+                    if (video) {
+                        video.currentTime = parseFloat(line.dataset.time);
+                        // 添加点击反馈
+                        line.style.transform = 'scale(0.98)';
+                        setTimeout(() => {
+                            line.style.transform = '';
+                        }, 100);
+                    }
+                }
+            });
+
+            // Tab 键切换字幕
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                    const tabs = ['english', 'chinese', 'mixed'];
+                    const currentIndex = tabs.indexOf(this.currentTab);
+                    const nextIndex = (currentIndex + 1) % tabs.length;
+                    this.currentTab = tabs[nextIndex];
+
+                    const tabButtons = this.container.querySelectorAll('.subtitle-tab');
+                    tabButtons.forEach(tab => {
+                        tab.classList.toggle('active', tab.dataset.tab === this.currentTab);
+                    });
+
+                    this.updateSubtitleDisplay();
+                }
+            });
+
+            // 视频时间更新
+            this.setupVideoTimeUpdate();
+        }
+
+        setupVideoTimeUpdate() {
+            let rafId = null;
+            const updateThreshold = 16; // ~60fps
+            let lastUpdate = 0;
+    
+            const findSubtitleIndex = (time, subtitles) => {
+                // Binary search for faster lookup
+                let start = 0;
+                let end = subtitles.length - 1;
+                
+                while (start <= end) {
+                    const mid = Math.floor((start + end) / 2);
+                    const sub = subtitles[mid];
+                    
+                    if (time >= sub.startTime && time <= sub.endTime) {
+                        return mid;
+                    }
+                    
+                    if (time < sub.startTime) {
+                        end = mid - 1;
+                    } else {
+                        start = mid + 1;
+                    }
+                }
+                return -1;
+            };
+    
+            const handleTimeUpdate = (video) => {
+                const now = performance.now();
+                if (now - lastUpdate < updateThreshold) {
+                    rafId = requestAnimationFrame(() => handleTimeUpdate(video));
+                    return;
+                }
+                lastUpdate = now;
+    
+                const currentTime = video.currentTime;
+                const subtitles = this.currentTab === 'chinese' ? 
+                    this.subtitles.chinese : this.subtitles.english;
+    
+                const newIndex = findSubtitleIndex(currentTime, subtitles);
+                if (newIndex === this.subtitleIndex) {
+                    rafId = requestAnimationFrame(() => handleTimeUpdate(video));
+                    return;
+                }
+    
+                this.subtitleIndex = newIndex;
+                const lines = this.container.querySelectorAll('.subtitle-line');
+                
+                lines.forEach(line => {
+                    const lineIndex = parseInt(line.dataset.index);
+                    const isActive = lineIndex === newIndex;
+                    
+                    line.classList.toggle('active', isActive);
+                    if (isActive) {
+                        line.scrollIntoView({
+                            block: 'center',
+                            behavior: 'auto'
+                        });
+                    }
+                });
+    
+                rafId = requestAnimationFrame(() => handleTimeUpdate(video));
+            };
+    
+            const setupVideoListener = async () => {
+                const video = await this.waitForElement('video');
+                if (video) {
+                    handleTimeUpdate(video);
+                    
+                    video.addEventListener('pause', () => {
+                        cancelAnimationFrame(rafId);
+                    });
+                    
+                    video.addEventListener('play', () => {
+                        lastUpdate = 0;
+                        handleTimeUpdate(video);
+                    });
+                }
+            };
+    
+            setupVideoListener();
+        }
+
+        async getCaptionTracks() {
+            const player = document.querySelector('.html5-video-player');
+            if (!player) return null;
+
+            try {
+                // Try YouTube's API first
+                if (player.getPlayerResponse) {
+                    const response = player.getPlayerResponse();
+                    if (response?.captions?.playerCaptionsTracklistRenderer?.captionTracks) {
+                        return response.captions.playerCaptionsTracklistRenderer.captionTracks;
+                    }
+                }
+
+                // Fallback to DOM tracks
+                return Array.from(player.getElementsByTagName('track'));
+
+            } catch (error) {
+                debug.error('Error getting caption tracks:', error);
+                return null;
+            }
+        }
+
+        async initializeSubtitles() {
+            debug.log('Starting subtitle initialization');
+
+            // 1. Wait for subtitles
+            const hasCaptions = await this.waitForSubtitles();
+            if (!hasCaptions) {
+                debug.error('No captions available');
+                return;
+            }
+
+            // 2. Get tracks
+            const tracks = await this.getCaptionTracks();
+            if (!tracks?.length) {
+                debug.error('No caption tracks found');
+                return;
+            }
+
+            //enter debug mode
+
+            //debugger;
+
+            // 3. Load subtitle data
+            for (const track of tracks) {
+                if (track.languageCode.includes('en')) {
+                    this.subtitles.english = await this.loadSubtitles(track);
+                }
+                if (track.languageCode.includes('zh')) {
+                    this.subtitles.chinese = await this.loadSubtitles(track);
+                }
+            }
+
+            // 4. Display subtitles
+            this.updateSubtitleDisplay();
+        }
+        createMessageElement(text) {
+            const div = document.createElement('div');
+            div.className = 'subtitle-line';
+            div.textContent = text;
+            return div;
+        }
+
+        updateSubtitleDisplay() {
+            const content = this.container.querySelector('.subtitle-content');
+            content.style.opacity = '0';
+    
+            setTimeout(() => {
+                // Clear content safely
+                while (content.firstChild) {
+                    content.removeChild(content.firstChild);
+                }
+    
+                // Check for empty subtitles
+                if (!this.subtitles.english.length && !this.subtitles.chinese.length) {
+                    content.appendChild(this.createMessageElement('No subtitles available'));
+                    content.style.opacity = '1';
+                    return;
+                }
+    
+                // Display based on current tab
+                switch (this.currentTab) {
+                    case 'english':
+                        if (this.subtitles.english.length) {
+                            this.displaySingleLanguage(content, this.subtitles.english);
+                        } else {
+                            content.appendChild(this.createMessageElement('English subtitles not available'));
+                        }
+                        break;
+                    case 'chinese':
+                        if (this.subtitles.chinese.length) {
+                            this.displaySingleLanguage(content, this.subtitles.chinese);
+                        } else {
+                            content.appendChild(this.createMessageElement('中文字幕不可用'));
+                        }
+                        break;
+                    case 'mixed':
+                        if (this.subtitles.english.length || this.subtitles.chinese.length) {
+                            this.displayMixed(content);
+                        } else {
+                            content.appendChild(this.createMessageElement('No subtitles available for mixed mode'));
+                        }
+                        break;
+                }
+    
+                // Fade in
+                content.style.opacity = '1';
+            }, 300);
+        }
+    }
+
+    // Modified initialization with proper waiting
+    async function waitForYouTubeReady() {
+        debug.log('Waiting for YouTube player...');
+        return new Promise((resolve) => {
+            const check = () => {
+                const player = document.querySelector('.html5-video-player');
+                const video = document.querySelector('video');
+                if (player && video && !player.classList.contains('uninitialized')) {
+                    debug.log('YouTube player ready');
+                    resolve();
+                } else {
+                    requestAnimationFrame(check);
+                }
+            };
+            check();
+        });
+    }
+
+    // Add init logging
+    async function initializeManager() {
+        debug.log('=== Starting initialization ===');
+        debug.log('Current URL:', window.location.href);
+        debug.log('Document ready state:', document.readyState);
+
+        if (!window.location.pathname.includes('/watch')) {
+            debug.log('Not a video page, skipping');
+            return;
+        }
+
+        try {
+            await waitForYouTubeReady();
+            debug.log('YouTube ready, creating manager');
+            const manager = new SubtitleManager();
+
+            debug.log('Manager created, initializing subtitles');
+            await manager.initializeSubtitles();
+            debug.log('=== Initialization complete ===');
+        } catch (error) {
+            debug.error('Initialization failed:', error);
+        }
+    }
+    // Modified URL change detection
+    let lastUrl = location.href;
+    const observer = new MutationObserver(() => {
+        if (location.href !== lastUrl) {
+            lastUrl = location.href;
+            initializeManager();
+        }
+    });
+
+    // Start observing
+    observer.observe(document.body, {
+        subtree: true,
+        childList: true
+    });
+
+    // Initialize when document is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeManager);
+    } else {
+        setTimeout(initializeManager, 2000);
+    }
+})();
+//