暂时OK,可可以高亮

youtube_sub.js

@@ -86,25 +86,30 @@ GM_addStyle(`
 
     .subtitle-line {
         padding: 12px 15px;
-        margin: 6px 0;
+        margin: 4px 0;
         cursor: pointer;
         border-radius: 4px;
         transition: background-color 0.2s ease, transform 0.1s ease;
         position: relative;
         white-space: pre-wrap;
         word-wrap: break-word;
-        line-height: 1.5;
+        line-height: 1.4;
         width: 410px;
         font-size: 14px;
     }
 
-    .subtitle-line:hover {
-        background: rgba(255, 255, 255, 0.1);
-        transform: translateX(5px);
+    .subtitle-word {
+        display: inline;
+        padding: 0 1px;
+        border-radius: 2px;
+        transition: all 0.15s ease;
+        opacity: 0.7;
     }
 
-    .subtitle-line.active {
-        background: rgba(255, 255, 255, 0.2);
+    .subtitle-word.active {
+        background: rgba(255, 255, 255, 0.3);
+        color: #fff;
+        opacity: 1;
     }
 
     .mixed-line {
@@ -166,6 +171,20 @@ GM_addStyle(`
     .subtitle-content::-webkit-scrollbar-thumb:hover {
         background: rgba(255, 255, 255, 0.4);
     }
+
+    .subtitle-word {
+        display: inline-block;
+        padding: 0 1px;
+        border-radius: 2px;
+        transition: all 0.15s ease;
+        opacity: 0.7;
+    }
+
+    .subtitle-word.active {
+        background: rgba(255, 255, 255, 0.3);
+        color: #fff;
+        opacity: 1;
+    }
 `;
 
     // Apply main styles
@@ -367,9 +386,13 @@ GM_addStyle(`
                         .map(event => ({
                             startTime: event.tStartMs / 1000,
                             endTime: (event.tStartMs + event.dDurationMs) / 1000,
-                            text: event.segs.map(seg => seg.utf8).join('').trim()
+                            words: event.segs.map(seg => ({
+                                text: seg.utf8,
+                                startTime: seg.tOffsetMs ? (event.tStartMs + seg.tOffsetMs) / 1000 : event.tStartMs / 1000,
+                                endTime: (seg.tOffsetMs ? event.tStartMs + seg.tOffsetMs + (seg.dDurationMs || 0) : event.tStartMs + event.dDurationMs) / 1000
+                            }))
                         }))
-                        .filter(sub => sub.text);
+                        .filter(sub => sub.words.length);
 
                     debug.log(`Loaded ${subtitles.length} subtitles`);
                     return subtitles;
@@ -526,19 +549,30 @@ GM_addStyle(`
             this.container.classList.toggle('collapsed', this.isCollapsed);
         }
 
+        // Update displaySingleLanguage
         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;
+                sub.words.forEach((word, i) => {
+                    const wordSpan = document.createElement('span');
+                    wordSpan.className = 'subtitle-word';
+                    wordSpan.textContent = word.text.trim();
+                    wordSpan.dataset.start = word.startTime;
+                    wordSpan.dataset.end = word.endTime;
+                    line.appendChild(wordSpan);
+
+                    // Add space between words
+                    if (i < sub.words.length - 1) {
+                        line.appendChild(document.createTextNode(' '));
+                    }
+                });
 
                 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;
@@ -679,6 +713,37 @@ GM_addStyle(`
                 return active[0].index;
             };
 
+            const highlightWords = (currentTime, activeLine) => {
+                if (!activeLine) return;
+
+                const words = Array.from(activeLine.querySelectorAll('.subtitle-word'));
+
+                // Sort words by start time
+                words.sort((a, b) =>
+                    parseFloat(a.dataset.start) - parseFloat(b.dataset.start)
+                );
+
+                let hasActiveWord = false;
+
+                words.forEach((word, index) => {
+                    const start = parseFloat(word.dataset.start);
+                    const end = parseFloat(word.dataset.end);
+                    const isActive = currentTime >= start && currentTime <= end;
+
+                    if (isActive) {
+                        hasActiveWord = true;
+                    }
+
+                    // Also highlight previous words when current word is active
+                    word.classList.toggle('active', hasActiveWord ?
+                        currentTime >= start || index < words.findIndex(w =>
+                            currentTime >= parseFloat(w.dataset.start) &&
+                            currentTime <= parseFloat(w.dataset.end)
+                        ) : false
+                    );
+                });
+            };
+
             const handleTimeUpdate = (video) => {
                 const now = performance.now();
                 if (now - lastUpdate < updateThreshold) {
@@ -693,6 +758,11 @@ GM_addStyle(`
 
                 const newIndex = findActiveSubtitle(currentTime, subtitles);
                 if (newIndex === lastActiveIndex) {
+                    // Still highlight words even if subtitle hasn't changed
+                    const activeLine = this.container.querySelector('.subtitle-line.active');
+                    if (activeLine) {
+                        highlightWords(currentTime, activeLine);
+                    }
                     rafId = requestAnimationFrame(() => handleTimeUpdate(video));
                     return;
                 }
@@ -703,12 +773,14 @@ GM_addStyle(`
                     const isActive = lineIndex === newIndex;
 
                     line.classList.toggle('active', isActive);
-                    if (isActive && lineIndex !== lastActiveIndex) {
-                        // Smooth scroll for new active subtitle
-                        line.scrollIntoView({
-                            block: 'center',
-                            behavior: 'smooth'
-                        });
+                    if (isActive) {
+                        highlightWords(currentTime, line);
+                        if (lineIndex !== lastActiveIndex) {
+                            line.scrollIntoView({
+                                block: 'center',
+                                behavior: 'smooth'
+                            });
+                        }
                     }
                 });