Мы уже создали базовое расширение, которое сделал все веб-сайты, которые мы посещаем, розовымино что, если мы хотим, чтобы это действие происходило только тогда, когда мы нажимаем кнопку внутри наших всплывающих расширений?

Что ж, в этой статье мы узнаем именно об этом, а еще лучше — о базовом цвете нашего локальное хранилище которые мы реализовали в предыдущей статье.

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


Всплывающее расширение изменяет страницу

Чего мы хотим добиться сегодня, так это того, что при нажатии кнопки внутри нашего всплывающего расширения цвет активной вкладки меняется.

Расширения для браузера - Модификации всплывающих страниц

Сначала нам нужно добавить некоторые новые разрешения для нашего manifest.json файл.

{
  "permissions": ["alarms", "notifications", "storage", "activeTab", "scripting"],
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Новые activeTab а также scripting.
Которые делают следующее:

  • activeTab позволяет нам изменять и извлекать активную вкладку
  • scripting позволяет нам вводить скрипты через браузер

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

return <button onClick={colorize}>Colorize 💖</button>;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь добавим это colorize функция.

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

Выйти из полноэкранного режима

Это выглядит очень сложно, но не волнуйтесь. Я проведу вас через это.

Во-первых, нам нужно получить активную вкладку. Для этого мы можем использовать запрос tabs.

Когда у нас есть активная вкладка, мы можем вызвать API сценариев Chrome.
Мы называем executeScript функция, которая может внедрить скрипт или простую функцию на этой вкладке.
В нашем случае мы вводим changeColor функция.

Затем мы можем добавить эту функцию в этот файл для использования.

const changeColor = () => {
  chrome.storage.sync.get('color', ({ color }) => {
    document.body.style.backgroundColor = color;
  });
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Эта функция будет считывать локальное хранилище и брать из него цвет.
Затем мы установим тело документа в этот цвет.

И вуаля!
Одним нажатием кнопки вы можете изменить любой веб-сайт!

Примечание: Помните, что мы добавил цвета в локальное хранилище? Вы можете поиграть, изменив цвет в настройках.

Вы также можете найти полный код на Гитхаб.


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

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер