Chrome扩展如何在图片渲染前为图片及背景图应用指定样式

• 调整Chrome扩展内容脚本的注入时机
  原方案失效的核心原因是DOMContentLoaded触发时浏览器已经完成了DOM的初步解析，部分元素已经开始渲染。你需要在扩展的manifest配置中，将内容脚本的run_at属性设置为document_start，这会让脚本在页面DOM解析开始前就注入执行，早于任何页面元素的渲染流程。
  Manifest V3版本配置示例如下：

  {
    "manifest_version": 3,
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_start"
      }
    ]
  }
  

• 用MutationObserver监听动态DOM节点，无需等待全量DOM加载完成
  document_start阶段页面还没有生成DOM节点，无法直接查询元素加类，因此需要用MutationObserver监听整个文档的节点新增事件，只要出现<img>标签或者带background相关样式的元素，立刻为其添加自定义类，保证样式在元素渲染前就生效。
  代码示例：

  // 该代码需放在run_at设置为document_start的content.js中
  const addCustomClass = (node) => {
    if (node.nodeType !== Node.ELEMENT_NODE) return
    // 处理img标签
    if (node.tagName === 'IMG') {
      node.classList.add('替换为你的自定义样式类名')
    }
    // 处理带background样式的元素
    const hasBg = getComputedStyle(node).backgroundImage !== 'none' || node.style.backgroundImage
    if (hasBg) {
      node.classList.add('替换为你的自定义样式类名')
    }
    // 批量处理子节点
    node.querySelectorAll('img, [style*="background"]').forEach(el => {
      el.classList.add('替换为你的自定义样式类名')
    })
  }
  
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => addCustomClass(node))
    })
  })
  
  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  })
  
  // 页面加载完成后断开监听，减少性能消耗
  document.addEventListener('DOMContentLoaded', () => {
    observer.disconnect()
    // 最后全量扫描一次避免漏处理元素
    document.querySelectorAll('img, [style*="background"]').forEach(el => {
      el.classList.add('替换为你的自定义样式类名')
    })
  })
  

• 优先选择直接注入CSS的方案（场景允许的情况下）
  如果不需要动态判断条件加类，只是要给所有符合条件的元素应用固定样式，直接在manifest里配置注入CSS文件，同样设置run_at: document_start即可，无需JS操作DOM加类，样式会自动在元素解析时生效，完全不会出现闪烁。
  CSS示例：

  img, [style*="background"] {
    /* 替换为你的样式规则 */
    filter: grayscale(100%);
  }
  

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