This guide explains how to integrate Mellowtel into your browser extension without using bundlers like Webpack or Vite. Instead, you’ll use esbuild to create a single pre-bundled file that works in both content scripts and service workers.

​
Step 1: Project Setup

Start with a basic browser extension structure: 
your-extension/
├── icons/
├── popup/
│   ├── popup.html
│   └── popup.js
├── background.js           # Your service worker
├── content_script.js
├── manifest.json
└── mellowtel.js           # Copy from Step 4

​
Step 2: Create a Temporary Bundling Directory

Create a temporary directory to install Mellowtel and generate the bundles: 
mkdir mellowtel-bundling
cd mellowtel-bundling
npm init -y
npm install mellowtel
This creates a separate folder with the Mellowtel package that you’ll use only for bundling.

​
Step 3: Bundle Mellowtel with esbuild

From inside the mellowtel-bundling directory, create a single bundle that works in both service workers and content scripts: 
npx esbuild node_modules/mellowtel/dist/index.js --bundle --format=iife --global-name=Mellowtel --footer:js="globalThis.Mellowtel = Mellowtel.default" --platform=browser --outfile=mellowtel.js --minify --legal-comments=none
This command:
  • 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

​
Step 4: Copy the Bundle to Your Extension

After running the esbuild command, you’ll have one file in the mellowtel-bundling directory:
  • mellowtel.js - For use in both service workers and content scripts
Copy this file to your extension directory: 
cp mellowtel.js ../your-extension/
Now you can delete the temporary bundling directory since you only needed the output file: 
cd ..
rm -rf mellowtel-bundling
Your extension folder now contains the bundled Mellowtel file ready to use.

​
Step 5: Configure Your Manifest

Configure your manifest.json to include the Mellowtel bundle in content scripts: 
{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0",
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["mellowtel.js", "content_script.js"]
    }
  ],
  "permissions": [
    "storage",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]
}
Important:
  • The "type": "module" field enables ES module imports in your service worker.
  • In the content scripts array, mellowtel.js must be loaded before content_script.js so that the Mellowtel global variable is available when your content script runs.

​
Step 6: Use Mellowtel in Your Extension

For your service worker (background.js), import the bundled file: 
// background.js
import './mellowtel.js';

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // Replace with your configuration key
    await mellowtel.initBackground();
})();
For content scripts, Mellowtel is available as a global variable (no import needed, as it’s loaded via the manifest): 
// content_script.js
// Mellowtel is available as a global variable from mellowtel.js

(async () => {
  const mellowtel = new Mellowtel("<configuration_key>"); // Replace with your configuration key
  await mellowtel.initContentScript();
})();

​
Step 7: Testing Your Extension

To test your extension:
  1. Go to chrome://extensions/ in Chrome (or equivalent in other browsers)
  2. Enable “Developer mode”
  3. Click “Load unpacked” and select your extension folder
This approach gives you the benefits of using Mellowtel without the complexity of setting up a full build system like Webpack or Vite.