正常版本，没有MARKDOWN

youtube_sub.js

@@ -1,3 +1,4 @@
+// Update userscript headers
 // ==UserScript==
 // @name         YouTube Subtitle Manager
 // @namespace    http://tampermonkey.net/
@@ -6,6 +7,9 @@
 // @author       Your name
 // @match        https://www.youtube.com/*
 // @grant        GM_addStyle
+// @grant        GM_xmlhttpRequest
+// @connect      sonygod-flash.hf.space
+// @require      https://cdn.jsdelivr.net/npm/marked/marked.min.js
 // @run-at       document-end
 // ==/UserScript==
 
@@ -316,6 +320,38 @@ GM_addStyle(`
         color: #000;
         opacity: 1;
     }
+
+    .word-definition-popup {
+        position: fixed;
+        right: -400px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 380px;
+        background: rgba(33, 33, 33, 0.95);
+        border-radius: 8px;
+        padding: 20px;
+        color: white;
+        transition: right 0.3s ease;
+        z-index: 10000;
+        max-height: 80vh;
+        overflow-y: auto;
+    }
+
+    .word-definition-popup.show {
+        right: 460px;
+    }
+
+    .word-definition-popup .markdown {
+        font-size: 14px;
+        line-height: 1.6;
+    }
+`;
+
+    // Add popup HTML
+    const popupHTML = `
+    <div class="word-definition-popup">
+        <div class="markdown"></div>
+    </div>
 `;
 
     // Apply main styles
@@ -703,7 +739,7 @@ GM_addStyle(`
                 if (sub.words && sub.words.length > 0) {
                     const line = document.createElement('div');
                     line.className = 'subtitle-line';
-        
+
                     // Add prefix buttons
                     const prefixControls = document.createElement('div');
                     prefixControls.className = 'line-controls';
@@ -718,11 +754,11 @@ GM_addStyle(`
                         prefixControls.appendChild(btn);
                     });
                     line.appendChild(prefixControls);
-        
+
                     // Add subtitle text container
                     const textContainer = document.createElement('div');
                     textContainer.className = 'subtitle-text';
-        
+
                     sub.words.forEach((word, i) => {
                         if (word.text && word.text.trim()) {
                             const wordBtn = document.createElement('button');
@@ -730,23 +766,120 @@ GM_addStyle(`
                             wordBtn.textContent = word.text.trim();
                             wordBtn.dataset.start = word.startTime;
                             wordBtn.dataset.end = word.endTime;
-                            wordBtn.onclick = (e) => {
-                                e.stopPropagation(); // Prevent line click
-                                // const video = document.querySelector('video');
-                                // if (video) {
-                                //     video.currentTime = parseFloat(word.startTime);
-                                // }
+                            wordBtn.onclick = async (e) => {
+                                e.stopPropagation();
                                 console.log(`You click "${word.text.trim()}" word`);
+
+                                let popup = document.querySelector('.word-definition-popup');
+                                if (!popup) {
+                                    // Create popup container
+                                    popup = document.createElement('div');
+                                    popup.className = 'word-definition-popup';
+
+                                    // Create markdown container
+                                    const markdownDiv = document.createElement('div');
+                                    markdownDiv.className = 'markdown';
+                                    popup.appendChild(markdownDiv);
+
+                                    // Add popup to document
+                                    document.body.appendChild(popup);
+                                }
+
+                                // Ensure markdown container exists
+                                let markdownContainer = popup.querySelector('.markdown');
+                                if (!markdownContainer) {
+                                    markdownContainer = document.createElement('div');
+                                    markdownContainer.className = 'markdown';
+                                    popup.appendChild(markdownContainer);
+                                }
+
+                                try {
+                                    // Use GM_xmlhttpRequest with updated config
+                                    const response = await new Promise((resolve, reject) => {
+                                        GM_xmlhttpRequest({
+                                            method: 'POST',
+                                            url: 'https://sonygod-flash.hf.space/ask',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                                'Accept': 'application/json',
+                                                'Origin': 'https://www.youtube.com'
+                                            },
+                                            data: JSON.stringify({
+                                                prompt: `中文翻译 "${word.text.trim()}"并详细介绍,100字以内，包括对应的英文近义词，英文反义词`,
+                                                model: 'GEMINI'
+                                            }),
+                                            onload: function (response) {
+                                                // Handle different status codes
+                                                if (response.status === 405) {
+                                                    reject(new Error('API endpoint does not accept POST method. Try GET instead.'));
+                                                } else if (response.status >= 200 && response.status < 300) {
+                                                    try {
+                                                        resolve(JSON.parse(response.responseText));
+                                                    } catch (e) {
+                                                        reject(new Error('Invalid JSON response'));
+                                                    }
+                                                } else {
+                                                    reject(new Error(`HTTP error! status: ${response.status}`));
+                                                }
+                                            },
+                                            onerror: function (error) {
+                                                reject(new Error('Network request failed: ' + error.error));
+                                            },
+                                            ontimeout: function () {
+                                                reject(new Error('Request timed out'));
+                                            }
+                                        });
+                                    });
+
+                                    console.log('API Response:', response);
+
+                                     const content = response?.data?.response;
+    if (!content) {
+        throw new Error('No content in API response');
+    }
+
+    // Create text node instead of using innerHTML
+    const markdownContent = marked.parse(content);
+    if (markdownContent) {
+        // Clear existing content
+        while (markdownContainer.firstChild) {
+            markdownContainer.removeChild(markdownContainer.firstChild);
+        }
+
+        // Create temporary container
+        const temp = document.createElement('div');
+        temp.textContent = markdownContent;
+        
+        // Safely append text content
+        const fragment = document.createDocumentFragment();
+        fragment.appendChild(temp);
+        markdownContainer.appendChild(fragment);
+        
+        popup.classList.add('show');
+    } else {
+        throw new Error('Failed to parse markdown content');
+    }
+
+                                } catch (error) {
+                                    console.error('API call failed:', error);
+                                    popup.querySelector('.markdown').innerHTML = `
+                                        <div style="color: red">
+                                            Error: ${error.message}<br>
+                                            Please check console for details.
+                                        </div>
+                                      `;
+                                    popup.classList.add('show');
+                                }
                             };
                             textContainer.appendChild(wordBtn);
-        
+
                             if (i < sub.words.length - 1) {
                                 textContainer.appendChild(document.createTextNode(' '));
                             }
                         }
                     });
                     line.appendChild(textContainer);
-        
+
                     // Add suffix buttons
                     const suffixControls = document.createElement('div');
                     suffixControls.className = 'line-controls';
@@ -761,13 +894,13 @@ GM_addStyle(`
                         suffixControls.appendChild(btn);
                     });
                     line.appendChild(suffixControls);
-        
+
                     // Add timestamp
                     const timestamp = document.createElement('span');
                     timestamp.className = 'timestamp';
                     timestamp.textContent = this.formatTime(sub.startTime);
                     line.appendChild(timestamp);
-                    
+
                     line.dataset.time = sub.startTime;
                     line.dataset.index = index;
                     container.appendChild(line);