Aquí aprenderás cómo monetizar tu extensión de navegador Plasmo integrando Mellowtel. Tiempo estimado para completar: 5-15 minutos.
Instalación Manual
Si tienes un proyecto Plasmo existente, sigue estos pasos para agregar la integración de Mellowtel.
Instalar Dependencias
Primero, añade el paquete de Mellowtel a tu proyecto:
Configurar package.json
Actualiza tu package.json para incluir los permisos requeridos:
{
"manifest": {
"permissions": [
"storage",
"declarativeNetRequest"
],
"host_permissions": ["<all_urls>"]
}
}
Establecer Variables de Entorno
Crea o actualiza tu archivo .env:
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
Asegúrate de reemplazar your_mellowtel_api_key_here con tu clave API real de Mellowtel desde el panel de control.
Implementación
Configuración del Script de Fondo
Crea o modifica tu script de fondo (background.ts):
import Mellowtel from "mellowtel"
let mellowtel;
(async () => {
mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
await mellowtel.initBackground()
})()
// Manejar instalación y actualizaciones
chrome.runtime.onInstalled.addListener(async function (details) {
console.log("Extensión instalada o actualizada", details)
await mellowtel.generateAndOpenOptInLink()
})
Configuración del Script de Contenido
Crea o modifica tu script de contenido (content.ts):
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"
let mellowtel;
// Configurar el comportamiento del script de contenido
export const config: PlasmoCSConfig = {
matches: ["<all_urls>"],
all_frames: true,
run_at: "document_start"
}
const start = async () => {
mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
const resp = await mellowtel.initContentScript()
}
start()
popup.tsx):
import Mellowtel from "mellowtel"
const Popup: React.FC = () => {
const handleMellowtelSettings = async () => {
const mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
const link = await mellowtel.generateSettingsLink()
chrome.tabs.create({ url: link })
}
return (
<div>
<button onClick={handleMellowtelSettings}>
Cambiar Configuración de Mellowtel
</button>
</div>
)
}
export default Popup
Comandos de Desarrollo
Usa estos comandos durante el desarrollo:
# Iniciar servidor de desarrollo
pnpm dev
# Construir para producción
pnpm build
# Empaquetar la extensión
pnpm package
Mejores Prácticas de Desarrollo
- Siempre prueba tu extensión a fondo en entornos de desarrollo y producción
- Monitorea la consola para cualquier advertencia o error relacionado con Mellowtel
- Prueba el flujo de opt-in desde la perspectiva de un usuario
- Verifica que el enlace de configuración funcione correctamente
- Asegúrate de que todos los permisos estén configurados correctamente
Pruebas
Antes de enviar tu extensión:
- Prueba el flujo de instalación
- Verifica que el proceso de opt-in funcione
- Comprueba que la página de configuración sea accesible
- Confirma que todos los permisos funcionen correctamente
- Prueba en diferentes navegadores si apuntas a múltiples plataformas
Para obtener información adicional sobre las características y API de Mellowtel, visita el Inicio Rápido. 
