> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrating Mellowtel without Bundlers

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

## 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           # Will be added in next step
```

## Getting the Mellowtel Bundle

You have two options to get the `mellowtel.js` file for your extension:

### Option 1: Use Pre-bundled File

The easiest way to get started is to use the pre-bundled `mellowtel.js` file from the [mellowtel-bundled repository](https://github.com/mellowtel-inc/mellowtel-bundled).

1. Go to the [mellowtel-bundled repository](https://github.com/mellowtel-inc/mellowtel-bundled)
2. Download the `mellowtel.js` file
3. 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:

```bash theme={null}
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.

#### Bundle Mellowtel with esbuild

From inside the `mellowtel-bundling` directory, create a single bundle that works in both service workers and content scripts:

```bash theme={null}
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

#### Copy the Bundle to Your Extension

After running the esbuild command, copy the generated file to your extension directory:

```bash theme={null}
cp mellowtel.js ../your-extension/
```

Now you can delete the temporary bundling directory since you only needed the output file:

```bash theme={null}
cd ..
rm -rf mellowtel-bundling
```

Your extension folder now contains the bundled Mellowtel file ready to use.

## Configure Your Manifest (Both Options)

Regardless of which option you chose above, configure your `manifest.json` to include the Mellowtel bundle in content scripts:

```json theme={null}
{
  "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.

## Use Mellowtel in Your Extension

For your service worker (background.js), import the bundled file:

```javascript theme={null}
// 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):

```javascript theme={null}
// 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();
})();
```

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