Chrome扩展：GitHub Issue注入元素丢失，求优雅DOM监听及CORB排查方案

我完全懂你这个痛点——用轮询来维护注入的导航栏确实不够优雅，还容易浪费性能。咱们来一步步优化方案，用MutationObserver精准响应DOM变更，彻底摆脱轮询的困扰。

核心问题拆解 #

GitHub的Issue页面用了动态DOM局部更新（类似React这类框架的渲染逻辑），用户点表情、加载评论这类交互会触发页面局部替换DOM节点，直接把你之前注入的元素给“冲没了”。你之前的Observer监听了整个body，范围太广会导致频繁触发回调，甚至重复添加内容；同时也没做“元素是否已存在”的判断，很容易造成界面冗余。

另外你提到的隔离世界：其实内容脚本里的MutationObserver是可以正常监听共享DOM变更的，之前的问题不在隔离世界本身，而是监听策略和注入逻辑的问题。至于CORB，它是拦截跨源请求的安全机制，和你DOM元素丢失的问题完全无关，可以不用考虑它。

优化后的解决方案 #

下面是调整后的代码，我会标注关键修改点：

修改后的addReactionsNav.js

const URL = window.location.origin + window.location.pathname + window.location.search
let header = document.querySelector('#partial-discussion-sidebar')
if (!header) return; // 确保目标容器存在再执行后续逻辑
header.style = `position: relative;height: 100%;`
let wrapper = getWrapper()

// 1. 缩小监听范围到目标容器，减少不必要的触发
const targetNode = document.querySelector('#partial-discussion-sidebar');
if (!targetNode) return;

// 2. 优化Observer配置：只监听子节点变化和子树，无需监听属性变更
const config = { childList: true, subtree: true };

// 3. 改进Observer回调：精准判断是否需要重新注入
const observer = new MutationObserver((mutations) => {
  const shouldUpdate = mutations.some(mutation => {
    // 只在有节点添加/移除，或者wrapper被意外移除时触发更新
    return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0 || 
           wrapper.parentElement !== header;
  });
  
  if (shouldUpdate) {
    addReactionNav();
  }
});

observer.observe(targetNode, config)

function getWrapper() {
  // 先检查是否已有wrapper，避免重复创建
  let existingWrapper = header.querySelector('.reaction-nav-wrapper');
  if (existingWrapper) {
    existingWrapper.innerHTML = ''; // 清空已有内容准备更新
    return existingWrapper;
  }
  
  const wrapper = header.appendChild(document.createElement('div'));
  wrapper.className = 'reaction-nav-wrapper'; // 给wrapper加类名，方便后续查找
  wrapper.style = `
    position:sticky;
    position: -webkit-sticky;
    top:10px;
    margin-bottom: 16px; // 增加间距，和原生内容区分开
  `;
  return wrapper;
}

function addReactionNav() {
  // 先清空wrapper，避免重复添加链接
  wrapper.innerHTML = '';

  const title = document.createElement('div');
  title.style = `font-weight: bold; margin-bottom: 8px;`;
  title.appendChild(document.createTextNode('Reactions'));
  wrapper.appendChild(title);

  // 抓取所有reaction节点
  const reactionsNodes = document.querySelectorAll(`
    [alias="+1"].mr-1,
    [alias="rocket"].mr-1,
    [alias="tada"].mr-1,
    [alias="heart"].mr-1,
    [alias="smile"].mr-1,
    [alias="thinking_face"].mr-1,
    [alias="-1"].mr-1,
    [alias="eyes"].mr-1
  `);

  const reactionsNodesParents = [
    ...new Set(
      Array.from(reactionsNodes).map(node => node.parentElement.parentElement)
    ),
  ];

  reactionsNodesParents.forEach(node => {
    const a = document.createElement('a');
    const linkText = document.createTextNode(node.innerText);
    a.appendChild(linkText);
    a.title = node.innerText;
    
    let id = null;
    let currentNode = node; // 用currentNode代替原node，避免污染循环变量
    while (id == null && currentNode != null) {
      if (currentNode.tagName === 'A' && currentNode.name) {
        id = currentNode.name;
        break;
      }
      if (currentNode.id) {
        id = currentNode.id;
        break;
      }
      currentNode = currentNode.parentNode;
    }
    
    if (id) { // 确保拿到id再创建链接，避免无效链接
      const postURL = URL + '#' + id;
      a.href = postURL;
      a.style = `display:block; padding: 4px 0;`;
      wrapper.appendChild(a);
    }
  });
}

// 页面加载完成后先初始化一次
addReactionNav();

修改后的manifest.json（可选，建议升级到V3）

{
  "manifest_version": 3, // 升级到V3，符合现代Chrome扩展规范
  "name": "Github Issue Reactions",
  "version": "1.1",
  "description": "List a link of reactions on a github issue page",
  "content_scripts": [
    {
      "matches": ["*://*.github.com/*/issues/*"],
      "js": ["addReactionsNav.js"],
      "run_at": "document_idle" // 用document_idle比document_end更稳妥，确保页面完全加载
    }
  ]
}

关键优化点说明 #

1. 缩小监听范围：从监听整个body改成监听#partial-discussion-sidebar，只关注我们关心的区域变化，减少Observer的触发次数，提升性能。
2. 避免重复注入：给wrapper添加类名reaction-nav-wrapper，每次创建前先检查是否存在，存在就清空内容而非重新创建；同时在addReactionNav开头清空wrapper，防止重复添加链接。
3. 精准触发更新：在Observer回调中判断变更是否影响我们的区域，只有当有节点添加/移除或者wrapper被意外移除时才更新，避免无意义的重复执行。
4. 代码健壮性：增加节点存在性检查，避免页面未加载完成时执行出错；用currentNode代替循环变量node，防止变量污染；确保拿到id再创建链接，避免无效跳转。
5. 升级Manifest V3：虽然不是必须，但V3是Chrome扩展的未来趋势，性能和安全性更好，权限管理也更清晰。

这样调整后，你的导航栏会在DOM发生相关变更时自动更新，不需要轮询，也不会再出现元素丢失或重复添加的问题。

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