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

Development Best Practices

Always test your extension thoroughly in both development and production environments
Monitor the console for any Mellowtel-related warnings or errors
Test the opt-in flow from a user’s perspective
Verify that the settings link works correctly
Ensure all permissions are properly configured

Testing

Before submitting your extension:

Test the installation flow
Verify the opt-in process works
Check that the settings page is accessible
Confirm all permissions are working correctly
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.

​Manual Installation

​Install Dependencies

​Configure package.json

​Set Environment Variables

​Implementation

​Background Script Setup

​Content Script Setup

​Popup Implementation

​Development Commands

​Testing

Manual Installation

Install Dependencies

Configure package.json

Set Environment Variables

Implementation

Background Script Setup

Content Script Setup

Popup Implementation

Development Commands

Testing