利用JavaScript高效提取YouTube视频标题与描述的教程

/**
 * 提取当前YouTube视频页面的标题。
 * @returns {string} 视频标题，如果未找到则返回空字符串。
 */
function getYouTubeVideoTitle() {
    // 使用精准的CSS选择器定位标题元素
    const titleElement = document.querySelector('#below #title h1');
    // 检查元素是否存在，并返回其文本内容
    return titleElement ? titleElement.innerText.trim() : '';
}

// 示例用法：
const videoTitle = getYouTubeVideoTitle();
console.log('视频标题:', videoTitle);

/**
 * 提取当前YouTube视频页面的描述。
 * @returns {string} 视频描述，如果未找到则返回空字符串。
 */
function getYouTubeVideoDescription() {
    // 使用精准的CSS选择器定位描述元素
    const descriptionElement = document.querySelector('#description-inline-expander');
    // 检查元素是否存在，并返回其文本内容
    // 注意：如果描述未展开，可能需要模拟点击展开按钮
    return descriptionElement ? descriptionElement.innerText.trim() : '';
}

// 示例用法：
const videoDescription = getYouTubeVideoDescription();
console.log('视频描述:', videoDescription);

// content.js

/**
 * 封装所有视频信息提取逻辑。
 */
function extractVideoInfo() {
    const title = getYouTubeVideoTitle();
    const description = getYouTubeVideoDescription();

    // 可以根据需要发送这些信息到背景脚本或弹出页面
    console.log('提取到的视频信息:', { title, description });

    // 假设要发送到背景脚本
    // chrome.runtime.sendMessage({ 
    //     type: 'VIDEO_INFO_EXTRACTED', 
    //     payload: { title, description } 
    // });
}

// 确保DOM完全加载后再执行提取操作
// 对于动态加载的页面，可能需要更复杂的监听机制
window.addEventListener('load', () => {
    // 简单的延迟，确保页面元素渲染完成
    setTimeout(extractVideoInfo, 1000); 
});

// 或者，如果页面是SPA，可能需要监听URL变化或DOM变化
// 例如，使用MutationObserver来监听特定元素的出现
const observer = new MutationObserver((mutationsList, observer) => {
    const titleElement = document.querySelector('#below #title h1');
    if (titleElement && titleElement.innerText.trim() !== '') {
        extractVideoInfo();
        observer.disconnect(); // 提取到信息后停止观察
    }
});

// 开始观察文档body的变化
observer.observe(document.body, { childList: true, subtree: true });