Repolode
Enviar
PlasmoHQ

PlasmoHQ/plasmo

Framework para crear extensiones de navegador con React y TypeScript que gestiona la configuración del manifest, la compilación y la recarga en vivo para Chrome, Firefox y Edge.

Ver en GitHubSitio web
Estrellas
13,168
Forks
465
Issues abiertos
371
Último commit
hace 17 horas

¿Qué es?

Plasmo es un framework para crear extensiones de navegador, inspirado en Next.js. Elimina gran parte de la configuración manual que suele requerir el desarrollo de extensiones, para que los desarrolladores puedan centrarse en las páginas popup, las páginas de opciones, los content scripts y los service workers en segundo plano.

El framework incluye compatibilidad con React y TypeScript, y ofrece compatibilidad opcional con Svelte y Vue. Proporciona recarga en vivo con React HMR, archivos de entorno, una API de almacenamiento y una API de mensajería entre los componentes de la extensión. Los content scripts pueden renderizar la interfaz directamente en las páginas anfitrionas, y el proyecto incluye la compilación de código remoto para casos como la carga de Google Analytics.

Plasmo permite generar versiones para distintas combinaciones de navegador y manifest a partir de una sola base de código, e incluye el despliegue automatizado en tiendas mediante Browser Platform Publisher. Funciona en macOS, Windows y Linux con Node.js 16 o posterior, y el proyecto se describe como software alfa.

Funciones clave

  • 01Compatibilidad con React y TypeScript, y compatibilidad opcional con Svelte y Vue
  • 02Recarga en vivo con React HMR durante el desarrollo
  • 03API de almacenamiento y mensajería para la comunicación entre las partes de la extensión
  • 04Interfaz de content scripts renderizada en páginas anfitrionas
  • 05Compilaciones para distintos navegadores y manifests a partir de una sola base de código
  • 06Despliegue automatizado mediante Browser Platform Publisher

Casos de uso

  • Crear una extensión para Chrome o Firefox con React y TypeScript sin configurar el manifest manualmente
  • Insertar una interfaz basada en React en sitios web de terceros mediante content scripts
  • Publicar una extensión basada en una sola base de código en varios navegadores y tiendas

Inicio rápido

  1. 1

    Comprueba que tienes instalado Node.js 16.x o una versión posterior

  2. 2

    Instala pnpm (muy recomendado)

  3. 3

    Crea un proyecto nuevo a partir de la plantilla

    pnpm create plasmo example-dir
  4. 4

    Entra en el directorio del proyecto e inicia el servidor de desarrollo

    cd example-dir pnpm dev

Antes de usarlo

  • El README indica que Plasmo es software alfa, por lo que puede cambiar entre versiones.
  • Algunas funciones dependen de servicios externos, como el servicio en la nube de Itero, que es opcional.

Temas

#browser-extension#react#typescript#chrome-extension#firefox-addon#bundler#frontend-framework#edge-addon#parcel#reactjs

Preguntas frecuentes

¿Qué es plasmo?
Framework para crear extensiones de navegador con React y TypeScript que gestiona la configuración del manifest, la compilación y la recarga en vivo para Chrome, Firefox y Edge. Plasmo es un framework para crear extensiones de navegador, inspirado en Next.js. Elimina gran parte de la configuración manual que suele requerir el desarrollo de extensiones, para que los desarrolladores puedan centrarse en las páginas popup, las páginas de opciones, los content scripts y los service workers en segundo plano.
¿plasmo es gratuito? ¿Qué licencia tiene?
plasmo es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿plasmo sigue mantenido?
Mantenimiento activo. El último commit de plasmo fue el 21 oct 2026.
¿Para qué puedo usar plasmo?
Crear una extensión para Chrome o Firefox con React y TypeScript sin configurar el manifest manualmente Insertar una interfaz basada en React en sitios web de terceros mediante content scripts Publicar una extensión basada en una sola base de código en varios navegadores y tiendas
¿Cómo se instala plasmo?
Comprueba que tienes instalado Node.js 16.x o una versión posterior Instala pnpm (muy recomendado) Crea un proyecto nuevo a partir de la plantilla: pnpm create plasmo example-dir Entra en el directorio del proyecto e inicia el servidor de desarrollo: cd example-dir pnpm dev
¿Dónde consigo plasmo?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/PlasmoHQ/plasmo

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados