Chrome扩展Shadow DOM如何阻止触发外部页面JS事件？

以下是几种可行的解决方案，针对你遇到的按键事件被原生页面脚本拦截的问题：

1. 捕获阶段拦截全局按键事件 #

原生页面的按键事件通常在冒泡阶段触发，我们可以在捕获阶段提前拦截事件，阻止其传递到页面脚本。当你的Shadow DOM搜索栏激活时，给document添加捕获阶段的监听器：

// 标记搜索栏是否处于激活状态
let isSearchPanelActive = false;

// 激活搜索栏时绑定监听器
function showSearchPanel() {
  isSearchPanelActive = true;
  document.addEventListener('keydown', handleKeyDown, true);
  // 渲染你的Shadow DOM搜索栏逻辑...
}

// 关闭搜索栏时移除监听器
function hideSearchPanel() {
  isSearchPanelActive = false;
  document.removeEventListener('keydown', handleKeyDown, true);
  // 销毁搜索栏逻辑...
}

function handleKeyDown(e) {
  if (!isSearchPanelActive) return;
  
  // 阻止事件传递到原生页面脚本
  e.stopPropagation();
  // 若需要阻止浏览器默认行为（如页面滚动、字符输入到其他元素），可添加下面一行
  // e.preventDefault();
  
  // 处理你的搜索栏按键逻辑（比如输入字符、快捷键导航等）
}

2. 在Shadow DOM内部阻止事件冒泡 #

如果只需要拦截搜索栏获得焦点时的按键事件，可以直接在搜索输入框上绑定监听器，阻止事件向上冒泡到主DOM树：

// 假设shadowRoot是你的Shadow DOM根节点
const searchInput = shadowRoot.querySelector('#spotlight-search-input');

searchInput.addEventListener('keydown', (e) => {
  // 阻止事件冒泡到Shadow DOM外部的主页面
  e.stopPropagation();
  
  // 这里处理搜索输入的按键逻辑
});

这种方式更精准，仅拦截搜索栏处于焦点时的按键，不会干扰页面其他区域的正常操作。

3. 通过焦点位置动态判断拦截 #

通过检查当前焦点元素是否属于你的Shadow DOM，来决定是否拦截事件：

// 假设yourExtensionElement是挂载Shadow DOM的扩展元素
const yourExtensionElement = document.querySelector('#your-extension-container');

document.addEventListener('keydown', (e) => {
  // 判断当前触发事件的元素是否在你的Shadow DOM内部
  const targetRoot = e.target.getRootNode();
  const isInMyShadow = targetRoot instanceof ShadowRoot && targetRoot.host === yourExtensionElement;
  
  if (isInMyShadow) {
    e.stopPropagation();
    // 按需阻止默认行为
  }
}, true);

注意事项 #

• 避免全局无差别拦截所有按键，确保只在你的搜索栏激活/获得焦点时才拦截事件，防止影响用户正常使用页面。
• 测试不同网站的事件绑定逻辑，确保拦截逻辑优先级高于原生页面的事件监听。
• 务必在搜索栏关闭时移除全局监听器，避免内存泄漏或残留影响。

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