Как использовать Tailwind в расширениях для Chrome?

На чтение 4 мин Опубликовано 16.09.2024

Как многие из вас знают, расширения для Chrome представляют собой обычные javascript/css/html файлы.
Поскольку в обычных расширениях Chrome отсутствует файл tailwind.min.css и нет npm, это ставит передо мной вопрос:

Как использовать Tailwind в существующих расширениях Chrome?

Обратите внимание, что миграция всего расширения на какой-либо шаблон React, который в конечном итоге собирается в расширение, не является разумным решением, если просто нужно включить стили tailwind.

Содержание

Ответ
Шаг 1: Установите Tailwind CSS
Шаг 2: Сгенерируйте tailwind.min.css
Шаг 3: Настройте расширение Chrome
Шаг 4: Загружайте и тестируйте расширение

Ответ

Чтобы использовать Tailwind CSS в существующем расширении для Chrome, следуйте этим шагам:

Шаг 1: Установите Tailwind CSS

Поскольку вы не можете использовать npm в чистом расширении Chrome, вам нужно будет скачать Tailwind CSS вручную. Перейдите на страницу релизов Tailwind CSS на GitHub и выберите последнюю стабильную версию.

Шаг 2: Сгенерируйте `tailwind.min.css`

Создайте HTML файл: Сначала создайте простой HTML-файл, в который вы добавите Tailwind CSS. Например, назовем его index.html.
Создайте файл конфигурации Tailwind: Создайте файл tailwind.config.js, который будет содержать ваши настройки Tailwind. Например:
```
module.exports = {
  purge: ['./**/*.html'],
  darkMode: false, // или 'media' или 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

Сгенерируйте CSS файл: Вам нужно установить Tailwind CSS через npm для генерации tailwind.min.css, но так как это расширение, можно использовать CDN. Вставьте следующий код в файл index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind in Chrome Extension</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mx-auto">
        <h1 class="text-3xl font-bold">Привет, Tailwind CSS!</h1>
    </div>
</body>
</html>

Скопируйте стили: Откройте файл в браузере, чтобы проверить стили, а затем скопируйте содержимое tailwind.min.css в новый файл tailwind.min.css, который вы будете использовать в вашем расширении.

Шаг 3: Настройте расширение Chrome

Измените manifest.json: В вашем manifest.json файле убедитесь, что вы указали путь к tailwind.min.css.

{
  "manifest_version": 3,
  "name": "Ваше Расширение",
  "version": "1.0",
  "description": "Это расширение использует Tailwind CSS.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [],
  "web_accessible_resources": [
    {
      "resources": ["tailwind.min.css"],
      "matches": ["<all_urls>"]
    }
  ]
}

Создайте HTML файл для всплывающего окна: Создайте файл popup.html и подключите tailwind.min.css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Расширение с Tailwind</title>
    <link href="tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="p-4">
        <h1 class="text-2xl font-semibold">Добро пожаловать в расширение!</h1>
        <button class="bg-blue-500 text-white p-2 rounded">Нажми меня</button>
    </div>
</body>
</html>

Шаг 4: Загружайте и тестируйте расширение

Откройте Chrome и перейдите в chrome://extensions/.
Включите режим разработчика (Developer Mode) в правом верхнем углу.
Нажмите кнопку "Загрузить распакованное расширение" и выберите директорию вашего расширения.
Протестируйте ваше расширение и убедитесь, что Tailwind CSS работает корректно.

Теперь вы успешно настроили использование Tailwind CSS в вашем расширении для Chrome без миграции на React или другие фреймворки. Используйте классы Tailwind для стилизации вашего HTML внутри расширения!