Chrome扩展中jQuery自定义update事件无法触发的原因排查

核心原因 #

Chrome扩展的内容脚本运行在独立的隔离环境中，和页面自身的JavaScript环境完全分隔：

• 内容脚本里加载的jQuery是独立实例，和页面原有的jQuery并非同一个对象
• 页面中用$("#table").trigger("update")触发的是页面自身jQuery实例上的自定义事件，这类事件不会通过原生DOM树传播，内容脚本里的jQuery实例根本监听不到这个事件

而click事件能正常工作，是因为它属于原生DOM事件，会在DOM元素上传播，不管是页面环境还是内容脚本的jQuery，都能通过DOM元素捕获到这个原生事件。

解决办法 #

方法1：将监听代码注入到页面环境 #

通过创建<script>标签，把监听代码直接注入到页面的JS环境中，共享页面的jQuery实例：

// 在你的扩展内容脚本中添加这段代码
const injectScript = document.createElement('script');
injectScript.textContent = `
  $("#table").on('update', function() {
    console.log('updated!');
  });
`;
document.body.appendChild(injectScript);
injectScript.remove(); // 注入后移除标签，避免污染DOM结构

方法2：改用原生自定义事件（需修改页面代码） #

如果允许修改页面的触发代码，把jQuery自定义事件替换为原生自定义事件，内容脚本就能直接监听：

• 页面代码替换为：

// 替代原有的 $("#table").trigger("update");
document.querySelector("#table").dispatchEvent(new CustomEvent('update'));

• 内容脚本里的监听代码可保留原样：

$("#table").on('update', function() {console.log('updated!');});

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