> ## 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.
# Earn more by enabling an additional feature: Pascoli
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
```bash theme={null}
npm install @mellowtel/module-pascoli
```
### Using yarn
```bash theme={null}
yarn add @mellowtel/module-pascoli
```
### Using pnpm
```bash theme={null}
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](/browser-plugins/static-to-webpack), you can simply add this file to the `public` directory as `pascoli.html`
```html theme={null}
```
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](/browser-plugins/static-to-webpack), you can simply add this file to the `entry` object in your webpack config.
```javascript theme={null}
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:
```javascript theme={null}
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](/browser-plugins/static-to-webpack) and added it to the `public` directory.
### 4. Update manifest.json
Add the `pascoli.html` file to your `manifest.json` as web\_accessible\_resources:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## 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](https://docs.plasmo.com/framework/tab-pages). Add the following code to the `pascoli.tsx` file:
```typescript theme={null}
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 (
)
}
export default PascoliPage
```
### 2. Update package.json for Plasmo
Add the following to your `package.json` file:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Update initContentScript
For both implementations, modify your `initContentScript` method in the content script to include the correct path to the Pascoli file:
```typescript theme={null}
// For standard implementation
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
For Plasmo framework, you can use the following:
```typescript theme={null}
// For Plasmo framework
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```