基于Chrome Extension(MV3)实现最小化YouTube窗口自动评论的问题

YouTube评论区采用懒加载机制，只有当窗口处于可见状态且获得焦点时，才会加载评论相关DOM和资源。你当前创建的是minimized状态的panel窗口，浏览器判定其不可见，因此YouTube不会触发评论区加载逻辑。

1. 调整窗口创建策略：先激活窗口再最小化 #

先创建可见且聚焦的窗口，确保页面能完整加载资源，之后再将窗口最小化：

const win = await chrome.windows.create({
    url,
    focused: true, // 强制窗口获得焦点
    type: "panel",
    state: 'normal' // 初始为正常可见状态
});

// 等待页面及评论区加载完成后，再最小化窗口
setTimeout(async () => {
    await chrome.windows.update(win.id, { state: 'minimized' });
}, 5000); // 可根据网络情况调整等待时长

2. 替换嵌套setTimeout，改用可靠的元素等待逻辑 #

嵌套定时器容易受页面加载速度影响，改用MutationObserver封装元素等待函数，确保操作仅在目标元素存在时执行：

// 工具函数：等待目标元素出现
function waitForElement(selector, timeout = 12000) {
    return new Promise((resolve, reject) => {
        const existingEl = document.querySelector(selector);
        if (existingEl) return resolve(existingEl);

        const observer = new MutationObserver(() => {
            const el = document.querySelector(selector);
            if (el) {
                observer.disconnect();
                resolve(el);
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => {
            observer.disconnect();
            reject(new Error(`元素 ${selector} 超时未出现`));
        }, timeout);
    });
}

// 异步执行评论插入逻辑
async function autoPostComment(commentContent) {
    try {
        // 等待评论区并滚动到位
        const commentSection = await waitForElement('[section-identifier="comment-item-section"]');
        commentSection.scrollIntoView({ behavior: 'auto', block: 'nearest' });

        // 点击评论输入框占位符
        const placeholder = await waitForElement('#placeholder-area');
        placeholder.click();

        // 粘贴评论内容
        const editableRoot = await waitForElement('ytd-commentbox #contenteditable-root');
        dispatchPaste(editableRoot, commentContent);

        // 点击发布按钮
        const publishBtn = await waitForElement('.yt-spec-button-shape-next--filled.yt-spec-button-shape-next--call-to-action');
        publishBtn.click();
    } catch (err) {
        console.error('自动评论失败:', err);
    }
}

// 页面加载完成后触发
window.addEventListener('load', () => {
    autoPostComment(comment_data);
});

3. 额外注意事项 #

• 权限配置：在manifest.json中确保申请了必要权限：

  "permissions": ["windows", "activeTab"],
  "host_permissions": ["https://www.youtube.com/*"]
  

• 反检测规避：频繁自动评论可能触发YouTube反机器人机制，建议在操作间添加随机延迟（如Math.random() * 2000 + 1000）
• 焦点强制验证：若仍存在问题，可在窗口创建后强制触发一次焦点事件，确保YouTube感知到窗口活跃

内容的提问来源于stack exchange，提问作者VickyPopovic