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 di Mellowtel.

Installa le Dipendenze

Per prima cosa, aggiungi il pacchetto Mellowtel al tuo progetto:

pnpm add mellowtel

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 effettiva chiave API Mellowtel 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()

Crea o modifica il tuo componente popup (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.

Hai bisogno di aiuto? Unisciti alla nostra comunità Discord per supporto.

​Installazione Manuale

​Installa le Dipendenze

​Configura package.json

​Imposta le Variabili d’Ambiente

​Implementazione

​Configurazione dello Script di Background

​Configurazione dello Script di Contenuto

​Implementazione del Popup

​Comandi di Sviluppo

​Test

Installazione Manuale

Installa le Dipendenze

Configura package.json

Imposta le Variabili d’Ambiente

Implementazione

Configurazione dello Script di Background

Configurazione dello Script di Contenuto

Implementazione del Popup

Comandi di Sviluppo

Test