Here you will learn how to monetize your Plasmo browser extension by integrating Mellowtel. Estimated time to complete: 5-15 minutes.

​
Manual Installation

If you have an existing Plasmo project, follow these steps to add Mellowtel integration.

​
Install Dependencies

First, add the Mellowtel package to your project:

pnpm add mellowtel

​
Configure package.json

Update your package.json to include the required permissions:

{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

​
Set Environment Variables

Create or update your .env file:

PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here

Make sure to replace your_mellowtel_api_key_here with your actual Mellowtel API key from the dashboard.

​
Implementation

​
Background Script Setup

Create or modify your background script (background.ts):

import Mellowtel from "mellowtel"

let mellowtel;

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

// Handle installation and updates
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("Extension Installed or Updated", details)
  await mellowtel.generateAndOpenOptInLink()
})

​
Content Script Setup

Create or modify your content script (content.ts):

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

let mellowtel;

// Configure content script behavior
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()

Create or modify your 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}>
        Change Mellowtel Settings
      </button>
    </div>
  )
}

export default Popup

​
Development Commands

Use these commands during development:

# Start development server
pnpm dev

# Build for production
pnpm build

# Package the extension
pnpm package

​
Testing

Before submitting your extension:

  1. Test the installation flow
  2. Verify the opt-in process works
  3. Check that the settings page is accessible
  4. Confirm all permissions are working correctly
  5. Test on different browsers if targeting multiple platforms

For additional information about Mellowtel’s features and API, visit the Quickstart.

Need help? Join our Discord community for support.

Suggest editsRaise issue
Submit to Safari StoreWXT