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:Configure package.json
Update yourpackage.json
to include the required permissions:
Set Environment Variables
Create or update your.env
file:
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
):
Content Script Setup
Create or modify your content script (content.ts
):
Popup Implementation
Create or modify your popup component (popup.tsx
):
Development Commands
Use these commands during development:Development Best Practices
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.