Chrome扩展Manifest V3：如何告知用户页面被自身扩展拦截？

这是最直观的告知方式，用户打开被拦截页面时会直接看到你的自定义提示，完全替代浏览器默认的ERR_BLOCKED_BY_CLIENT错误页。

实现步骤： #

1. 修改拦截规则的Action类型：把原规则里的"type": "block"替换为"type": "redirect"，指定扩展内的提示页面路径：

chrome.declarativeNetRequest.updateDynamicRules({
  addRules: [
    {
      "id": 1,
      "priority": 1,
      "action": {
        "type": "redirect",
        "redirect": {"extensionPath": "/blocked-notification.html"}
      },
      "condition": {
        "urlFilter": "*://*/*lala.js",
        "resourceTypes": ["main_frame"]
      }
    }
  ]
})

2. 创建自定义提示页面（例如blocked-notification.html）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面被拦截</title>
  <style>
    body { text-align: center; padding: 50px; font-family: system-ui, Arial; }
    h1 { color: #dc3545; }
    .message { font-size: 1.2em; margin: 20px 0; max-width: 600px; margin-left: auto; margin-right: auto; }
    .btn-group { margin-top: 30px; }
    .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin: 0 10px; }
    .allow-btn { background: #0d6efd; color: white; }
    .settings-btn { background: #6c757d; color: white; }
  </style>
</head>
<body>
  <h1>⚠️ 页面已被[你的扩展名称]拦截</h1>
  <div class="message">该页面触发了我们的拦截规则，为了你的安全/体验，已阻止其加载。</div>
  <div class="btn-group">
    <button class="btn allow-btn" id="allowOnce">临时放行当前页面</button>
    <button class="btn settings-btn" id="openSettings">查看拦截规则</button>
  </div>
  <script>
    // 临时放行逻辑
    document.getElementById('allowOnce').addEventListener('click', () => {
      chrome.runtime.sendMessage({action: "allowOnce", url: window.location.href});
    });
    // 打开扩展设置页
    document.getElementById('openSettings').addEventListener('click', () => {
      chrome.runtime.openOptionsPage();
    });
  </script>
</body>
</html>

3. 后台处理临时放行（可选）：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "allowOnce") {
    // 添加高优先级的临时允许规则
    chrome.declarativeNetRequest.updateDynamicRules({
      addRules: [
        {
          "id": 999,
          "priority": 10, // 优先级高于拦截规则
          "action": {"type": "allow"},
          "condition": {
            "urlFilter": message.url,
            "resourceTypes": ["main_frame"]
          }
        }
      ]
    });
    // 跳转回原页面
    window.open(message.url, '_self');
    // 1小时后自动移除临时规则
    setTimeout(() => {
      chrome.declarativeNetRequest.updateDynamicRules({
        removeRuleIds: [999]
      });
    }, 3600000);
  }
});

优点： #

• 用户无需额外操作就能看到明确的拦截原因，体验流畅
• 可自定义页面样式、添加交互功能（临时放行、查看规则）
• 完全替代浏览器默认错误页，强化扩展的品牌感知

如果不想替换默认错误页，可以在后台监听拦截事件，触发桌面通知告知用户。

实现步骤： #

1. 添加通知权限：在manifest.json中声明"notifications"权限。
2. 监听拦截事件：结合chrome.webRequest（需声明webRequest和webRequestBlocking权限）监听匹配的请求：

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 匹配拦截规则的URL
    if (details.url.includes('lala.js') && details.resourceType === 'main_frame') {
      chrome.notifications.create({
        type: 'basic',
        iconUrl: '/icons/icon-48.png',
        title: '页面被拦截',
        message: `[你的扩展名称]已阻止加载页面：${details.url}`
      });
      return {cancel: true}; // 执行拦截
    }
  },
  {urls: ["*://*/*lala.js"], types: ["main_frame"]},
  ["blocking"]
);

优点： #

• 无需额外页面开发，实现简单
• 不干扰浏览器默认错误页展示

缺点： #

• 通知可能被用户忽略或关闭，无法确保用户看到提示
• 信息展示有限，无法提供复杂交互

在扩展图标上显示拦截计数，用户点击图标时可查看详细拦截记录：

1. 更新Badge：拦截触发时更新图标上的数字：

let blockCount = 0;
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (details.url.includes('lala.js') && details.resourceType === 'main_frame') {
      blockCount++;
      chrome.action.setBadgeText({text: blockCount.toString()});
      chrome.action.setBadgeBackgroundColor({color: '#dc3545'});
      return {cancel: true};
    }
  },
  {urls: ["*://*/*lala.js"], types: ["main_frame"]},
  ["blocking"]
);

2. 弹出页展示拦截记录：在扩展弹出页（popup.html）中列出所有被拦截的页面，清晰告知用户拦截情况。

优点： #

• 低调提示，不打扰用户当前操作
• 可集中展示所有拦截历史

缺点： #

• 属于被动提示，用户需主动点击图标才能查看信息

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