دليل وحدة Mellowtel Pascoli لإضافات المتصفح

هاد الميزة تتطلب نسخة Mellowtel 1.6.2 أو أعلى. هاد تغيير كبير مقارنة بالإصدارات السابقة.

Mellowtel توفر ميزة اختيارية تخليك تتعامل مع طلبات أكثر وبالتالي تربح أكثر. هاد الميزة تسمى “Pascoli”.

التثبيت

أول حاجة، ثبّت حزمة npm المطلوبة باستخدام مدير الحزم اللي تفضلو:

باستخدام npm

npm install @mellowtel/module-pascoli

باستخدام yarn

yarn add @mellowtel/module-pascoli

باستخدام pnpm

pnpm add @mellowtel/module-pascoli

تحت هنا التعليمات لتفعيل ميزة Pascoli في إضافة المتصفح ديالك، مع خيارات للتنفيذ القياسي وتنفيذ إطار Plasmo.

التنفيذ القياسي

1. إنشاء ملف HTML باسم `pascoli.html`

أنشئ ملف باسم pascoli.html وزيد الكود التالي. تأكد بلي هاد الملف يتضمن في البنية النهائية (/dist) ديالك. إذا تبعت الإعداد الأولي لإعداد webpack، تقدر ببساطة تضيف هاد الملف في مجلد public كـ pascoli.html

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

تأكد بلي تعدل خاصية src في وسم السكريبت باش تشير للمكان الصحيح لملف pascoli.js في البنية النهائية

2. إنشاء ملف JavaScript باسم `pascoli.js`

في مجلد src، أو فين ما عندك ملفات js، أنشئ ملف باسم pascoli.js وزيد الكود التالي. تأكد بلي هاد الملف يتضمن في البنية النهائية (/dist) ديالك. إذا تبعت الإعداد الأولي لإعداد webpack، تقدر ببساطة تضيف هاد الملف في كائن entry في إعدادات webpack ديالك.

import ModulePascoli from "@mellowtel/module-pascoli";

let modulePascoli;

(async () => {
    modulePascoli = new ModulePascoli();
    await modulePascoli.init();
})();

3. تحديث إعدادات webpack

تأكد بلي مجلد البنية النهائية يتضمن ملفات pascoli.html و pascoli.js. زيد التالي لإعدادات webpack ديالك باش تضمن بلي pascoli.js يتضمن في البنية:

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 وزدتوه في مجلد public.

4. تحديث manifest.json

زيد ملف pascoli.html في manifest.json ديالك كـ web_accessible_resources:

{
  "web_accessible_resources": [
    {
      "resources": [
        "pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

تنفيذ إطار Plasmo

إذا كنت تستخدم إطار Plasmo، تبع هاد الخطوات البديلة:

1. إنشاء مكون PascoliPage

أنشئ ملف باسم pascoli.tsx في مجلد tabs ديالك. إذا ما عندكش مجلد tabs، أنشئ واحد. مزيد من المعلومات حول tabs في إطار Plasmo تقدر تلقاها هنا. زيد الكود التالي في ملف pascoli.tsx:

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 (
        <div
            style={{
                padding: 0,
                margin: 0,
                height: "100vh",
                width: "100vw",
                overflow: "hidden",
                backgroundColor: "transparent"
            }}>
        </div>
    )
}

export default PascoliPage

2. تحديث package.json لـ Plasmo

زيد التالي في ملف package.json ديالك:

{
  "web_accessible_resources": [
    {
      "resources": [
        "tabs/pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

تحديث initContentScript

بالنسبة للتنفيذين، عدل طريقة initContentScript في سكريبت المحتوى باش تشمل المسار الصحيح لملف Pascoli:

// بالنسبة للتنفيذ القياسي
await initContentScript({
    pascoliFilePath: "pascoli.html"
});

بالنسبة لإطار Plasmo، تقدر تستخدم التالي:

// بالنسبة لإطار Plasmo
await initContentScript({
    pascoliFilePath: "tabs/pascoli.html"
});

​التثبيت

​باستخدام npm

​باستخدام yarn

​باستخدام pnpm

​التنفيذ القياسي

​1. إنشاء ملف HTML باسم pascoli.html

​2. إنشاء ملف JavaScript باسم pascoli.js

​3. تحديث إعدادات webpack

​4. تحديث manifest.json

​تنفيذ إطار Plasmo

​1. إنشاء مكون PascoliPage

​2. تحديث package.json لـ Plasmo

​تحديث initContentScript

التثبيت

باستخدام npm

باستخدام yarn

باستخدام pnpm

التنفيذ القياسي

1. إنشاء ملف HTML باسم `pascoli.html`

2. إنشاء ملف JavaScript باسم `pascoli.js`

3. تحديث إعدادات webpack

4. تحديث manifest.json

تنفيذ إطار Plasmo

1. إنشاء مكون PascoliPage

2. تحديث package.json لـ Plasmo

تحديث initContentScript