添加总结字幕

youtube_sub.js

@@ -29,7 +29,8 @@ GM_addStyle(`
     }
     const WORD_CACHE_EXPIRY = 7 * 24 * 60 * 60 * 1000; // 7 days in ms
     const WORD_CACHE_KEY = 'youtube_subtitle_word_cache';
-
+    // Add after WORD_CACHE_KEY constant:
+    const NEW_WORDS_CACHE_KEY = 'youtube_subtitle_newword';
     // 增强的样式定义，添加过渡效果
     const styles = `
     .subtitle-manager {
@@ -524,6 +525,141 @@ GM_addStyle(`
             window.subtitleManagerInstance = this;
             this.speakerClickCount = 0; // Add counter
         }
+
+        extractUniqueWords() {
+            // Get all English words from subtitles
+            const words = this.subtitles.english
+                .flatMap(sub => sub.words
+                    .map(w => w.text.toLowerCase())
+                    .filter(text =>
+                        // Only include valid English words
+                        /^[a-z]+$/.test(text) &&
+                        text.length > 1
+                    )
+                );
+
+            // Remove duplicates and sort
+            return [...new Set(words)].sort();
+        }
+
+        loadNewWordsCache() {
+            try {
+                const cached = localStorage.getItem(NEW_WORDS_CACHE_KEY);
+                return cached ? new Set(JSON.parse(cached)) : new Set();
+            } catch (e) {
+                debug.error('Failed to load words cache:', e);
+                return new Set();
+            }
+        }
+
+        updateNewWordsCache(words) {
+            try {
+                const existingWords = this.loadNewWordsCache();
+                const updatedWords = [...existingWords, ...words];
+                localStorage.setItem(NEW_WORDS_CACHE_KEY,
+                    JSON.stringify([...new Set(updatedWords)]));
+            } catch (e) {
+                debug.error('Failed to update words cache:', e);
+            }
+        }
+
+        displayWordSummary(container) {
+            // Clear existing content safely
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
+
+            const uniqueWords = this.extractUniqueWords();
+            const existingWords = this.loadNewWordsCache();
+
+            // Add summary header
+            const summaryDiv = document.createElement('div');
+            summaryDiv.style.cssText = `
+        font-size: 18px;
+        padding: 15px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #ccc;
+        text-align: center;
+        font-weight: bold;
+        color: #4CAF50;
+    `;
+
+            container.appendChild(summaryDiv);
+
+            // Group words by first letter
+            const grouped = uniqueWords.reduce((acc, word) => {
+                const firstLetter = word[0].toUpperCase();
+                if (!acc[firstLetter]) acc[firstLetter] = [];
+                acc[firstLetter].push(word);
+                return acc;
+            }, {});
+
+            // Create letter sections with enhanced styling
+            Object.entries(grouped)
+                .sort(([a], [b]) => a.localeCompare(b))
+                .forEach(([letter, words]) => {
+                    const section = document.createElement('div');
+                    section.className = 'word-section';
+                    section.style.margin = '0 15px 25px 15px';
+
+                    const heading = document.createElement('h3');
+                    heading.style.cssText = `
+                color: #4CAF50;
+                margin: 15px 0;
+                font-size: 24px;
+                font-weight: bold;
+            `;
+                    heading.textContent = letter;
+                    section.appendChild(heading);
+
+                    const grid = document.createElement('div');
+                    grid.className = 'word-grid';
+                    grid.style.cssText = `
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                gap: 12px;
+                padding: 10px;
+            `;
+
+                    words.forEach(word => {
+                        const btn = document.createElement('button');
+                        btn.className = `word-btn subtitle-word ${existingWords.has(word) ? 'known' : 'new'}`;
+                        btn.style.cssText = `
+                    text-align: left;
+                    padding: 8px 12px;
+                    font-size: 16px;
+                    border-radius: 4px;
+                    transition: all 0.2s;
+                    cursor: pointer;
+                    ${existingWords.has(word) ? 'opacity: 0.5;' : ''}
+                `;
+                        btn.dataset.word = word;
+                        btn.textContent = word;
+
+                        btn.onclick = (e) => {
+                            e.stopPropagation();
+                            if (word) {
+                                this.showWordDefinition(word);
+                            }
+                        };
+
+                        grid.appendChild(btn);
+                    });
+
+                    section.appendChild(grid);
+                    container.appendChild(section);
+                });
+            
+            // Add new words to cache
+            this.updateNewWordsCache(uniqueWords);
+
+            // Get fresh count from cache after update
+            const freshCache = this.loadNewWordsCache();
+            const totalCachedWords = freshCache.size;
+
+            // Update summary text with fresh counts
+            summaryDiv.textContent = `Unique: ${uniqueWords.length} | Total: ${totalCachedWords}`;
+        }
         cleanup() {
             // Remove existing instance
             if (this.container) {
@@ -856,7 +992,8 @@ GM_addStyle(`
                 const tabsData = [
                     { id: 'english', text: 'English' },
                     { id: 'chinese', text: '中文' },
-                    { id: 'mixed', text: 'Mixed' }
+                    { id: 'mixed', text: 'Mixed' },
+                    { id: 'summary', text: 'Words' }
                 ];
 
                 tabsData.forEach(tab => {
@@ -1849,6 +1986,9 @@ GM_addStyle(`
                             content.appendChild(this.createMessageElement('No subtitles available for mixed mode'));
                         }
                         break;
+                    case 'summary':
+                        this.displayWordSummary(content);
+                        break;
                 }
 
                 // Fade in