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 uit 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()
})

Inhoudsscript Instellen

Maak of wijzig je inhoudsscript (content.ts):

import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// Configureer het gedrag van het inhoudsscript
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()

Pop-up Implementatie

Maak of wijzig je pop-up 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}>
        Mellowtel Instellingen Wijzigen
      </button>
    </div>
  )
}

export default Popup

Ontwikkelingscommando’s

Gebruik deze commando’s tijdens de ontwikkeling:

# Start ontwikkelserver
pnpm dev

# Bouw voor productie
pnpm build

# Verpak de extensie
pnpm package

Beste Praktijken voor Ontwikkeling

Test je extensie altijd grondig in zowel ontwikkel- als productieomgevingen
Houd de console in de gaten voor eventuele Mellowtel-gerelateerde waarschuwingen of fouten
Test de opt-in flow vanuit het perspectief van een gebruiker
Controleer of de instellingenlink correct werkt
Zorg ervoor dat alle permissies correct zijn geconfigureerd

Testen

Voordat je je extensie indient:

Test de installatieflow
Controleer of het opt-in proces werkt
Controleer of de instellingenpagina toegankelijk is
Bevestig dat alle permissies correct werken
Test op verschillende browsers als je meerdere platforms target

Voor meer informatie over de functies en API van Mellowtel, bezoek de Quickstart.

Hulp nodig? Word lid van onze Discord community voor ondersteuning.

​Handmatige Installatie

​Installeer Afhankelijkheden

​Configureer package.json

​Stel Omgevingsvariabelen in

​Implementatie

​Achtergrondscript Instellen

​Inhoudsscript Instellen

​Pop-up Implementatie

​Ontwikkelingscommando’s

​Testen

Handmatige Installatie

Installeer Afhankelijkheden

Configureer package.json

Stel Omgevingsvariabelen in

Implementatie

Achtergrondscript Instellen

Inhoudsscript Instellen

Pop-up Implementatie

Ontwikkelingscommando’s

Testen