ملحقات المتصفح هي وظائف إضافية للمتصفحات تُستخدم لإضافة جماليات إلى الموقع وتوفير تجربة مستخدم مثالية أيضًا.
يعد مفهوم النص البرمجي للمحتوى في تطوير الامتدادات معرفة مفيدة جدًا يجب أن يكتسبها المطورون على حدٍ سواء حيث أنه يوسع بشكل كبير حالات استخدام ملحقات المتصفح.

تهدف هذه المقالة إلى التعريف بالنصوص البرمجية للمحتوى وكيفية عملها. سيكون هناك أيضًا مشروع تجريبي ستتم فيه مناقشة أساسيات ملحقات Chrome وسيتم استخدام نص برمجي بسيط للمحتوى في ملحقنا. مع ذلك، دعونا نبدأ.

فهم البرامج النصية للمحتوى

أولاً، ما هو البرنامج النصي للمحتوى؟ البرامج النصية للمحتوى هي رموز JavaScript يتم تنفيذها عند التفاعل مع صفحات الويب عبر ملحق المتصفح لتعديل صفحة الويب.

يمكن تحقيق ذلك بسهولة من خلال التفاعل مع نموذج كائن مستند صفحة الويب. نموذج كائن مستند صفحة الويب هو البنية الأولية لصفحة الويب المحددة. عادةً ما يُطلق على الطريقة التي تعمل بها البرامج النصية لمحتوى Chrome لتعديل صفحة الويب المعنية اسم injection.

بعد أن حصلنا على مقدمة موجزة عن البرامج النصية للمحتوى، سنواصل بعد ذلك تنفيذها على صفحات الويب الخاصة بنا. ولكن قبل ذلك، نحتاج إلى إعداد ملحق المتصفح الخاص بنا والذي سيعمل على تشغيل البرنامج النصي.

إعداد ملحق Chrome الخاص بك

يعد إعداد ملف ملحق Chrome أمرًا سهلاً للغاية. لمزيد من ملحقات البناء المرجعية، مرفق أدناه رابط لصفحة وثائق ملحق Chrome.
يجب أن يشتمل ملحق Chrome المثالي على ملف Manifest.json مفصل جيدًا والذي يوفر معلومات الخلفية الافتراضية حول ملحق Chrome.
كما يتم أيضًا تضمين ملف JS المناسب المطلوب تنفيذه. تساعد الملفات الإضافية الأخرى (HTML وCSS) في توفير المظهر الجمالي للامتداد.
مع ذلك، دعونا نمضي قدمًا في بناء الامتداد الخاص بنا، والذي يشتمل على حقن النص البرمجي للمحتوى الخاص بنا. سنوضح قوة البرامج النصية للمحتوى من خلال إنشاء ملحق Chrome الذي يعرض زرًا متراكبًا على أي صفحة ويب نشطة ننتقل إليها.

كتابة ملف مانفيست

في هذا القسم، سيتم تسليط الضوء على أجزاء ملف البيان ومناقشتها. هنا هو رمز ملف البيان للمشروع.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

إصدار البيان: عادةً ما يتم طلب إصدار البيان. بشكل افتراضي، يتم تعيينه على 3. حيث إنها ترقية أفضل بكثير من الإصدار 2.
الاسم: يتم أيضًا كتابة اسم الامتداد في ملف البيان. في حالتي، يسمى المشروع زر الإضافة. ويمكن تعديل ذلك ليناسب تفضيلات المستخدم.
يتم أيضًا إدخال إصدار ملحق Chrome. في حالتنا، هذا هو الإصدار الأول من الامتداد ومن ثم تم تسميته 1.0، ويمكن أن تؤدي التحسينات اللاحقة على هذا الامتداد إلى تعديل الملف لزيادة الإصدارات على التوالي.
الوصف: وصف لما يفعله الامتداد يمنح أيضًا مصداقية لامتداد Chrome للمستخدمين غير التقنيين للامتداد.

