不使用YouTube API的Chrome扩展如何跳转YouTube视频播放进度

Chrome 扩展的内容脚本运行在独立的「隔离世界」上下文，仅能访问页面的 DOM 树，无法访问页面自身 JavaScript 挂载在 DOM 元素上的自定义方法。seekTo 是 YouTube 自定义注入到 #movie_player 元素上的专属方法，属于页面上下文的私有内容，因此内容脚本直接调用会报方法不存在的错误。

注意：请确保你的扩展 manifest 中已经声明了 YouTube 站点的 host 权限："host_permissions": ["*://*.youtube.com/*"]，用到chrome.scripting能力时还需要额外声明scripting权限。

完全不需要调用 YouTube Player API for iframe Embeds，以下两种方法均可实现需求：

方法1：直接操作原生视频元素（最简便） #

直接调用 HTML5 原生视频元素的 currentTime 属性修改播放进度，该属性属于标准 DOM API，内容脚本可直接访问，无需处理上下文隔离问题：

function scrollVid(time) {
    const sec = parseInt(time);
    // 选取YouTube页面的主视频元素
    const video = document.querySelector('video.html5-main-video');
    if (video) {
        video.currentTime = sec;
    }
}

YouTube 播放器会自动监听视频元素的进度变化，同步更新进度条、播放状态等UI表现，无需额外处理。

方法2：注入代码到页面上下文调用seekTo #

如果需要用到 YouTube 播放器的其他专属方法，可以将执行逻辑注入到页面上下文执行，即可正常调用seekTo方法：

function scrollVid(time) {
    const sec = parseInt(time);
    const injectScript = document.createElement('script');
    // 写入要在页面上下文执行的逻辑
    injectScript.textContent = `
        const player = document.getElementById('movie_player');
        if (player?.seekTo) {
            player.seekTo(${sec}, true);
        }
    `;
    document.documentElement.appendChild(injectScript);
    // 执行完成后移除注入的脚本标签
    injectScript.remove();
}

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