Repolode
PlasmoHQ

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

    Node.js 16.x 이상이 설치되어 있는지 확인하세요

  2. 2

    pnpm을 설치하세요(강력히 권장)

  3. 3

    템플릿을 사용해 새 프로젝트를 만드세요

    pnpm create plasmo example-dir
  4. 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 통계는 매일 갱신됩니다.

관련 프로젝트