如何修改attachmentPreview类元素并持续检测新增元素解除图片模糊

1. 定位并修改目标元素 #

你已经能用document.getElementsByClassName("attachmentPreview")获取元素，直接遍历这些元素清空类名即可：

function clearBlurClasses() {
  const elements = document.getElementsByClassName("attachmentPreview");
  // 倒序遍历避免动态HTMLCollection的索引偏移问题
  for (let i = elements.length - 1; i >= 0; i--) {
    elements[i].className = "";
  }
}

调用clearBlurClasses()就能处理当前页面已加载的所有目标元素。

2. 持续检测动态加载的元素 #

用MutationObserver监听页面DOM的变化，一旦有新元素添加就自动处理：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach((node) => {
        // 只处理元素节点
        if (node.nodeType === 1) {
          // 检查当前节点是否是目标元素
          if (node.classList.contains("attachmentPreview")) {
            node.className = "";
          }
          // 递归查找子元素中的目标类
          const childElements = node.getElementsByClassName("attachmentPreview");
          for (let i = childElements.length - 1; i >= 0; i--) {
            childElements[i].className = "";
          }
        }
      });
    }
  });
});

// 配置观察规则：监听整个文档树的子节点添加
const observerConfig = {
  childList: true,
  subtree: true,
};

// 启动观察
observer.observe(document.body, observerConfig);

完整整合脚本 #

把两部分结合，页面加载时先处理已有元素，再启动观察者：

(function() {
  function clearBlurClasses() {
    const elements = document.getElementsByClassName("attachmentPreview");
    for (let i = elements.length - 1; i >= 0; i--) {
      elements[i].className = "";
    }
  }

  // 页面加载完成后先执行一次
  clearBlurClasses();

  // 初始化MutationObserver
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === 1) {
            if (node.classList.contains("attachmentPreview")) {
              node.className = "";
            }
            const childElements = node.getElementsByClassName("attachmentPreview");
            for (let i = childElements.length - 1; i >= 0; i--) {
              childElements[i].className = "";
            }
          }
        });
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
})();

将这段代码放入你的Firefox扩展内容脚本中，确保仅在目标论坛URL下运行即可。

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