النقاط اللاحقة المثارة مقنعة جدًا في بناء نصوص المحتوى.

يسلط كائن الأذونات الضوء على مسار تنفيذ البرامج النصية للمحتوى. ويمنع هذا أيضًا تشغيل البرامج النصية للمحتوى في علامات التبويب وصفحات الويب غير المتوقعة. فهو يسمح لنا بإدراج جميع الأذونات التي قد تتطلبها إضافة Chrome. قد تحتاج بعض ملحقات Chrome إلى الوصول إلى مساحة تخزين المتصفح وواجهات برمجة تطبيقات Chrome الأخرى وبعض المواقع المعنية. في حالتنا بالنسبة لهذا المشروع، فإننا نقصر امتداد Chrome الخاص بنا على علامة تبويب المتصفح النشطة المستخدمة فقط. من المهم أن يتم تطبيق ذلك لتقليل مخاطر امتداد Chrome الذي يضر بالأجزاء الأخرى غير المستخدمة في متصفح Chrome.

سنقوم بعد ذلك بتكوين حقل البرامج النصية للمحتوى في ملف البيان الخاص بنا.
يحدد حقل البرامج النصية للمحتوى ملفات التعليمات البرمجية المتنوعة التي نعتزم إدخالها في صفحة الويب الخاصة بنا.
يحتوي على حقل التطابقات الفرعي الذي يحدد عنوان URL لصفحة الويب التي نريد أن يتم التصرف بناءً عليها. لسهولة الاستخدام، قمنا فقط بتضمين جميع عناوين URL مما يسمح بذلك بالعمل على جميع صفحات الويب التي نصل إليها. ومع ذلك، يمكنك تحديد عنوان URL الذي تنوي إدخاله في قيمة الحقل الفرعي. على سبيل المثال، www.google.com،

"matches": ["https://*.google.com/*"]
run_at": "document_idle

تم أيضًا تحديد ملفات JS التي تحتوي على رمز الحقن. في حالتنا هذه،
يُسمى ملف JS الخاص بنا Content script.js. لقد حددنا أيضًا ملف CSS المستخدم في تصميم هذا المشروع.

وبهذا، حصلنا على تنفيذ مصغر لملف البيان لمشروعنا. سنواصل بعد ذلك كتابة رمز الحقن الخاص بنا في القسم التالي

إنشاء البرامج النصية للمحتوى

من منطلق الحفاظ على بساطة الأمور، سنقوم بإنشاء زر بسيط يظهر عند النقر عليه رسالة تنبيه. من المتوقع أن يغطي هذا الزر صفحة الويب الحالية.
إليك الكود أدناه

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

يمكن تغيير التصميم ليناسب تفضيلاتك ولكن تم تضمين قالب التصميم في مستودع التعليمات البرمجية.

هذه صورة لتطبيقه.

إليك الرابط إلى الكود المصدري الذي يحتوي على تصميم الكود.

التقنيات المتقدمة وحالات الاستخدام

حتى الآن أكملنا المشروع. ومع ذلك، لتعزيز المعرفة، إليك بعض التقنيات المتقدمة وأفضل الممارسات التي يمكنك تنفيذها أيضًا أثناء إنشاء البرامج النصية للمحتوى.

• التفاعل المتبادل مع البرامج النصية لخلفية المتصفح
• تنفيذ مديري حالة البيانات للسماح بالبرمجة النصية الديناميكية
• يسمح دمج واجهات برمجة التطبيقات الخارجية الأخرى بمعالجة البيانات وتحليلها
• توظيف إستراتيجيات التخزين المؤقت لتحسين أداء الامتداد
• دمج البرامج النصية للمحتوى مع العاملين في الخدمة

خاتمة

يمكنك أيضًا التفاعل معي على مدونتي والاطلاع على مقالاتي الأخرى هنا. حتى المرة القادمة، استمر في البرمجة!