Qui imparerai come monetizzare la tua estensione del browser Plasmo integrando Mellowtel. Tempo stimato per il completamento: 5-15 minuti.
Installazione Manuale
Se hai un progetto Plasmo esistente, segui questi passaggi per aggiungere l’integrazione Mellowtel.
Installa le Dipendenze
Per prima cosa, aggiungi il pacchetto Mellowtel al tuo progetto:
Configura package.json
Aggiorna il tuo package.json per includere i permessi richiesti:
{
"manifest": {
"permissions": [
"storage",
"declarativeNetRequest"
],
"host_permissions": ["<all_urls>"]
}
}
Imposta le Variabili d’Ambiente
Crea o aggiorna il tuo file .env:
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
Assicurati di sostituire your_mellowtel_api_key_here con la tua chiave API Mellowtel effettiva dal dashboard.
Implementazione
Configurazione dello Script di Background
Crea o modifica il tuo script di background (background.ts):
import Mellowtel from "mellowtel"
let mellowtel;
(async () => {
mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
await mellowtel.initBackground()
})()
// Gestisci installazione e aggiornamenti
chrome.runtime.onInstalled.addListener(async function (details) {
console.log("Estensione Installata o Aggiornata", details)
await mellowtel.generateAndOpenOptInLink()
})
Configurazione dello Script di Contenuto
Crea o modifica il tuo script di contenuto (content.ts):
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"
let mellowtel;
// Configura il comportamento dello script di contenuto
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}>
Cambia Impostazioni Mellowtel
</button>
</div>
)
}
export default Popup
Comandi di Sviluppo
Usa questi comandi durante lo sviluppo:
# Avvia il server di sviluppo
pnpm dev
# Compila per la produzione
pnpm build
# Impacchetta l'estensione
pnpm package
Migliori Pratiche di Sviluppo
- Testa sempre accuratamente la tua estensione sia in ambienti di sviluppo che di produzione
- Monitora la console per eventuali avvisi o errori relativi a Mellowtel
- Testa il flusso di opt-in dal punto di vista dell’utente
- Verifica che il link delle impostazioni funzioni correttamente
- Assicurati che tutti i permessi siano configurati correttamente
Test
Prima di inviare la tua estensione:
- Testa il flusso di installazione
- Verifica che il processo di opt-in funzioni
- Controlla che la pagina delle impostazioni sia accessibile
- Conferma che tutti i permessi funzionino correttamente
- Testa su diversi browser se stai puntando a più piattaforme
Per ulteriori informazioni sulle funzionalità e l’API di Mellowtel, visita il Quickstart. 
