Here you will see how to implement the Mellowtel library in your extension project. NOTE: Due to browsers single purpose policies, import Mellowtel only if your plugin has users that installed it for bandwidth sharing, getting rewards and AI web access Estimated time to complete: 5-7 minutes.

​
Requirements

Before you start, make sure that:
  1. Your plugin is using Manifest V3. For FireFox plugins, you can use Manifest V2 as well.
  2. Your code is organized in a compiled way, by using Webpack, Rollup, or other bundlers. If you don’t have a bundler set up, first follow the guide here

​
Install npm package

To install the npm package, you can run the following command in your terminal: 
npm install mellowtel

​
Decide implementation

There are two ways you can implement the library in your extension. If you are going to release the extension for the first time on the Web Store follow Option 1. If you already have the extension published on the Web Store read “How to decide?”

​
How to decide?

When you install your extension from the Web Store, does an alert window pop up asking for permission to “Read and change all your data on all websites”? It looks like this:

Alert window asking for permission to Read and change all your data on all websites

If it does, you can follow Option 1. If it doesn’t, you need to follow Option 2.

​
Option 1

If you are releasing the extension for the first time on the Web Store or you are importing the library in an extension that asks for permission to operate on all websites, you can follow Option 1.

​
Set up your manifest

In your manifest.json file modify the permissions and host_permissions sections like this: 
{

  "permissions": [
    "storage",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]

}

​
Set up your service worker (background script)

In your service worker file, you need to import the mellowtel package. Note: The service worker is also known as background script. You can copy and paste the following code into your service worker file by changing the configuration_key with your own key. 
import Mellowtel from "mellowtel";

let mellowtel;

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

​
Set up your content script

You have to import the mellowtel package in content scripts as well. This content script should run in all_frames and <all_urls> at the document_start. We suggest creating a new content script (e.g. content_start_mellowtel.js) where you can copy and paste the following code. Change the configuration_key with your own key. 
import Mellowtel from "mellowtel";

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // Replace with your configuration key
    await mellowtel.initContentScript();
})();
Then remember to add also this content script in your manifest.json file in the content_scripts section alongside any other content script you already have. You can copy and paste the following code by changing the name_of_your_content_script.js with the name you chose. 
{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["<name_of_your_content_script.js>"], // <-- Change here with the name of your content script
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

​
Set up opt-in/opt-out logic

In order to activate Mellowtel, users need to explicitly opt-in to the service. You can implement the opt-in/opt-out logic in two ways:
  1. Using the recommended implementation with the pre-built page provided by Mellowtel.
  2. Creating your own custom opt-in/opt-out elements and using the methods shown here
If you use the recommended implementation, open your service worker file (also known as background script) and add the following code: 
chrome.runtime.onInstalled.addListener(async function(details) {
    console.log("Extension Installed or Updated");
    // If you want to handle first install and updates differently
    /**
    if(details.reason === "install"){
        // call a function to handle a first install
    } else if(details.reason === "update") {
        // call a function to handle an update
    }
    **/
    await mellowtel.generateAndOpenOptInLink();
});
In order to let your users have complete control over their bandwidth, it is required that you leave an easily accessible way for them to change their settings at any moment. You can generate a link by using the method generateSettingsLink(). This method will return a link that will open the Mellowtel settings page where users can decide at any time if they want to opt-in or opt-out. This link should be placed inside the popup, options page or any other place where users can easily access it. For example you can put it in a openSettings() function like this. You can call openSettings() on a button click or any other relevant event: 
async function openSettings() {
    try {
        // Generate and manage the settings link
        const settingsLink = await mellowtel.generateSettingsLink();
        // Log the generated link for debugging
        console.log("Generated Settings Link:", settingsLink);
        // You can now use this link within a popup, options page, or any UI element
    } catch (error) {
        console.error("Error generating settings link:", error);
    }
}
Perfect! Now you are ready to send your extension to the Web Store. Follow the guide here to see how to submit your extension

​
Option 2

Option 2 could potentially disable your extension if not implemented correctly. That’s why it’s not available for all users
If you can’t implement Option 1, please reach out to us on Discord