Chrome扩展declarativeNetRequest规则：YT Shorts点击跳转失效求助

开发Chrome扩展实现将youtube.com/shorts/...重定向到youtube.com/watch?v=...，但存在以下问题：

• 新标签页打开链接、手动输入URL时重定向正常
• 从YouTube首页点击Shorts视频链接时，无法触发重定向
• 刷新页面后重定向生效

当前配置文件如下：

rules.json #

[
    {
      "id": 1,
      "priority": 1,
      "action": { "type": "redirect", "redirect": { "regexSubstitution":"https://youtube.com/watch?v=\\1" } },
      "condition": { "regexFilter": "^.*youtube\\.com/shorts/(.*)", "resourceTypes": ["main_frame"] }
    }
]

manifest.json #

{
    "manifest_version": 3,
    "name": "No Shorts",
    "version": "0.5",
    "description": "Play YT shorts as regular videos instead of in a separate player",
    "action": {
        "default_icon": "images/no-shorts-ico.png"
    },
    "declarative_net_request": {
        "rule_resources": [{
          "id": "ruleset_1",
          "enabled": true,
          "path": "rules.json"
        }]
      },
    "icons":{
        "16": "images/16.png",
        "48": "images/48.png",
        "128": "images/128.png"
    },
    "permissions":[ "declarativeNetRequest"],
    "host_permissions":["*://*.youtube.com/*"]
}

问题原因 #

你的猜测正确：YouTube采用客户端侧导航（SPA路由），首页点击Shorts链接时，页面通过pushState或replaceState更新URL，不会发起新的main_frame网络请求，因此declarativeNetRequest的重定向规则不会触发。只有刷新页面、新标签打开或手动输入URL时，才会触发网络请求匹配规则。

修复方案 #

需要添加**内容脚本（Content Script）**监听页面的路由变化，主动检测Shorts URL并执行重定向。

步骤1：修改manifest.json，添加内容脚本配置 #

在manifest.json中新增content_scripts字段：

{
    "manifest_version": 3,
    "name": "No Shorts",
    "version": "0.5",
    "description": "Play YT shorts as regular videos instead of in a separate player",
    "action": {
        "default_icon": "images/no-shorts-ico.png"
    },
    "declarative_net_request": {
        "rule_resources": [{
          "id": "ruleset_1",
          "enabled": true,
          "path": "rules.json"
        }]
      },
    "icons":{
        "16": "images/16.png",
        "48": "images/48.png",
        "128": "images/128.png"
    },
    "permissions":[ "declarativeNetRequest"],
    "host_permissions":["*://*.youtube.com/*"],
    // 新增内容脚本配置
    "content_scripts": [
        {
            "matches": ["*://*.youtube.com/*"],
            "js": ["content.js"],
            "run_at": "document_start"
        }
    ]
}

步骤2：创建content.js脚本 #

在扩展根目录新建content.js文件，添加以下代码：

// 检测并处理Shorts URL的函数
function handleShortsRedirect() {
    const currentUrl = window.location.href;
    const shortsRegex = /youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/;
    const match = currentUrl.match(shortsRegex);
    
    if (match && !currentUrl.includes('/watch?v=')) {
        const videoId = match[1];
        const watchUrl = `https://www.youtube.com/watch?v=${videoId}`;
        // 用replaceState避免重复触发popstate事件
        window.history.replaceState(null, '', watchUrl);
        // 强制页面加载新URL
        window.location.href = watchUrl;
    }
}

// 初始加载时检测一次
handleShortsRedirect();

// 监听popstate事件（浏览器前进后退触发）
window.addEventListener('popstate', handleShortsRedirect);

// 监听YouTube自定义导航事件（站内点击链接触发）
document.addEventListener('yt-navigate-finish', handleShortsRedirect);

代码说明 #

1. handleShortsRedirect：检测当前URL是否为Shorts链接，若是则构造对应的watch URL并执行重定向，用replaceState避免循环触发事件。
2. 初始加载时执行一次检测，确保页面刚打开时的Shorts URL被处理。
3. 监听popstate事件：处理浏览器前进/后退导致的路由变化。
4. 监听yt-navigate-finish事件：YouTube站内导航完成时触发的自定义事件，覆盖首页点击Shorts链接的场景。

验证 #

重新加载扩展后，从YouTube首页点击Shorts链接，即可自动重定向到普通watch页面，无需刷新。

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