Skip to main content
Ici, tu apprendras comment monétiser ton extension de navigateur Plasmo en intégrant Mellowtel. Temps estimé pour compléter : 5-15 minutes.

​
Installation Manuelle

Si tu as un projet Plasmo existant, suis ces étapes pour ajouter l’intégration Mellowtel.

​
Installer les Dépendances

Tout d’abord, ajoute le package Mellowtel à ton projet : 
pnpm add mellowtel

​
Configurer package.json

Mets à jour ton package.json pour inclure les permissions requises : 
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

​
Définir les Variables d’Environnement

Crée ou mets à jour ton fichier .env : 
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
Assure-toi de remplacer your_mellowtel_api_key_here par ta véritable clé API Mellowtel depuis le tableau de bord.

​
Implémentation

​
Configuration du Script d’Arrière-plan

Crée ou modifie ton script d’arrière-plan (background.ts) : 
import Mellowtel from "mellowtel"

let mellowtel;

(async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  await mellowtel.initBackground()
})()

// Gérer l'installation et les mises à jour
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("Extension Installée ou Mise à Jour", details)
  await mellowtel.generateAndOpenOptInLink()
})

​
Configuration du Script de Contenu

Crée ou modifie ton script de contenu (content.ts) : 
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// Configurer le comportement du script de contenu
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()

​
Implémentation du Popup

Crée ou modifie ton composant 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}>
        Modifier les Paramètres Mellowtel
      </button>
    </div>
  )
}

export default Popup

​
Commandes de Développement

Utilise ces commandes pendant le développement : 
# Démarrer le serveur de développement
pnpm dev

# Construire pour la production
pnpm build

# Packager l'extension
pnpm package
  1. Teste toujours ton extension de manière approfondie dans les environnements de développement et de production
  2. Surveille la console pour tout avertissement ou erreur lié à Mellowtel
  3. Teste le flux d’opt-in du point de vue de l’utilisateur
  4. Vérifie que le lien des paramètres fonctionne correctement
  5. Assure-toi que toutes les permissions sont correctement configurées

​
Tests

Avant de soumettre ton extension :
  1. Teste le flux d’installation
  2. Vérifie que le processus d’opt-in fonctionne
  3. Vérifie que la page des paramètres est accessible
  4. Confirme que toutes les permissions fonctionnent correctement
  5. Teste sur différents navigateurs si tu cibles plusieurs plateformes
Pour plus d’informations sur les fonctionnalités et l’API de Mellowtel, visite le Quickstart.
Besoin d’aide ? Rejoins notre communauté Discord pour obtenir du support.