> ## 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.
# 通过启用附加功能 Pascoli 赚取更多
此功能需要 Mellowtel 版本 1.6.2 或更高版本。与之前的版本相比，这是一个重大变化。
Mellowtel 提供了一个可选功能，允许你处理更多请求，从而赚取更多收益。此功能称为“Pascoli”。
## 安装
首先，使用你喜欢的包管理器安装所需的 npm 包：
### 使用 npm
```bash theme={null}
npm install @mellowtel/module-pascoli
```
### 使用 yarn
```bash theme={null}
yarn add @mellowtel/module-pascoli
```
### 使用 pnpm
```bash theme={null}
pnpm add @mellowtel/module-pascoli
```
以下是如何在你的浏览器插件中启用 Pascoli 功能的说明，提供了标准和 Plasmo 框架实现的选项。
## 标准实现
### 1. 创建一个名为 `pascoli.html` 的 HTML 文件
创建一个名为 `pascoli.html` 的文件，并添加以下代码。确保此文件包含在你的最终构建（/dist）目录中。
如果你遵循了初始的 [webpack 配置设置](/browser-plugins/static-to-webpack)，你可以简单地将此文件添加到 `public` 目录中作为 `pascoli.html`
```html theme={null}
```
确保修改 script 标签的 `src` 属性以指向你最终构建中 `pascoli.js` 文件的正确位置
### 2. 创建一个名为 `pascoli.js` 的 JavaScript 文件
在 src 目录中，或你放置 js 文件的任何位置，创建一个名为 `pascoli.js` 的文件，并添加以下代码。确保此文件包含在你的最终构建（/dist）目录中。
如果你遵循了初始的 [webpack 配置设置](/browser-plugins/static-to-webpack)，你可以简单地将此文件添加到你的 webpack 配置中的 `entry` 对象中。
```javascript theme={null}
import ModulePascoli from "@mellowtel/module-pascoli";
let modulePascoli;
(async () => {
modulePascoli = new ModulePascoli();
await modulePascoli.init();
})();
```
### 3. 更新你的 webpack 配置
确保你的最终构建目录包含 `pascoli.html` 和 `pascoli.js` 文件。
在你的 webpack 配置中添加以下内容以确保 `pascoli.js` 包含在构建中：
```javascript theme={null}
module.exports = {
mode: 'development', // 生产构建使用 'production'
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'),
},
// ...
}
```
如果你遵循了初始的 [webpack 配置设置](/browser-plugins/static-to-webpack) 并将其添加到 `public` 目录中，`pascoli.html` 也应该自动包含在你的构建目录中。
### 4. 更新 manifest.json
将 `pascoli.html` 文件添加到你的 `manifest.json` 中作为 web\_accessible\_resources：
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Plasmo 框架实现
如果你使用的是 Plasmo 框架，请按照以下替代步骤操作：
### 1. 创建 PascoliPage 组件
在你的 `tabs` 目录中创建一个名为 `pascoli.tsx` 的文件。如果你没有 `tabs` 目录，请创建一个。有关 Plasmo 框架中 `tabs` 的更多信息，请参阅 [这里](https://docs.plasmo.com/framework/tab-pages)。将以下代码添加到 `pascoli.tsx` 文件中：
```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. 为 Plasmo 更新 package.json
在你的 `package.json` 文件中添加以下内容：
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## 更新 initContentScript
对于两种实现方式，修改你的内容脚本中的 `initContentScript` 方法以包含 Pascoli 文件的正确路径：
```typescript theme={null}
// 对于标准实现
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
对于 Plasmo 框架，你可以使用以下内容：
```typescript theme={null}
// 对于 Plasmo 框架
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```