时序问题：如何阻止Chrome扩展中非必要图片与视频的初始加载？

针对你遇到的「替换src为data-src仍无法阻止媒体初始加载」的问题，以下是几个高效的解决方案：

1. 优先使用Chrome Declarative Net Request API #

这是最直接的网络层拦截方案，能在请求发起前直接阻止媒体资源获取，完全绕开DOM解析的延迟问题。

• 配置方式：在manifest.json中声明权限和规则集：

  "permissions": ["declarativeNetRequest", "<all_urls>"],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "media_block_rules",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
  

• 规则示例（rules.json）：

  [
    {
      "id": 1,
      "priority": 1,
      "action": {"type": "block"},
      "condition": {
        "urlFilter": "*.jpg|*.png|*.gif|*.mp4|*.webm",
        "resourceTypes": ["image", "media"]
      }
    }
  ]
  

• 优势：无需DOM操作，从根源阻止请求，带宽节省效果最显著，还支持按域名、路径等精细匹配规则。

2. 用MutationObserver实时拦截DOM节点插入 #

document_start时机虽早，但页面DOM是逐步解析的，部分媒体节点可能已触发加载。通过MutationObserver可以在节点插入到DOM的瞬间处理：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 处理单个媒体节点
      if (node.tagName === 'IMG' || node.tagName === 'VIDEO') {
        node.dataset.src = node.src;
        node.src = ''; // 替换为空或占位图URL
      }
      // 处理包含媒体节点的父元素
      else if (node.childNodes.length > 0) {
        node.querySelectorAll('img, video').forEach(el => {
          el.dataset.src = el.src;
          el.src = '';
        });
      }
    });
  });
});

// 在document_start时启动监听
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

3. 重写媒体元素构造函数拦截动态加载 #

针对JS动态创建的图片/视频元素，可以重写原生构造函数和属性，阻止src赋值触发加载：

// 重写Image构造函数
const originalImage = window.Image;
window.Image = function(width, height) {
  const img = new originalImage(width, height);
  const originalSetAttr = img.setAttribute;
  img.setAttribute = function(name, value) {
    if (name === 'src') {
      this.dataset.src = value;
      return;
    }
    originalSetAttr.call(this, name, value);
  };
  return img;
};

// 重写video的src属性
Object.defineProperty(HTMLVideoElement.prototype, 'src', {
  set: function(value) {
    this.dataset.src = value;
  },
  get: function() {
    return this.dataset.src || '';
  }
});

方案选择建议 #

• 若要全局阻止媒体加载，优先用Declarative Net Request API，效率最高且实现简单；
• 若需要针对页面特定区域或动态生成的媒体做懒加载控制，结合MutationObserver+构造函数重写的方案更灵活。

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