请求开发Chrome扩展：URL变更时自动刷新YouTube页面一次

嘿，我来帮你搞定这个问题！你的核心需求是当YouTube的URL变更（比如点击视频、搜索）时自动刷新页面，但当前代码没生效的原因主要是YouTube现在是单页应用（SPA）——大部分导航用的是HTML5 History API的pushState/replaceState，而不是你监听的hashchange事件。只有URL哈希（#后面的部分）变化时才会触发hashchange，但点击视频、搜索这些操作是修改URL的路径部分，自然不会触发它。

下面是具体的修复方案：

1. 精简并修正manifest.json #

你之前加了很多冗余权限，其实只需要保留必要的即可，这样更安全也符合扩展规范：

{
  "name": "Youtube Refresh",
  "version": "1.0",
  "description": "Auto-refresh YouTube when URL changes",
  "permissions": ["tabs", "webNavigation"],
  "content_scripts": [
    {
      "matches": ["*://www.youtube.com/*"],
      "js": ["contentscript.js"],
      "run_at": "document_start"
    }
  ],
  "manifest_version": 2
}

注：如果你的Chrome版本比较新，建议后续迁移到Manifest V3（Chrome 88+支持），不过先按你当前的V2版本完成修复。

2. 重写contentscript.js监听路由变化 #

我们需要监听History API的变化，同时处理后退/前进按钮的popstate事件，还要避免无限刷新循环：

// 重写History API的pushState和replaceState，触发自定义路由变化事件
(function() {
  const originalPushState = history.pushState;
  const originalReplaceState = history.replaceState;

  history.pushState = function(...args) {
    originalPushState.apply(this, args);
    window.dispatchEvent(new Event('youtubeRouteChange'));
  };

  history.replaceState = function(...args) {
    originalReplaceState.apply(this, args);
    window.dispatchEvent(new Event('youtubeRouteChange'));
  };
})();

// 监听所有可能的URL变化场景
window.addEventListener('youtubeRouteChange', handleUrlUpdate);
window.addEventListener('popstate', handleUrlUpdate);
// 初始加载也可以触发一次（可选）
window.addEventListener('load', handleUrlUpdate);

function handleUrlUpdate() {
  // 用localStorage标记，避免刷新后无限循环
  const justRefreshed = localStorage.getItem('youtubeJustRefreshed');
  if (justRefreshed) {
    localStorage.removeItem('youtubeJustRefreshed');
    return;
  }

  // 标记即将刷新，然后执行刷新
  localStorage.setItem('youtubeJustRefreshed', 'true');
  window.location.reload();
}

关键说明 #

• 为什么要重写pushState/replaceState：这两个方法修改URL时不会触发任何原生事件，所以我们需要手动触发自定义事件来捕获这些导航行为。
• 避免无限循环：刷新页面后会再次触发路由变化事件，用localStorage做一个临时标记，刷新后立即清除，就能防止重复刷新。
• 覆盖所有导航场景：同时监听自定义路由事件、popstate（对应浏览器后退/前进）和初始加载，确保所有URL变化都能被捕获。

现在把修改后的文件替换掉原来的，重新加载Chrome扩展（在扩展管理页点击"重新加载"按钮），测试点击视频、搜索等操作，应该就能正常触发页面刷新了！

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