开发Chrome扩展：如何实现无刷新加载YouTube视频页面？

要实现和YouTube原生一致的无刷新加载，核心是模拟原生视频链接的交互逻辑，而非直接修改window.location.href。以下是两种可靠的实现方式：

方法一：模拟原生视频链接的点击行为 #

YouTube的原生视频卡片链接是带有特定属性和类名的<a>标签，页面内置的事件监听器会捕获这类链接的点击并触发SPA路由。你可以构造一个完全匹配规范的链接元素，再触发它的点击事件：

const targetVideoId = 'm-ioG4KEVyc';
// 构造符合YouTube原生规范的视频链接
const videoLink = document.createElement('a');
videoLink.href = `https://www.youtube.com/watch?v=${targetVideoId}`;
// 添加原生链接的核心属性与类名
videoLink.setAttribute('data-video-id', targetVideoId);
videoLink.className = 'yt-simple-endpoint style-scope ytd-video-renderer';
// 触发点击，YouTube会自动以SPA模式加载视频
videoLink.click();

这种方式完全复刻了用户点击原生视频卡片的行为，能保证和原生逻辑完全一致，不会触发整页刷新。

方法二：结合History API触发内容更新 #

如果不想构造DOM元素，也可以通过修改浏览器历史记录，再触发YouTube内部的内容更新机制：

const targetUrl = 'https://www.youtube.com/watch?v=m-ioG4KEVyc';
// 更新历史记录，模拟路由变化
window.history.pushState({}, '', targetUrl);
// 触发YouTube监听的路由变更事件
window.dispatchEvent(new PopStateEvent('popstate'));

不过这种方法兼容性稍差，因为YouTube的内部事件监听逻辑可能随版本调整，优先推荐第一种方法。

注意：确保你的扩展脚本运行在YouTube的页面上下文（若使用隔离内容脚本，可通过chrome.scripting.executeScript注入到页面上下文），才能正常触发YouTube的内部事件监听器。

内容的提问来源于stack exchange，提问作者Alan Kałuża