优化Chrome谷歌搜索结果隐藏扩展：安全选元素规避页面变动影响

针对你遇到的谷歌页面结构变动导致选择器失效的问题，这里提供几个更鲁棒的实现思路，核心是从目标链接反向定位结果容器，而非依赖易变的类名或自定义属性：

1. 基于链接反向定位搜索结果条目 #

谷歌搜索结果的核心是跳转链接，无论页面结构怎么改，每个结果条目必然包含指向目标站点的链接。我们可以先筛选出需要过滤的链接，再通过Element.closest()向上找到对应的完整结果容器。这种方式不依赖任何谷歌自定义的类名或属性，稳定性大幅提升。

2. 缩小MutationObserver监听范围 #

原代码监听整个document.body，不仅性能浪费，还容易触发不必要的处理。改为先定位搜索结果的根容器，只监听该容器的变化，更高效且精准。

3. 重构"更多问题"区块的过滤逻辑 #

同样采用反向定位的思路，从问题卡片中的链接或关联文本找到对应的条目容器，避免依赖jsname这类易变属性。

修改后的完整代码 #

const rules = {
  "https://www.google.com/search": filterGoogleSearch,
}

const sitesToFilter = ["reddit", "wikipedia"]

function filterGoogleSearch() {
  // 定位搜索结果根容器（多特征备选，避免单一特征失效）
  const getSearchRootContainer = () => {
    return document.querySelector('div[data-srp]') || 
           document.querySelector('main[role="main"]') || 
           document.body;
  };

  const filterResults = () => {
    // 筛选所有符合过滤条件的外部链接
    const allLinks = document.querySelectorAll('a[href^="http"]');
    const filteredLinks = Array.from(allLinks).filter(link => shouldFilterLink(link.href));

    filteredLinks.forEach(link => {
      // 反向定位完整搜索结果条目：优先用语义化属性，备选特征兜底
      const resultItem = link.closest('[role="article"]') || 
                        link.closest('div:has(h3)') || 
                        link.closest('div[data-ved]');
      
      if (resultItem) {
        (resultItem as HTMLElement).style.display = 'none';
        console.log(`Filtered result containing: ${link.href}`);
      }
    });

    filterMoreToAskSection();
  };

  const filterMoreToAskSection = () => {
    // 定位"更多问题"区块内的所有问题链接
    const questionCards = document.querySelectorAll('div:has(> a[href^="/search?q="])');
    questionCards.forEach(card => {
      const cite = card.querySelector('cite');
      if (cite && shouldFilterLink(cite.textContent)) {
        (card as HTMLElement).style.display = 'none';
      }
    });
  };

  // 初始化监听逻辑
  const searchRoot = getSearchRootContainer();
  const observer = new MutationObserver(filterResults);
  observer.observe(searchRoot, { childList: true, subtree: true });
  
  // 页面首次加载时执行过滤
  filterResults();
}

function shouldFilterLink(url: string): boolean {
  if (!url) return false;

  try {
    const parsedUrl = new URL(url);
    const hostname = parsedUrl.hostname;

    for (const site of sitesToFilter) {
      if (hostname.includes(site)) {
        return true;
      }
    }
  } catch (error) {
    console.log(`Invalid URL: ${url}`);
  }
  return false;
}

// 匹配当前页面并执行对应逻辑
for (const url in rules) {
  if (document.URL.startsWith(url)) {
    rules[url]();
    break;
  }
}

关键优化点说明 #

• 反向定位逻辑：使用closest()结合语义化特征（如role="article"、包含h3标题）定位结果容器，这类特征比谷歌自定义的类名/属性更难随页面更新变动。
• 多备选定位方案：每个容器定位都提供多个备选特征，即使某一个特征失效，其他备选仍能保证功能正常。
• 精准监听范围：只监听搜索结果根容器的变化，减少不必要的回调触发，提升扩展性能。

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