Mellowtel Meucci Module Setup for Browser Plugins Guide

This feature requires Mellowtel version 1.6.2 or higher. This is a breaking change compared to previous versions.

Mellowtel provides an optional feature that allows you to handle more requests and therefore earn more. This feature is called “Meucci”.

Installation

First, install the required npm package using your preferred package manager:

Using npm

npm install @mellowtel/module-meucci

Using yarn

yarn add @mellowtel/module-meucci

Using pnpm

pnpm add @mellowtel/module-meucci

Below are instructions for enabling the Meucci feature in your browser plugin, with options for both standard and Plasmo framework implementations.

Standard Implementation

1. Create a JavaScript file named `meucci.js`

In the src directory, or wherever you have js files, create a file named meucci.js and add the following code. Ensure this file gets included in your final build (/dist) directory. If you followed the initial webpack config setup, you can simply add this file to the entry object in your webpack config.

import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();

2. Update your webpack config

Make sure your final build directory includes the meucci.js file. If you followed the initial webpack config setup, you can simply add this file to the entry object in your webpack config.

module.exports = {
    // ...
    entry: {
        // background: path.join(__dirname, 'src', 'background.js'),
        // popup: path.join(__dirname, 'src', 'popup.js'),
        // content_script: path.join(__dirname, 'src', 'content_script.js'), ...
        // pascoli: path.join(__dirname, 'src', 'pascoli.js'),
        meucci: path.join(__dirname, 'src', 'meucci.js'),
        // ...
    },
    // ...
}

3. Update manifest.json

Add the meucci.js file to your manifest.json as web_accessible_resources:

{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Plasmo Framework Implementation

If you’re using the Plasmo framework, follow these alternative steps:

1. Create a TypeScript file named `meucci.ts`

In the src directory, or wherever you have ts files, create a file named meucci.ts and add the following code:

import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();

2. Create Build Script

Create a build-meucci.js file in your project root with the following content:

const esbuild = require('esbuild')
const fs = require('fs')
const path = require('path')

// Function to wait for a directory to exist
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Timeout waiting for directory: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Create the build function
async function buildMeucci() {
  // Build the bundle
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: REPLACE with the path to your meucci.ts file
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Read the bundled file
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Copy to dev and prod directories
  const directories = [ 
    'build/chrome-mv3-dev',
    'build/chrome-mv3-prod',
    'build/firefox-mv2-dev',
    'build/firefox-mv2-prod',
    'build/safari-mv2-dev',
    'build/safari-mv2-prod',
    'build/opera-mv3-dev',
    'build/opera-mv3-prod'
  ] // TODO: REPLACE with the paths to your dev and prod directories

  // Process all directories concurrently
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Waiting for directory: ${dir}`)
      await waitForDirectory(dir)
      // Write the bundled file
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Added meucci.js to ${dir}`)
    } catch (err) {
      console.log(`Skipping ${dir} - ${err.message}`)
    }
  }))

  // Clean up the temporary file
  fs.unlinkSync('meucci.bundled.js')
}

buildMeucci().catch(err => {
  console.error(err)
  process.exit(1)
})

3. Update package.json

Add the following to your package.json file:

{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

You can either:

Run the build script manually after your main build: npm run build:meucci
Or append it to your existing build script with &: "build": "your-existing-build-command & npm run build:meucci"

This will ensure the Meucci file is properly bundled and copied to all build directories in the correct Plasmo structure.

Update initContentScript

For both implementations, modify your initContentScript method in the content script to include the correct path to the Meucci file:

// For standard implementation
await initContentScript({
    meucciFilePath: "meucci.js"
});

For Plasmo framework, you can use the following:

// For Plasmo framework
await initContentScript({
    meucciFilePath: "meucci.js"
});

If you also have Pascoli enabled, you can use the following:

await initContentScript({
    pascoliFilePath: "pascoli.html", // or "tabs/pascoli.html" if using Plasmo framework
    meucciFilePath: "meucci.js"
});

Get Started

Concepts

Desktop Apps

Browser Plugins

Website

Mellowtel Elements

Mobile App

Earn more by enabling an additional feature: Meucci

Installation

Using npm

Using yarn

Using pnpm

Standard Implementation

1. Create a JavaScript file named `meucci.js`

2. Update your webpack config

3. Update manifest.json

Plasmo Framework Implementation

1. Create a TypeScript file named `meucci.ts`

2. Create Build Script

3. Update package.json

Update initContentScript

​Installation

​Using npm

​Using yarn

​Using pnpm

​Standard Implementation

​1. Create a JavaScript file named meucci.js

​2. Update your webpack config

​3. Update manifest.json

​Plasmo Framework Implementation

​1. Create a TypeScript file named meucci.ts

​2. Create Build Script

​3. Update package.json

​Update initContentScript

Installation

Using npm

Using yarn

Using pnpm

Standard Implementation

1. Create a JavaScript file named `meucci.js`

2. Update your webpack config

3. Update manifest.json

Plasmo Framework Implementation

1. Create a TypeScript file named `meucci.ts`

2. Create Build Script

3. Update package.json

Update initContentScript