Chrome扩展如何在页面加载前检测URL并展示全屏拦截页面

你提到的两种实现方式都是可行的，根据你的需求场景可以按需选择，优先推荐请求重定向到扩展内置页面的方案。

方案1：请求阶段直接重定向到扩展内置拦截页（推荐） #

完全匹配你预期的「用户输入URL→检测拦截→提前加载自定义页面」的逻辑，在网络请求层直接处理，不会加载原页面的任何资源。

实现步骤（Manifest V3版本） #

1. 配置manifest.json声明所需权限和资源

{
  "manifest_version": 3,
  "name": "站点拦截工具",
  "version": "1.0",
  "permissions": ["declarativeNetRequest", "declarativeNetRequestWithHostAccess"],
  "host_permissions": ["<all_urls>"],
  "web_accessible_resources": [{
    "resources": ["block.html"],
    "matches": ["<all_urls>"]
  }],
  "background": {
    "service_worker": "background.js"
  }
}

2. 在后台service worker中配置拦截规则，background.js示例代码：

// 预设拦截名单
const BLOCK_LIST = ["*.example.com/*", "*.forbidden-site.com/*"];

chrome.runtime.onInstalled.addListener(() => {
  const rules = BLOCK_LIST.map((pattern, index) => ({
    id: index + 1,
    priority: 1,
    action: {
      type: "redirect",
      redirect: { extensionPath: "/block.html" }
    },
    condition: {
      urlFilter: pattern,
      resourceTypes: ["main_frame"]
    }
  }));
  // 注册动态拦截规则
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: rules.map(rule => rule.id),
    addRules: rules
  });
});

3. 在扩展根目录下自行编写block.html作为全屏拦截页即可，样式和逻辑完全独立不受任何站点限制。

优势 #

• 无任何原页面内容泄露、闪烁问题，拦截响应速度最快
• 拦截页完全独立，不会被原页面的CSP、脚本规则限制或破坏
• 开发成本低，不需要处理和原页面的样式、脚本冲突

方案2：注入全屏元素覆盖原页面（仅特殊场景使用） #

如果需要保留原页面上下文、或者需要提供「暂时解除拦截回到原页面」的交互，可以选择该方案。

实现步骤 #

1. 在manifest.json中配置注入的内容脚本：

{
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start",
    "all_frames": false
  }]
}

2. content.js示例代码，在DOM解析前就注入全屏遮罩：

// 检测当前站点是否在拦截名单内
const currentUrl = window.location.href;
const isBlocked = [/* 你的拦截规则校验逻辑 */].some(rule => rule.test(currentUrl));

if (isBlocked) {
  // 生成全屏拦截遮罩
  const blockMask = document.createElement('div');
  blockMask.style.cssText = `
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui;
  `;
  blockMask.innerHTML = `<h1>该站点已被拦截，禁止访问</h1>`;
  document.documentElement.appendChild(blockMask);
  // 隐藏原页面内容防止闪烁
  document.documentElement.style.overflow = 'hidden';
}

劣势 #

• 可能被原页面的CSP规则限制注入脚本/样式的执行
• 极端场景下会出现原页面内容短暂闪烁的问题
• 注入的元素可能被原页面的脚本检测到并删除

选型建议 #

如果只是单纯做站点拦截，没有和原页面交互的需求，直接选择方案1即可，稳定性和性能都远高于方案2。

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