Project Setup
Start with a basic browser extension structure:Getting the Mellowtel Bundle
You have two options to get themellowtel.js
file for your extension:
Option 1: Use Pre-bundled File
The easiest way to get started is to use the pre-bundledmellowtel.js
file from the mellowtel-bundled repository.
- Go to the mellowtel-bundled repository
- Download the
mellowtel.js
file - Copy it to your extension directory
Option 2: Generate Your Own Bundle
If you prefer to generate the bundle yourself, follow these steps:Create a Temporary Bundling Directory
Create a temporary directory to install Mellowtel and generate the bundle:Bundle Mellowtel with esbuild
From inside themellowtel-bundling
directory, create a single bundle that works in both service workers and content scripts:
- Takes the Mellowtel source from
node_modules/mellowtel/dist/index.js
- Bundles all dependencies into a single file
- Uses IIFE format with a global name for universal compatibility
- Adds a footer to make the default export available globally
- Optimizes for browser environment and minifies the output
- Creates
mellowtel.js
in the bundling directory
Copy the Bundle to Your Extension
After running the esbuild command, copy the generated file to your extension directory:Configure Your Manifest (Both Options)
Regardless of which option you chose above, configure yourmanifest.json
to include the Mellowtel bundle in content scripts:
- The
"type": "module"
field enables ES module imports in your service worker. - In the content scripts array,
mellowtel.js
must be loaded beforecontent_script.js
so that the Mellowtel global variable is available when your content script runs.
Use Mellowtel in Your Extension
For your service worker (background.js), import the bundled file:Testing Your Extension
To test your extension:- Go to
chrome://extensions/
in Chrome (or equivalent in other browsers) - Enable “Developer mode”
- Click “Load unpacked” and select your extension folder