Web扩展：如何在页面脚本执行前注入脚本避免模态框意外关闭？

核心方案：在页面脚本执行前注入捕获阶段监听器 #

要实现目标，需借助Chrome扩展的chrome.scripting与webNavigationAPI，确保脚本在页面所有资源加载前注入并运行，抢占事件处理的优先级。

具体实现步骤 #

1. 配置扩展权限 #

在manifest.json中添加必要权限，确保能监听页面导航并注入脚本：

{
  "permissions": ["scripting", "webNavigation", "<all_urls>"],
  "host_permissions": ["<all_urls>"]
}

2. 服务工作线程中监听页面加载事件 #

在service-worker.js中监听页面导航的早期阶段，注入脚本到页面主世界而非扩展隔离环境：

chrome.webNavigation.onCommitted.addListener(async (details) => {
  // 仅处理主框架页面
  if (details.frameId !== 0) return;
  try {
    await chrome.scripting.executeScript({
      target: { tabId: details.tabId },
      func: injectCaptureListeners,
      world: 'MAIN', // 注入到页面主世界，突破隔离环境限制
      runAt: 'document_start' // 确保在页面脚本执行前运行
    });
  } catch (err) {
    console.error('脚本注入失败:', err);
  }
});

// 注入的捕获监听器逻辑
function injectCaptureListeners() {
  // 监听点击事件的捕获阶段
  document.addEventListener('click', (e) => {
    // 判断事件目标是否属于扩展UI范围
    const isOurUI = e.target.closest('[data-extension-ui]');
    if (isOurUI) {
      e.stopImmediatePropagation(); // 阻止后续页面监听器触发
    }
  }, true); // true开启捕获阶段监听

  // 处理notion类网站的按键事件
  document.addEventListener('keydown', (e) => {
    const isOurUI = e.target.closest('[data-extension-ui]');
    if (isOurUI) {
      e.stopImmediatePropagation();
    }
  }, true);
}

3. 标记扩展UI元素 #

在内容脚本创建UI时，给根元素添加自定义属性，方便监听器识别：

// 内容脚本中创建扩展UI
const extensionUI = document.createElement('div');
extensionUI.dataset.extensionUi = 'true';
// 添加UI内容并挂载到DOM
document.body.appendChild(extensionUI);

为什么之前的方法无效？ #

• 直接插入<script>标签：受页面内容安全策略（CSP）限制，且扩展隔离环境的脚本无法干预页面主世界的事件流。
• document_start的内容脚本：虽运行时机早，但隔离环境中的监听器与页面主世界监听器属于不同上下文，无法阻止页面监听器触发。

测试验证 #

针对你的场景：

• 在repl.it打开“Create Repl”模态框后，操作扩展UI，捕获阶段监听器会优先触发，阻止页面的外部点击处理器，模态框不会关闭。
• 在notion.so中操作扩展UI时，按键事件会被拦截，避免触发页面的按键逻辑。

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