GitHub 인터페이스의 불필요한 요소를 줄이고 저장소, 이슈, PR, 알림에 기능을 추가하는 브라우저 확장 프로그램입니다.
PlasmoHQ/plasmo
Chrome, Firefox, Edge용 manifest, 빌드, 실시간 리로드 설정을 처리하는 React 및 TypeScript 브라우저 확장 프로그램 프레임워크입니다.
- 스타
- 13,168
- 포크
- 465
- 열린 이슈
- 371
- 마지막 커밋
- 17시간 전
어떤 프로젝트인가요?
Plasmo는 Next.js에서 영감을 받은 브라우저 확장 프로그램 개발 프레임워크입니다. 확장 프로그램을 개발할 때 보통 필요한 수동 설정을 상당 부분 줄여, 개발자가 팝업 페이지, 옵션 페이지, 콘텐츠 스크립트, 백그라운드 서비스 워커에 집중할 수 있게 합니다.
React와 TypeScript를 기본 지원하며, Svelte와 Vue도 선택적으로 사용할 수 있습니다. React HMR을 지원하는 실시간 리로드, 환경 변수 파일, 스토리지 API, 확장 프로그램 구성 요소 간 메시징 API를 제공합니다. 콘텐츠 스크립트는 호스트 페이지에 UI를 직접 렌더링할 수 있으며, Google Analytics를 불러오는 경우와 같은 상황을 위한 원격 코드 번들링도 포함되어 있습니다.
Plasmo는 하나의 코드베이스로 여러 브라우저와 manifest 조합을 대상으로 빌드할 수 있으며, Browser Platform Publisher를 통한 자동 스토어 배포 기능도 제공합니다. Node.js 16 이상에서 macOS, Windows, Linux를 지원하며, 프로젝트는 현재 알파 소프트웨어라고 설명합니다.
핵심 기능
- 01React와 TypeScript 지원, Svelte와 Vue는 선택적으로 지원
- 02개발 중 React HMR을 지원하는 실시간 리로드
- 03확장 프로그램 구성 요소 간 통신을 위한 스토리지 및 메시징 API
- 04호스트 페이지에 UI를 렌더링하는 콘텐츠 스크립트
- 05하나의 코드베이스로 여러 브라우저 및 manifest 대상 빌드
- 06Browser Platform Publisher를 통한 자동 배포
활용 사례
- manifest 설정을 직접 작성하지 않고 React와 TypeScript로 Chrome 또는 Firefox 확장 프로그램 개발
- 콘텐츠 스크립트로 서드파티 웹사이트에 React 기반 UI 삽입
- 하나의 확장 프로그램 코드베이스를 여러 브라우저와 스토어에 배포
빠른 시작
- 1
Node.js 16.x 이상이 설치되어 있는지 확인하세요
- 2
pnpm을 설치하세요(강력히 권장)
- 3
템플릿을 사용해 새 프로젝트를 만드세요
pnpm create plasmo example-dir - 4
프로젝트 디렉터리로 이동해 개발 서버를 시작하세요
cd example-dir pnpm dev
사용 전 알아둘 점
- README에 따르면 Plasmo는 알파 소프트웨어이므로 버전이 바뀌면서 내용이 달라질 수 있습니다.
- 일부 기능은 선택 사항인 Itero 클라우드 서비스와 같은 외부 서비스에 의존합니다.
토픽
자주 묻는 질문
- plasmo은(는) 무엇인가요?
- Chrome, Firefox, Edge용 manifest, 빌드, 실시간 리로드 설정을 처리하는 React 및 TypeScript 브라우저 확장 프로그램 프레임워크입니다. Plasmo는 Next.js에서 영감을 받은 브라우저 확장 프로그램 개발 프레임워크입니다. 확장 프로그램을 개발할 때 보통 필요한 수동 설정을 상당 부분 줄여, 개발자가 팝업 페이지, 옵션 페이지, 콘텐츠 스크립트, 백그라운드 서비스 워커에 집중할 수 있게 합니다.
- plasmo은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- plasmo은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- plasmo은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. plasmo의 마지막 커밋은 2026년 10월 21일입니다.
- plasmo은(는) 어디에 사용할 수 있나요?
- manifest 설정을 직접 작성하지 않고 React와 TypeScript로 Chrome 또는 Firefox 확장 프로그램 개발 콘텐츠 스크립트로 서드파티 웹사이트에 React 기반 UI 삽입 하나의 확장 프로그램 코드베이스를 여러 브라우저와 스토어에 배포
- plasmo는 어떻게 설치하나요?
- Node.js 16.x 이상이 설치되어 있는지 확인하세요 pnpm을 설치하세요(강력히 권장) 템플릿을 사용해 새 프로젝트를 만드세요: pnpm create plasmo example-dir 프로젝트 디렉터리로 이동해 개발 서버를 시작하세요: cd example-dir pnpm dev
- plasmo은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/PlasmoHQ/plasmo
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
눈의 피로를 줄이기 위해 Chrome, Firefox, Safari, Edge, Thunderbird에서 웹 페이지를 다크 모드로 바꿔 주는 브라우저 확장 프로그램입니다.
ChatGPT, Claude, Gemini, Bing Chat 등 여러 AI 챗봇을 하나의 채팅 인터페이스에서 사용할 수 있는 Chromium 브라우저 확장 프로그램입니다.
Provider 없이 사용할 수 있는 React용 경량 훅 기반 상태 관리 라이브러리입니다.
웹과 React Native에서 상태 관리와 유효성 검사를 지원하는 고성능 폼 구축용 React Hooks 라이브러리입니다.
React Aria와 Tailwind CSS v4를 기반으로 한 React UI 컴포넌트 라이브러리로, 이전 이름은 NextUI입니다.