اقرأ في هذا المقال
في هذه المقالة سوف نتحدث عن امتدادات المتصفح، ما هي وكيف تعمل، ولمتابعة هذا المقال يجب أن يكون لديك فهم أساسي لجافا سكريبت، كما أنك بحاجة إلى متصفح.
ما هو امتداد المتصفح
امتداد المتصفح: هو شيء تضيفه إلى متصفحك مما يعزز تجربة التصفح لديك من خلال توسيع سعة متصفحك كمثال، فكر في مانع الإعلانات الذي ربما تكون قد قمت بتثبيته على جهازك، هذا يجعل تجربة التصفح لديك أفضل عن طريق منع الإعلانات عند تصفح الويب.
كيفية كتابة امتداد المتصفح
أولًا، سننشئ مجلدًا لإنشاء ملف باسم (manifest.json)، يجب أن يكون ملف البيان ملفًا في أي امتداد للمتصفح، يحتوي هذا الملف على بيانات أساسية حول امتدادات مثل: الاسم والإصدار وما إلى ذلك، الآن داخل ملف (manifest.json)، انسخ التالي:
{
“manifest_version”:2,
“version”:”1.0″,
“name”:”Test”,
}
كيفية تحميل ملف الامتداد
لمستخدمي (Firefox):
- في شريط العناوين، ابحث عن هذا:
about:debugging#/runtime/this-firefox
- سترى خيار تحميل الوظيفة الإضافية المؤقتة، انقر فوق هذا الخيار واختر ملف (manifest.json).
لمستخدمي جوجل كروم:
- في شريط العناوين، ابحث عن هذا:
chrome://extensions.
ولتحميل ملف الامتداد اتبع ما يلي:
- قم بتمكين وضع المطور وقم بالتبديل إليه.
- انقر فوق الزر (Load unpacked) وحدد دليل الامتداد.
لقد قمت بتثبيت الامتداد، لكن الامتداد لا يفعل أي شيء حاليًا، الآن دعنا نضيف بعض الوظائف، للقيام بذلك، سنقوم بتحرير ملف (manifest.json) كالتالي:
{
“manifest_version”:2,
“version”:”1.0″,
“name”:”Test”,
“content_scripts”:[
{
“matches”:[“<all_urls>”],
“js”:[“main.js”]
}
]
}
كيفية تخصيص امتداد المتصفح
ما سنفعله الآن هو إنشاء امتداد ويب يغير جميع صور صفحة الويب التي نزورها إلى صورة نختارها، لهذا ما عليك سوى إضافة أي صورة إلى الدليل الحالي وتغيير ملف (main.js) إلى:
console.log(“The extension is up and running”);
var images = document.getElementsByTagName(‘img’)
for (elt of images){
elt.src = `${browser.runtime.getURL(“pp.jpg”)}`
elt.alt = ‘an alt text’
}
نحتاج إلى إبلاغ النص البرمجي للمحتوى الخاص بنا عن ملف (pp.jpg) عن طريق تحرير ملف (manifest.json) إلى:
{
“manifest_version”:2,
“version”:”1.0″,
“name”:”Test”,
“content_scripts”:[
{
“matches”:[“<all_urls>”],
“js”:[“main.js”]
}
],
“web_accessible_resources”: [
“pp.jpg”
]
}
