如何开发可主动拦截页面指定元素加载的Chrome浏览器扩展？

最简实现方案 #

核心使用浏览器原生MutationObserverAPI监听DOM动态变化，相比定时轮询方案性能更高、响应更快，可做到元素插入DOM的同时就拦截删除，不会出现元素闪显1-2秒才消失的问题。

最小可运行示例（适配最新Chrome扩展V3规范） #

只需在同一个文件夹下创建3个文件即可运行：

1. manifest.json（扩展基础配置） #

{
  "manifest_version": 3,
  "name": "站点干扰元素屏蔽工具",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["*://*.youtube.com/*", "*://*.facebook.com/*"],
  "background": {
    "service_worker": "background.js"
  }
}

2. background.js（后台页面监听逻辑） #

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.active && tab.url) {
    // 仅在目标站点注入脚本
    if (tab.url.includes('youtube.com') || tab.url.includes('facebook.com')) {
      chrome.scripting.executeScript({
        target: { tabId: tabId },
        files: ['inject.js']
      });
    }
  }
});

3. inject.js（页面注入核心逻辑） #

(function() {
  // 屏蔽规则配置，可自行添加需要拦截的元素规则
  const blockRules = [
    // 对应需求的YouTube顶部logo屏蔽规则
    { type: 'class', value: 'style-scope ytd-topbar-logo-renderer' }
    // 新增规则参考格式：
    // { type: 'class', value: '要屏蔽的元素class名' },
    // { type: 'title', value: '要屏蔽的元素title属性值' }
  ];

  // 批量删除匹配规则的元素
  function removeBadElements() {
    blockRules.forEach(rule => {
      let elements;
      switch(rule.type) {
        case 'class':
          elements = document.getElementsByClassName(rule.value);
          break;
        case 'title':
          elements = document.querySelectorAll(`[title="${rule.value}"]`);
          break;
      }
      // 转数组遍历避免实时DOM集合的索引偏移问题
      Array.from(elements).forEach(el => el.remove());
    });
  }

  // 先执行一次清理已加载的元素
  removeBadElements();

  // 启动DOM变化监听，有新元素插入时立刻触发校验
  const domObserver = new MutationObserver((mutations) => {
    const hasNewNodes = mutations.some(m => m.addedNodes.length > 0);
    if (hasNewNodes) removeBadElements();
  });

  // 监听整个页面的所有DOM节点变化，包括动态生成的子节点
  domObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
})();

使用方法 #

1. 打开Chrome扩展管理页（地址栏输入chrome://extensions/）
2. 开启右上角「开发者模式」
3. 点击「加载已解压的扩展程序」，选择存放3个文件的文件夹即可生效
4. 后续新增屏蔽规则只需修改inject.js中的blockRules数组，重启扩展即可生效

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