Chrome扩展开发问题：Pinterest滚动加载广告无法拦截

问题根源 #

你的代码仅在页面初始加载时遍历一次DOM结构，而Pinterest通过滚动异步加载新内容，这些动态插入的DOM节点不会被原有逻辑处理。同时，链式调用parentElement的写法极度依赖固定的DOM层级，只要Pinterest调整页面结构，代码就会直接失效。

解决方案：监听DOM动态变化+健壮的元素定位 #

使用MutationObserver监听页面DOM的新增节点，对每个新插入的元素重新执行广告检测逻辑；同时用closest()方法替代链式parentElement，通过选择器向上定位广告容器，提升代码稳定性。

改进后的代码 #

// 初始化处理页面已有的广告
handlePromotedPins(document.body);

// 创建DOM变化监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增节点
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        handlePromotedPins(node);
      }
    });
  });
});

// 配置监听范围：监听body下所有子树的节点新增
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// 核心处理逻辑：定位并隐藏广告
function handlePromotedPins(element) {
  // 查找所有包含"Promoted by"文本的节点
  const targetTextNodes = findMatchingTextNodes(element, /Promoted by/gi);
  
  targetTextNodes.forEach(textNode => {
    // 替换广告标识文本
    textNode.textContent = textNode.textContent.replace(/Promoted by/gi, '***');
    
    // 用closest定位广告容器（需根据Pinterest实际DOM结构调整选择器）
    const adContainer = textNode.parentElement.closest('[data-test-id="pin"]') || 
                        textNode.parentElement.closest('.pinContainer');
    
    if (adContainer) {
      adContainer.classList.add('block');
    }
  });
}

// 递归查找符合条件的文本节点
function findMatchingTextNodes(element, regex) {
  let result = [];
  if (element.hasChildNodes()) {
    element.childNodes.forEach(child => {
      if (child.nodeType === Node.TEXT_NODE && regex.test(child.textContent)) {
        result.push(child);
      } else {
        result = result.concat(findMatchingTextNodes(child, regex));
      }
    });
  }
  return result;
}

关键说明 #

1. MutationObserver：实时捕获页面新增的DOM节点，确保滚动加载的新广告被及时处理
2. closest()方法：通过元素选择器向上查找最近的广告容器，避免DOM层级变化导致代码失效（你需要通过浏览器开发者工具查看Pinterest实际的Pin容器类名/属性，替换示例中的选择器）
3. 拆分逻辑：将文本节点查找和广告处理分离，代码更易维护和调试

额外注意 #

• 确保你的扩展CSS中包含.block { display: none; }样式，才能真正隐藏广告
• 可适当调整MutationObserver的监听范围（比如只监听Pin列表容器而非整个body），优化性能

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