DOM变化时如何检测特定CSS？Chrome扩展动态元素处理方案

方案一：CSS全局覆盖（推荐，高效简洁） #

直接通过注入高优先级CSS覆盖所有元素的鼠标交互逻辑，不管是页面初始元素还是动态新增的元素都会自动生效，无需JS监听DOM变化，性能最优。

示例代码（Chrome扩展配置） #

在扩展的manifest.json中配置内容脚本注入CSS：

{
  "manifest_version": 3,
  "name": "Mouse Disabler",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*", "<all_urls>"],
      "css": ["disable-mouse.css"],
      "run_at": "document_start"
    }
  ]
}

disable-mouse.css文件内容：

/* 全局禁用所有元素的鼠标事件，强制修改光标样式 */
* {
  pointer-events: none !important;
  cursor: default !important;
}

/* 可选：保留输入类元素的交互（如需要用户输入内容） */
input, textarea, select, [contenteditable="true"] {
  pointer-events: auto !important;
  cursor: text !important;
}

方案二：MutationObserver监听DOM变化（精确控制） #

如果需要严格仅处理cursor:pointer的元素，而非全局禁用，可以使用MutationObserver监听DOM树的新增节点，实时处理动态生成的元素。

示例代码（Chrome扩展配置） #

manifest.json配置：

{
  "manifest_version": 3,
  "name": "Mouse Disabler",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*", "<all_urls>"],
      "js": ["disable-mouse.js"],
      "run_at": "document_idle"
    }
  ]
}

disable-mouse.js文件内容：

// 处理单个元素：禁用cursor为pointer的元素交互
function disablePointerElement(element) {
  const computedStyle = window.getComputedStyle(element);
  if (computedStyle.cursor === 'pointer') {
    element.style.pointerEvents = 'none';
    element.style.cursor = 'default';
  }
}

// 批量处理页面初始所有元素
function initDisable() {
  document.querySelectorAll('*').forEach(disablePointerElement);
}

// 监听DOM新增节点
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // 处理新增的单个元素
        disablePointerElement(node);
        // 递归处理新增元素的所有子元素
        node.querySelectorAll('*').forEach(disablePointerElement);
      }
    });
  });
});

// 启动观察者，监听整个文档的子树变化
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

// 初始化执行
initDisable();

补充说明 #

• 如果需要监听元素cursor属性的动态修改（比如JS脚本实时改变元素cursor值），可以在MutationObserver配置中添加attributes: true和attributeFilter: ['style']，回调中重新检查元素的cursor属性。
• getComputedStyle会触发浏览器重排，大量元素处理时存在性能损耗，因此整页禁用场景优先选择CSS方案。

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