Mellowtel provides an optional feature that allows you to handle more requests and therefore earn more. This feature is called “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:

<!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:

import Mellowtel from "mellowtel";

let mellowtel;

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

​
3. 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 Mellowtel from "mellowtel"

function PascoliPage() {
    useEffect(() => {
        const initMellowtel = async () => {
            const mellowtel = new Mellowtel("<configuration_key>"); // Replace with your configuration key
            await mellowtel.initPascoli()
        }

        initMellowtel().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: initContentScript("pascoli.html");
  • For Plasmo framework: initContentScript("tabs/pascoli.html");
Suggest editsRaise issue
User FeedbackNPM Package