javascript - userscript - 拦截图像 url 并提供不同的图像

Question

我正在编写一个用户脚本，每当我访问我们的 JIRA 服务器时都会运行该脚本。它将用我们公司的身份证照片商店中的图像替换用户的头像图像。这样，整个组织就不需要单独将图像上传到 JIRA 服务器上，以便用户图标易于识别。我可以使用 jQuery 更改已渲染到 DOM 中的图像的“src”属性。然而，JIRA 页面将动态内容加载到 div 等中，所以我想知道是否有一种方法可以附加一个事件处理程序，每当浏览器尝试获取图像时就会触发该事件处理程序，并从公司服务器提供不同的图像。 img 标签包含我正确映射图像所需的数据属性。我只是不知道要 Hook 什么事件。

我能找到的最接近的是 this page 上的“脾气暴躁的猫”示例(从 Stackoverflow comment 登陆)，但 Mobify 似乎不再被维护。目前解决此用例的选项有哪些？

谢谢!

Answer 1

您可以使用深层(子树)MutationObserver 来监视添加到 DOM 的元素。每当添加一个元素时，请查看它及其子元素以查找 <img> s，并对每个执行所需的替换:

const transform = img => img.src = img.src.replace(/200x100/, '100x100');
new MutationObserver((mutations) => {
  for (const { addedNodes } of mutations) {
    for (const addedNode of addedNodes) {
      if (addedNode.nodeType !== 1) continue;
      const imgs = addedNode.querySelectorAll('img');
      for (const img of imgs) {
        transform(img);
      }
      if (addedNode.tagName === 'IMG') {
        transform(addedNode);
      }
    }
  }
})
  .observe(document.body, { childList: true, subtree: true });
  
setTimeout(() => {
  document.body.innerHTML += '<div><img src="https://via.placeholder.com/200x100"><div>';
});