English | 简体中文 | Tiếng Việt | Deutsch | French | Indonesian | Русский | Turkish | 日本語 | 한국어
Production Cloud: Itero라는 브라우저 확장 프로그램용 클라우드 서비스를 구축했습니다. 즉시 베타 테스트 및 더 많은 멋진 기능을 원하시면 확인해보세요.
Plasmo 프레임워크는 개발자들을 위해 만들어진 강력한 브라우저 확장 프로그램 SDK입니다. 이를 통해 제품을 만들 때 설정 파일과 브라우저 확장 프로그램 개발의 특이한 부분에 대해 걱정하지 않고 진행할 수 있습니다.
브라우저 확장 프로그램을 위한 Next.js와 같습니다!
- React 및 Typescript를 위한 first-class 지원
- 선언적 개발
- 콘텐츠 스크립트 UI
- 탭 페이지
- 라이브 리로딩 및 React HMR
.env*파일- Storage API
- Messaging API
- 원격 코드 번들링 (ex. Google Analytics를 위한)
- 여러 브라우저 및 매니페스트 타겟팅
- BPP를 통한 자동 배포
- Svelte 및 Vue의 선택적 지원
이 외에도 많은 기능이 있습니다! 🚀
- Node.js 16.x 이상
- MacOS, Windows 또는 Linux
- (매우 권장) pnpm
Firebase Authentication, Redux, Supabase authentication, Tailwind와 함께 Plasmo를 사용하는 방법을 보여주는 예제를 제공하고 있습니다. 이를 확인하려면 예제 레포지토리를 방문해보세요.
Plasmo 프레임워크에 대해 더 자세히 알아보려면 문서를 확인하세요.
브라우저 확장 프로그램이 작동하는 방식과 개발하는 방법에 대해 더 자세히 알아보려면 Matt Frisbie의 새 책 "Building Browser Extensions"을 강력히 추천합니다.
pnpm create plasmo example-dir
cd example-dir
pnpm dev
변경하고자 하는 부분에 따라 아래 파일을 편집해 주세요.
- 팝업 →
popup.tsx파일 - 옵션 페이지 →
options.tsx - 콘텐츠 스크립트 →
content.ts - 백그라운드 서비스 워커 →
background.ts
이 파일들을 각각의 디렉토리에 정리해서 넣을 수도 있습니다.
ext-dir
├───assets
| └───icon.png
├───popup
| ├───index.tsx
| └───button.tsx
├───options
| ├───index.tsx
| ├───utils.ts
| └───input.tsx
├───contents
| ├───site-one.ts
| ├───site-two.ts
| └───site-three.ts
...
마지막으로, 소스 코드를 루트 디렉토리에 넣지 않고 이 가이드를 따라 src 하위 디렉토리에 넣을 수도 있습니다. 그러나 assets 및 기타 구성 파일은 여전히 루트 디렉토리에 있어야 합니다.
지원하는 브라우저 목록을 확인하려면 이 문서를 참조하세요.
Plasmo 커뮤니티는 Discord에서 찾을 수 있습니다. Plasmo 프레임워크 사용에 관한 도움을 받기에 적절한 채널입니다.
행동 강령(Code of Conduct)은 모든 Plasmo 커뮤니티 채널에 적용됩니다.
자세한 내용은 기여 가이드라인(Contributing Guidelines)을 참조하세요.
훌륭한 컨트리뷰터 여러분들께 큰 감사를 드립니다 ❤️
자유롭게 참여하고 PR을 보내주세요!
Plasmo는 현재 알파 버전의 소프트웨어이며, 버전 간에 일부 변경 사항이 있을 수 있으므로 주의하고 사용하십시오.