Beginner Tutorial: Build a Chrome Extension with React
- React와 Vite를 사용하여 간단한 Chrome 확장 프로그램을 만드는 방법을 설명 🛠️
- 사용자 입력을 받아 Chrome 저장소에 저장하는 메모 확장 프로그램 구축 📝
- Vite를 사용하여 React 애플리케이션을 설정하고 Tailwind CSS를 통합하는 방법 소개 ⚙️
- manifest.json 파일을 구성하여 확장 프로그램의 이름, 버전, 설명 및 팝업 액션을 정의 📄
- Chrome 확장 프로그램 페이지에서 개발자 모드를 활성화하고 압축 해제된 확장 프로그램을 로드하는 방법 안내 🧑💻
- React의 useState 훅을 사용하여 텍스트 입력 및 메모 목록을 관리하는 방법 설명 ⚛️
- Chrome 저장소 API를 사용하여 메모를 저장하고 검색하는 방법 제시 💾
- use Effect 훅을 사용하여 컴포넌트가 처음 마운트될 때 저장된 메모를 로드하고 메모가 변경될 때마다 저장하는 방법 설명 🔄
- @types/chrome 패키지를 설치하여 TypeScript에서 Chrome API를 사용할 수 있도록 설정하는 방법 안내 ⌨️
- 확장 프로그램에 저장소 권한을 추가하기 위해 manifest.json 파일을 업데이트하는 방법 제시 🔑
- npm run build 명령을 사용하여 확장 프로그램의 프로덕션 빌드를 생성하는 방법 설명 📦
- Chrome 확장 프로그램을 다시 로드하여 변경 사항을 적용하는 방법 안내 ♻️
- 메모 추가 및 삭제 기능 구현 ➕
- Chrome 저장소를 사용하여 브라우저를 닫았다가 다시 열어도 메모가 유지되도록 구현 Persistent data 🗄️