usercript - перехватывать URL-адреса изображений и обслуживать разные - PullRequest
Новая
       25

usercript - перехватывать URL-адреса изображений и обслуживать разные

0 голосов
/ 15 марта 2020

Я пишу пользовательский скрипт, который будет запускаться всякий раз, когда я посещаю наш сервер JIRA. Он поменяет изображения аватара для пользователей с изображениями из фото магазина нашей компании. Таким образом, всей организации не нужно загружать свои изображения на сервер JIRA отдельно, чтобы значки пользователей были легко узнаваемы. Я могу использовать jQuery для изменения атрибута 'sr c' изображений, уже отрисованных в DOM. Однако страницы JIRA загружают динамическое содержимое c в div и т. Д., Поэтому мне интересно, есть ли способ присоединить обработчик событий, который будет срабатывать всякий раз, когда браузер пытается извлечь изображение, и обслуживать другое изображение компании сервер вместо. Тег img содержит атрибут данных, необходимый для правильного отображения изображения. Я просто не знаю, к какому событию подключиться.

Наиболее близким, что я смог найти, является пример "Grumpy cat" на этой странице (приземлился там из этого комментария Stackoverflow ), но, похоже, Mobify больше не поддерживается. Каковы современные варианты решения этого варианта использования?

Спасибо!

1 Ответ

1 голос
/ 15 марта 2020

Вы можете использовать глубокий (поддерево) 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>';
});
...