Skip to main content
Hier leer je hoe je je Plasmo-browserextensie kunt monetizen door Mellowtel te integreren. Geschatte tijd om te voltooien: 5-15 minuten.

​
Handmatige Installatie

Als je een bestaand Plasmo-project hebt, volg dan deze stappen om Mellowtel-integratie toe te voegen.

​
Installeer Afhankelijkheden

Voeg eerst het Mellowtel-pakket toe aan je project: 
pnpm add mellowtel

​
Configureer package.json

Werk je package.json bij om de vereiste permissies op te nemen: 
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

​
Stel Omgevingsvariabelen in

Maak of werk je .env bestand bij: 
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
Zorg ervoor dat je your_mellowtel_api_key_here vervangt door je daadwerkelijke Mellowtel API-sleutel van het dashboard.

​
Implementatie

​
Achtergrondscript Instellen

Maak of wijzig je achtergrondscript (background.ts): 
import Mellowtel from "mellowtel"

let mellowtel;

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

// Behandel installatie en updates
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("Extensie Geïnstalleerd of Bijgewerkt", details)
  await mellowtel.generateAndOpenOptInLink()
})

​
Content Script Instellen

Maak of wijzig je content script (content.ts): 
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// Configureer content script gedrag
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()
Maak of wijzig je popup component (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}>
        Wijzig Mellowtel Instellingen
      </button>
    </div>
  )
}

export default Popup

​
Ontwikkelingscommando’s

Gebruik deze commando’s tijdens de ontwikkeling: 
# Start ontwikkelingsserver
pnpm dev

# Bouw voor productie
pnpm build

# Verpak de extensie
pnpm package
  1. Test je extensie altijd grondig in zowel ontwikkelings- als productieomgevingen
  2. Monitor de console voor eventuele Mellowtel-gerelateerde waarschuwingen of fouten
  3. Test de opt-in flow vanuit het perspectief van een gebruiker
  4. Verifieer dat de instellingenlink correct werkt
  5. Zorg ervoor dat alle permissies correct zijn geconfigureerd

​
Testen

Voordat je je extensie indient:
  1. Test de installatieflow
  2. Verifieer dat het opt-in proces werkt
  3. Controleer of de instellingenpagina toegankelijk is
  4. Bevestig dat alle permissies correct werken
  5. Test op verschillende browsers als je meerdere platforms target
Voor aanvullende informatie over de functies en API van Mellowtel, bezoek de Quickstart.
Hulp nodig? Word lid van onze Discord community voor ondersteuning.