Браузерные расширения — приправляем с помощью React

Теперь, когда мы запустили наше браузерное расширение с помощью Tailwind CSS и Parcel, давайте посмотрим, как сделать его более интерактивным.

Вы можете выбрать любой фреймворк, с которым вы знакомы. Я решил использовать React.

Идея заключается в том, чтобы добавить React для создания интерактивного расширения браузера новой вкладки.

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

Содержание

Установка зависимостей
Настройка React
Спасибо, что прочитали, и давайте подключаться!

Установка зависимостей

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

npm i react react-dom

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

Затем вы можете продолжить и создать папку src. Она станет центральным местом нашего приложения React.

Настройка React

Теперь, когда у нас все установлено, остались только эти два пункта 🤯.

Мы можем приступить к рендерингу приложения React.
Откройте страницу new-tab.html. До сих пор это был исходник нашего приложения, но давайте удалим HTML и поместим это внутрь.

<body>
  <div id="app"></div>
  <script type="module" src="index.js"></script>
</body>

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

Это станет нашей точкой инъекции, куда мы можем внедрить React.

Мы также добавили скрипт, который будет обрабатывать инъекцию React.

Создайте этот файл index.js.

import ReactDOM from 'react-dom';
import { App } from './src/App';

const app = document.getElementById('app');
ReactDOM.render(<App />, app);

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

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

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white'>
      <p>Welcome 👋</p>
    </div>
  );
}

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

Это отобразит то, что мы уже имели вначале.
Давайте сделаем его более интерактивным, создав компонент Counter.js.

import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(0);
  const increase = () => setCounter((count) => count + 1);
  const decrease = () => setCounter((count) => count - 1);
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className='px-4'>{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  );
}

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

Теперь вернитесь к компоненту App.js и импортируйте счетчик.

import Counter from './Counter';

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white'>
      <p>Welcome 👋</p>
      <br />
      <Counter />
    </div>
  );
}

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

Теперь, если вы запустите команду watch или build, вы должны иметь возможность использовать ваше новое браузерное расширение на базе React.

npm run build

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

Примечание: убедитесь, что при загрузке расширения используется папка dist.

Код этой статьи вы можете найти на GitHub.

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

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