브라우저 확장 프로그램 - 사용자 지정 옵션 페이지

14024 단어 beginnershtmljavascriptwebdev
이전 기사에서 option to change the color of our extensions 을 추가했습니다.
지금까지 기본 팝업 보기를 사용했지만 브라우저 옵션 메뉴를 활용할 수도 있습니다.

이것은 확장 옵션을 정리하는 깔끔한 트릭이며, 이 기사에서는 이를 달성하는 방법을 보여 드리겠습니다.



기사를 따라가려면 다음GitHub branch을 시작점으로 삼으십시오.

브라우저 확장에 옵션 추가



확장과 관련된 모든 것과 마찬가지로 먼저 매니페스트 파일에 옵션 메뉴를 등록해야 합니다.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>


계속해서 src 디렉토리에 이 옵션 폴더를 만들고 내부에 index.jsx 파일을 만듭니다.

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

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


보시다시피 이것은 또 다른 React 부트스트랩 파일입니다. 계속해서 옵션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 파일에서 가져왔으므로 여기에서 선택 옵션을 제거하십시오.

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 branch.

읽어주셔서 감사합니다. 연결합시다!



제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
스타일 구성 요소 구문을 지원하도록 CSS-in-JS 확장
Typescript를 사용하여 React에 NextUI 설치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage