Расширения браузера — страница пользовательских параметров

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

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

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

Добавление опций в расширение браузера

Как и во всем, что касается расширений, сначала мы должны зарегистрировать меню опций в нашем файле манифеста.
Откройте файл manifest.json и добавьте следующий конфиг.

{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это зарегистрирует экран опций, который мы назовем options.html, и мы скажем ему не открывать новую вкладку. (она будет открываться во всплывающем окне).

Этот файл опций станет новым приложением и будет запускаться отдельно от нашего существующего приложения.
Создайте файл options.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 Pop-up</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <div id="options"></div>
    <script type="module" src="src/options/index.jsx"></script>
  </body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

Давайте продолжим и создадим папку options в нашей директории src, а внутри создадим файл index.jsx.

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

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

Как вы видите, это просто еще один файл React bootstrap. Давайте продолжим и создадим файл опций App.jsx.

import { useState } from 'react';

export function App() {
  const [color, setColor] = useState('indigo');

  chrome.storage.sync.get('color', (storedColor) => {
    setColor(storedColor.color);
  });

  const pickColor = (pickedValue) => {
    setColor(pickedValue);
    chrome.storage.sync.set({ color: pickedValue });
    window.close();
  };

  return (
    <div className='m-4'>
      <select
        onChange={(event) => pickColor(event.target.value)}
        value={color}
        className='block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500'
      >
        <option>Pick a color</option>
        <option value='indigo'>Indigo</option>
        <option value='pink'>Pink</option>
        <option value='purple'>Purple</option>
        <option value='red'>Red</option>
      </select>
    </div>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Этот код пришел из основного файла App.jsx, поэтому удалите из него опцию select.

Нам нужно зарегистрировать эту новую точку входа в конфигурации Vite, чтобы Vite знал, что он должен создать два файла.
Откройте ваш файл vite.config.js и поместите в него следующий конфиг.

import { defineConfig } from 'vite';
const { resolve } = require('path');
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        options: resolve(__dirname, 'options.html'),
      },
    },
  },
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь Vite знает, что это проект с несколькими приложениями.
Последнее, что мы хотим сделать, это изменить наш файл tailwind.config.js, поскольку теперь мы используем вложенные папки.

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

Вот и все. Теперь вы можете приступить к сборке вашего приложения.
Теперь пользователь сможет изменять цвет через меню опций.

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

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

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

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