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:
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
- 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.