Chrome扩展开发求助：页面被浏览器拦截，无法实现自定义HTML重定向功能

嘿，我刚碰到过类似的坑，这就来帮你搞定！浏览器拦截你的重定向主要是因为Manifest V3的安全策略限制，加上配置里漏掉了关键的资源访问声明，咱们一步步来修复：

1. 为什么会被拦截？ #

Content Script运行在宿主页面的隔离环境中，扩展的内部资源（比如你的popup.html）默认是私有的，宿主页面（包括Content Script）无权直接访问这些资源，浏览器会直接拦截这种跨域式的跳转请求。另外你代码里的资源路径也有点小问题，得修正一下。

2. 第一步：在manifest.json中声明可访问资源 #

你需要添加web_accessible_resources字段，把要跳转的HTML文件标记为允许外部页面访问。修改后的manifest.json如下：

{
  "manifest_version": 3,
  "name": "Hello World!",
  "version": "0.1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/blocker.js"]
    }
  ],
  "permissions": ["storage", "activeTab", "tabs"],
  "action": {
    "default_popup": "src/html/popup.html"
  },
  "web_accessible_resources": [
    {
      "resources": ["src/html/popup.html"],
      "matches": ["<all_urls>"]
    }
  ]
}

• resources数组里填你要开放的文件路径，要和实际文件位置一致（你的popup.html在src/html/下，所以路径是src/html/popup.html）
• matches指定哪些页面可以访问这个资源，这里用<all_urls>对应你Content Script的匹配范围。

3. 第二步：修正blocker.js中的路径和跳转方式 #

原来的路径少了src/前缀，会导致找不到资源，同时用replace代替href可以避免留下历史记录（可选，但体验更流畅）：

// 获取正确的扩展资源URL
const targetPageUrl = chrome.runtime.getURL("src/html/popup.html");
// 执行重定向
window.location.replace(targetPageUrl);

额外注意点 #

• 如果你只是想替换页面内容而不是跳转，也可以考虑用Content Script直接注入HTML到宿主页面，这样就不需要重定向了，但这取决于你的实际需求。
• 你的popup.html本来是作为扩展图标的弹出窗口设计的，作为独立页面展示可能需要调整样式，比如去掉弹窗的窄宽度限制。

这样修改之后，浏览器就不会再拦截你的重定向请求了，赶紧试试吧！

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