> ## 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. إنشاء ملف HTML باسم `pascoli.html`
أنشئ ملف باسم `pascoli.html` وزيد الكود التالي. تأكد بلي هاد الملف يتضمن في البنية النهائية (/dist) ديالك.
إذا تبعت الإعداد الأولي [لإعداد webpack](/browser-plugins/static-to-webpack)، تقدر ببساطة تضيف هاد الملف في مجلد `public` كـ `pascoli.html`
```html theme={null}
```
تأكد بلي تعدل خاصية `src` في وسم السكريبت باش تشير للمكان الصحيح لملف `pascoli.js` في البنية النهائية
### 2. إنشاء ملف JavaScript باسم `pascoli.js`
في مجلد src، أو فين ما عندك ملفات js، أنشئ ملف باسم `pascoli.js` وزيد الكود التالي. تأكد بلي هاد الملف يتضمن في البنية النهائية (/dist) ديالك.
إذا تبعت الإعداد الأولي [لإعداد webpack](/browser-plugins/static-to-webpack)، تقدر ببساطة تضيف هاد الملف في كائن `entry` في إعدادات webpack ديالك.
```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'),
},
// ...
}
```
`pascoli.html` خاصو يتضمن في مجلد البنية ديالك أوتوماتيكيا إذا تبعت الإعداد الأولي [لإعداد webpack](/browser-plugins/static-to-webpack) وزدتوه في مجلد `public`.
### 4. تحديث manifest.json
زيد ملف `pascoli.html` في `manifest.json` ديالك كـ web\_accessible\_resources:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## تنفيذ إطار Plasmo
إذا كنت تستخدم إطار Plasmo، تبع هاد الخطوات البديلة:
### 1. إنشاء مكون PascoliPage
أنشئ ملف باسم `pascoli.tsx` في مجلد `tabs` ديالك. إذا ما عندكش مجلد `tabs`، أنشئ واحد. مزيد من المعلومات حول `tabs` في إطار Plasmo تقدر تلقاها [هنا](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. تحديث package.json لـ Plasmo
زيد التالي في ملف `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"
});
```