Расширения для браузеров — Расширение для всплывающих окон

Мы уже достаточно познакомились с расширениями браузера и рассмотрели следующие элементы:

  • Первое расширение
  • Расширение новой вкладки
  • Добавление Tailwind в браузерные расширения
  • Добавление React в браузерные расширения

В этой статье мы рассмотрим, как установить всплывающее расширение. Это расширение всплывает, когда вы нажимаете на иконку в панели инструментов.

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

Настройка всплывающего расширения

Сначала создайте новый проект и перейдите в него.

mkdir popup-extension && cd popup-extension
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Затем давайте инициализируем новый проект узла.

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

Теперь мы можем начать добавлять необходимые нам пакеты.

npm i react react-dom tailwindcss vite
Войти в полноэкранный режим Выход из полноэкранного режима
  • React и React-dom для включения React для этого проекта
  • Tailwindcss для обработки стилей.
  • И Vite в качестве инструмента сборки.

И зависимостей dev, которые мы будем использовать.

npm i -D @vitejs/plugin-react postcss-cli
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте начнем с инициализации конфигурации Taiwlidn.

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

Это создаст файл tailwind.config.js, в который можно поместить следующий конфиг.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/*.jsx'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте также добавим файл .postcssrc.json в корень нашего проекта.

{
  "plugins": {
    "tailwindcss": {}
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Последним шагом в конфигурации Tailwind будет добавление папки css с файлом style.css внутри.

@tailwind base;
@tailwind components;
@tailwind utilities;
Вход в полноэкранный режим Выход из полноэкранного режима

Затем нам также нужен файл конфигурации Vite под названием vite.config.js.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});
Войдите в полноэкранный режим Выйти из полноэкранного режима

Также откройте ваш package.json и добавьте следующие скрипты.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},
Вход в полноэкранный режим Выйти из полноэкранного режима

Создание публичных активов и манифеста

Расширения работают на основе файла манифеста, чтобы запустить его в нашей сборке. Мы можем создать папку public.

Создайте другую папку под названием icons и поместите туда иконки вашего расширения. (или используйте мои из проекта на GitHub).
Также поместите туда файл manifest.json.

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "Popup Extension",
  "description": "A demo popup experience",
  "action": {
    "default_icon": "icons/icon-48.png",
    "default_popup": "index.html"
  },
  "icons": {
    "48": "icons/icon-48.png"
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, если мы создадим этот файл index.html в корне нашего проекта, мы должны быть готовы опробовать его.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT Popup</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    Hello world 👋
  </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Если теперь вы соберете и установите плагин, следуя этим указаниям, вы сможете добавить его в свой браузер.

Как вы можете видеть на скриншоте выше, он выглядит относительно небольшим и не стилизованным.
Он также не обладает интерактивностью. Давайте изменим это, добавив немного Tailwind и React.

Добавление Tailwind и React, расширение всплывающего окна

Мы уже загрузили все необходимые конфигурации, поэтому давайте начнем с преобразования нашего простого HTML в приложение React.

В вашем index.html замените тело следующим содержимым.

<body>
  <div id="app"></div>
  <script type="module" src="src/index.jsx"></script>
</body>
Вход в полноэкранный режим Выйти из полноэкранного режима

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

Внутри этого каталога начните с добавления файла index.jsx.

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

const app = document.getElementById('app');
ReactDOM.render(<App />, app);
Вход в полноэкранный режим Выйти из полноэкранного режима

Это наш базовый React init, который внедряет React в наше приложение.
Давайте создадим компонент App, добавив файл App.jsx.

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>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, здесь также создается компонент Counter, отвечающий за некоторые взаимодействия.
Давайте создадим и его: Counter.jsx.

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>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы видите, среди этих компонентов мы также представили несколько классов Tailwind, которые должны позаботиться о стилизации.

Давайте снова создадим наше приложение и попробуем его в браузере.

Вроде бы все на месте, но наше приложение очень узкое, и мы мало что видим!
Давайте исправим это, сделав наше главное всплывающее окно фиксированного размера.
Откройте файл style.css и добавьте следующую строку.

#app {
  width: 350px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь снова соберите приложение и опробуйте его.

Полный код вы можете найти на GitHub.

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

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

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