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

Question

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

我能找到的最接近的是 this page (landed there from this Whosebug comment 上的 "Grumpy cat" 示例），但似乎不再维护 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>';
});

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

userscript - intercept image urls and serve different images

javascript

jquery

dom

http

userscripts