Chrome扩展Manifest V3如何在指定URL的错误页面触发警报提示

Chrome内置的chrome-error://开头的错误页面属于受保护的特权页面，第三方扩展无法直接向这类页面注入脚本，即便你在host_permissions中添加chrome-error://*也会被Chrome的安全策略拦截，这是官方设计的权限限制，没有直接绕过的方法。

你可以从两种实现思路里选符合你需求的：

方案1：桌面通知提示 #

不需要修改当前错误页面，触发条件满足时直接推送系统级桌面通知，实现成本最低。

1. 先在manifest.json中新增notifications权限，你的现有其他权限保留即可。
2. 把原来的注入脚本逻辑替换为通知逻辑：

// background.js 代码
chrome.webNavigation.onErrorOccurred.addListener(details => {
  if (
    details.error === "net::ERR_BLOCKED_BY_CLIENT" &&
    details.url.includes("ycombinator.com")
  ) {
    chrome.notifications.create({
      type: "basic",
      iconUrl: "icon.png", // 替换为你的扩展图标路径
      title: "访问拦截提示",
      message: "该网站已被临时拦截"
    })
  }
})

方案2：跳转自定义错误页 #

要实现和页面内alert一致的效果，可以在触发错误时把当前标签页重定向到扩展自带的自定义错误页，你可以在自定义页面里自由加提示、展示原错误信息。

1. 调整manifest.json配置，新增web_accessible_resources声明自定义页面可被访问：

// manifest.json 相关配置片段
{
  "manifest_version": 3,
  "permissions": ["webNavigation", "tabs"],
  "host_permissions": ["*://*.ycombinator.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "web_accessible_resources": [
    {
      "resources": ["error.html"],
      "matches": ["<all_urls>"]
    }
  ]
}

2. 修改background.js逻辑，触发条件满足时跳转自定义页面：

chrome.webNavigation.onErrorOccurred.addListener(details => {
  if (
    details.error === "net::ERR_BLOCKED_BY_CLIENT" &&
    details.url.includes("ycombinator.com")
  ) {
    // 把原访问地址和错误信息作为参数传给自定义页面
    const targetUrl = chrome.runtime.getURL(`error.html?origin=${encodeURIComponent(details.url)}`)
    chrome.tabs.update(details.tabId, { url: targetUrl })
  }
})

3. 新建error.html作为自定义错误页：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>访问被拦截</title>
</head>
<body>
  <h2>网站访问已被临时拦截</h2>
  <p>原访问地址：<span id="origin"></span></p>
  <script>
    const params = new URLSearchParams(location.search)
    document.getElementById('origin').textContent = decodeURIComponent(params.get('origin'))
    // 触发你需要的alert提示
    alert('This website is blocked temporarily')
  </script>
</body>
</html>

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