브라우저 확장 - 팝업 확장
이 기사에서는 팝업 확장을 설정하는 방법을 살펴봅니다. 이 확장 프로그램은 도구 모음에서 아이콘을 클릭하면 나타납니다.
오늘의 결과는 드롭다운에 React 앱을 표시하는 팝업 확장입니다.
팝업 확장 설정
먼저 새 프로젝트를 생성하고 해당 프로젝트로 이동합니다.
mkdir popup-extension && cd popup-extension
그런 다음 새 노드 프로젝트를 초기화해 보겠습니다.
npm init -y
이제 필요한 패키지를 추가할 수 있습니다.
npm i react react-dom tailwindcss vite
React and React-dom 이 프로젝트
Tailwindcss 우리를 위해 스타일링을 처리합니다
그리고 우리가 사용할 개발 의존성.
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.config.js라는 Vite 구성 파일도 필요합니다.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>
이제 these directions에 따라 플러그인을 빌드하고 설치하면 브라우저에 추가할 수 있습니다.
위의 스크린샷에서 볼 수 있듯이 상대적으로 작고 스타일이 없어 보입니다.
또한 상호 작용이 없습니다. Tailwind와 React를 추가하여 변경해 보겠습니다.
팝업 확장 기능인 Tailwind 및 React 추가
필요한 모든 구성을 이미 로드했으므로 일반 HTML을 React 앱으로 변환하여 시작하겠습니다.
index.html 에서 본문을 다음 내용으로 바꿉니다.<body>
<div id="app"></div>
<script type="module" src="src/index.jsx"></script>
</body>
이제 React 애플리케이션의 기본 진입점이 될
src 디렉토리를 만들어야 합니다.이 디렉터리 내에서
index.jsx 파일을 추가하여 시작합니다.import ReactDOM from 'react-dom';
import { App } from './App';
const app = document.getElementById('app');
ReactDOM.render(<App />, app);
이것이 우리의 기본 React init이며 React를 앱에 주입합니다.
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에 연결하거나
Reference
이 문제에 관하여(브라우저 확장 - 팝업 확장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/browser-extensions-popup-extension-19di텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
