Mellowtel Pascoli Module 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 “Pascoli”.

Installation

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

Using npm

npm install @mellowtel/module-pascoli

Using yarn

yarn add @mellowtel/module-pascoli

Using pnpm

pnpm add @mellowtel/module-pascoli

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

Standard Implementation

1. Create an HTML file named `pascoli.html`

Create a file named pascoli.html and add the following code. Make sure 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 public directory as pascoli.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" />
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: transparent;
        }
    </style>
    <script type="module" crossorigin src="/pascoli.js"></script>
</head>
<body>
</body>
</html>

Make sure to modify the src attribute of the script tag to point to the correct location of your pascoli.js file in the final build

2. Create a JavaScript file named `pascoli.js`

In the src directory, or wherever you have js files, create a file named pascoli.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 ModulePascoli from "@mellowtel/module-pascoli";

let modulePascoli;

(async () => {
    modulePascoli = new ModulePascoli();
    await modulePascoli.init();
})();

3. Update your webpack config

Make sure your final build directory includes the pascoli.html and pascoli.js files. Add the following to your webpack config to ensure pascoli.js is included in the build:

module.exports = {
    mode: 'development', // Use 'production' for production builds
    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'),
    },
    // ...
}

pascoli.html should be included in your build directory as well automatically if you followed the initial webpack config setup and added it to the public directory.

4. Update manifest.json

Add the pascoli.html file to your manifest.json as web_accessible_resources:

{
  "web_accessible_resources": [
    {
      "resources": [
        "pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Plasmo Framework Implementation

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

1. Create PascoliPage Component

Create a file named pascoli.tsx in your tabs directory. If you don’t have a tabs directory, create one. More info on tabs in the Plasmo framework can be found here. Add the following code to the pascoli.tsx file:

import { useEffect } from "react"
import ModulePascoli from "@mellowtel/module-pascoli"

function PascoliPage() {
    useEffect(() => {
        const initPascoli = async () => {
            const modulePascoli = new ModulePascoli();
            await modulePascoli.init();
        }

        initPascoli().catch(console.error)
    }, [])

    return (
        <div
            style={{
                padding: 0,
                margin: 0,
                height: "100vh",
                width: "100vw",
                overflow: "hidden",
                backgroundColor: "transparent"
            }}>
        </div>
    )
}

export default PascoliPage

2. Update package.json for Plasmo

Add the following to your package.json file:

{
  "web_accessible_resources": [
    {
      "resources": [
        "tabs/pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Update initContentScript

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

// For standard implementation
await initContentScript({
    pascoliFilePath: "pascoli.html"
});

For Plasmo framework, you can use the following:

// For Plasmo framework
await initContentScript({
    pascoliFilePath: "tabs/pascoli.html"
});

Get Started

Concepts

Desktop Apps

Browser Plugins

Website

Mellowtel Elements

Mobile App

Earn more by enabling an additional feature: Pascoli

Installation

Using npm

Using yarn

Using pnpm

Standard Implementation

1. Create an HTML file named `pascoli.html`

2. Create a JavaScript file named `pascoli.js`

3. Update your webpack config

4. Update manifest.json

Plasmo Framework Implementation

1. Create PascoliPage Component

2. Update package.json for Plasmo

Update initContentScript

​Installation

​Using npm

​Using yarn

​Using pnpm

​Standard Implementation

​1. Create an HTML file named pascoli.html

​2. Create a JavaScript file named pascoli.js

​3. Update your webpack config

​4. Update manifest.json

​Plasmo Framework Implementation

​1. Create PascoliPage Component

​2. Update package.json for Plasmo

​Update initContentScript

Installation

Using npm

Using yarn

Using pnpm

Standard Implementation

1. Create an HTML file named `pascoli.html`

2. Create a JavaScript file named `pascoli.js`

3. Update your webpack config

4. Update manifest.json

Plasmo Framework Implementation

1. Create PascoliPage Component

2. Update package.json for Plasmo

Update initContentScript