Мы уже достаточно познакомились с расширениями браузера и рассмотрели следующие элементы:
- Первое расширение
- Расширение новой вкладки
- Добавление 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.