Chrome扩展拦截站点仅地址栏输入可跳转 点击外链跳转失败问题咨询

核心原因 #

• 未在manifest.json中声明chatbot.html为可外部访问的资源。直接在地址栏输入URL触发的是顶级框架直接导航，Chrome对这类场景的扩展资源访问限制较松；但从谷歌搜索、邮件等第三方站点点击跳转属于跨上下文导航，Chrome会校验扩展资源的访问权限，未声明的资源会被直接拦截，抛出ERR_BLOCKED_BY_CLIENT错误。
• 拦截逻辑覆盖了所有资源类型（样式、脚本、图片等子资源），子资源被强制跳转到HTML页面会触发资源类型不匹配的报错，你控制台出现的crbug/1173575相关报错就是这个原因导致的。
• localStorage存取数组的方式不规范，直接传入数组会被隐式转为逗号拼接的字符串，后续如果拦截域名包含逗号会出现解析错误。

修复步骤 #

1. 修改manifest.json，添加web_accessible_resources配置，允许外部站点访问跳转页面：

// Manifest V2 配置示例
"web_accessible_resources": [
  "chatbot.html"
]

// Manifest V3 配置示例
"web_accessible_resources": [
  {
    "resources": ["chatbot.html"],
    "matches": ["<all_urls>"]
  }
]

2. 调整background脚本的拦截逻辑，只拦截顶级页面导航请求，同时修正数据存取逻辑和扩展资源获取方法：

// 修正数组的序列化存取逻辑
localStorage.setItem('blocked_sites', JSON.stringify(["*://www.wikipedia.org/*", "*://www.change.org/*", "*://en.wikipedia.org/*"])); 
const urls = JSON.parse(localStorage.getItem('blocked_sites'));

chrome.webRequest.onBeforeRequest.addListener(
function(intercept) {
    console.log(intercept.url);
    localStorage.setItem('denied_access_url', intercept.url);
    // 用兼容性更好的chrome.runtime.getURL代替已废弃的chrome.extension.getURL
    return {redirectUrl: chrome.runtime.getURL("chatbot.html")};
},
{
    urls,
    // 仅拦截顶级页面导航，避免拦截子资源导致的报错
    types: ["main_frame"]
},
["blocking"]
);

3. 如果你使用的是Manifest V3版本，建议替换webRequest的阻塞式监听为官方推荐的declarativeNetRequestAPI实现拦截逻辑，性能和兼容性更好。

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