用户脚本-截取图片网址并提供不同的图片

Question

我正在编写一个用户脚本，该脚本将在我访问JIRA服务器时运行。它将使用我们公司ID证章照片商店中的图像为用户替换化身图像。这样，整个组织无需将其图像分别上传到JIRA服务器即可轻松识别用户图标。我可以使用jQuery更改已渲染到DOM中的图像的'src'属性。但是，JIRA页面将动态内容加载到div中，依此类推，所以我想知道是否有一种方法可以附加一个事件处理程序，该事件处理程序将在浏览器尝试获取图像时触发，并提供与公司服务器不同的图像。 img标签包含我正确映射图像所需的data属性。我只是不知道该挂什么事件。

[我能找到的最接近的例子是this page上的“脾气暴躁的猫”（从此Stackoverflow comment降落在那里），但似乎Mobify不再被维护。解决该用例的当前选择是什么？

谢谢！

Answer 1

您可以使用深层（子树）MutationObserver来监视要添加到DOM中的元素。无论何时添加元素，都应在元素及其子元素中查找<img>，并在每个元素上执行所需的替换：

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>';
});