Chrome扩展Manifest V3：如何用declarativeNetRequest重定向CSS请求且不打开文件？

完全可行，你遇到的CSS以纯文本打开的问题，核心原因是扩展资源未配置外部访问权限或重定向规则的匹配条件不精准，导致浏览器无法识别该资源为样式表。以下是具体实现步骤：

1. 配置Manifest.json核心权限与资源访问 #

首先确保你的Manifest V3配置包含必要权限，并允许目标网站访问扩展内的CSS文件：

{
  "manifest_version": 3,
  "name": "X网站深色模式",
  "version": "1.0",
  "permissions": ["declarativeNetRequest"],
  "host_permissions": ["https://x.com/*"], // 替换为网站X的实际域名
  "web_accessible_resources": [
    {
      "resources": ["dark-mode.css"], // 你的扩展内CSS文件名
      "matches": ["https://x.com/*"] // 仅允许网站X访问该资源
    }
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "dark_mode_redirect",
        "enabled": true,
        "path": "rules.json" // 重定向规则文件路径
      }
    ]
  }
}

• web_accessible_resources是关键：扩展内资源默认禁止外部网站访问，必须显式声明允许网站X访问你的CSS文件，否则浏览器会将资源当作不可识别的纯文本处理。

2. 编写重定向规则文件（rules.json） #

创建rules.json文件，精准匹配网站X向网站Y发起的CSS请求，并将其重定向到扩展内的CSS：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "redirect",
      "redirect": {
        "extension_path": "/dark-mode.css" // 扩展内CSS的相对路径
      }
    },
    "condition": {
      "urlFilter": "https://y.com/path/to/original.css", // 替换为网站Y的原CSS URL
      "initiator": "https://x.com/*", // 限定仅网站X发起的请求生效
      "resourceTypes": ["stylesheet"] // 仅匹配样式表类型的请求，避免误重定向
    }
  }
]

• resourceTypes: ["stylesheet"]确保只有样式表请求被重定向，避免其他类型请求（如脚本、图片）被错误处理，这也是解决纯文本问题的关键之一。
• urlFilter需精准匹配原CSS的完整URL，支持通配符（如https://y.com/*/*.css）批量匹配同类型资源。

3. 验证与调试 #

• 加载扩展后，打开网站X，通过Chrome开发者工具的「网络」面板查看原CSS请求的状态：若状态码为307（内部重定向），且响应的Content-Type为text/css，则说明配置成功。
• 若仍出现纯文本问题，检查：
  • web_accessible_resources的matches是否与网站X的域名完全匹配（注意HTTP/HTTPS的区别）；
  • 规则中的urlFilter是否准确匹配原CSS的请求URL；
  • 扩展内的dark-mode.css是否为标准CSS文件（无语法错误）。

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