Расширения для браузеров — Изменение изображений на странице

В этой статье мы рассмотрим, как можно изменять изображения на активной странице.

Если вы хотите следить за развитием статьи, используйте следующую ветку GitHub в качестве отправной точки.

Ниже представлено видео с кодом сегодняшней статьи в действии. Вы можете видеть, как мы заменяем все изображения на странице IMDB котятами.

Изменение всех изображений на странице

Как обычно, мы должны зарегистрировать новую кнопку в нашем всплывающем меню.
Эта кнопка будет вызываться для изменения всех изображений на странице. Откройте файл src/App.jsx и добавьте следующее содержимое:

<button onClick={imageSpoof}>Change images</button>
Вход в полноэкранный режим Выйти из полноэкранного режима

Нам понадобится использовать скриптинг, о котором мы узнали в предыдущей статье, чтобы внедрить функцию на страницу.

const imageSpoof = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: spoofImages,
  });
};
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого мы можем создать функцию spoofImages, которую мы определили.

const spoofImages = () => {
  const images = document.getElementsByTagName('img');
  for (const image of images) {
    image.removeAttribute('srcset');
    image.src = 'http://placekitten.com/300';
  }
};
Вход в полноэкранный режим Выйти из полноэкранного режима

В результате все изображения на странице будут заменены на изображение котенка.
Я также решил удалить srcset просто потому, что он будет иметь более высокий приоритет.

Примечание: В настоящее время везде будет размещено одно и то же изображение котенка.

Вот и все, теперь мы можем заменять изображения на каждом посещаемом сайте.

Вы можете найти готовый код на GitHub.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий