تطبيق JavaScript: دليل شامل لإنشاء السكربتات المخصصة للمستخدم (User Scripts)

مقدمة إلى السكربتات المخصصة للمستخدم (User Scripts)

تُعد كتابة السكربتات المخصصة للمستخدم (User Scripts) طريقة ممتعة لتطبيق مهاراتك في JavaScript. إنها تُخرجك من بيئة المحرر إلى المتصفح مباشرةً، مما يمنحك ملاحظات وتحققًا فوريًا.

السكربتات المخصصة للمستخدم (المعروفة أيضًا بـ Userscripts، User scripts، أو .user.js) هي إضافات مفتوحة المصدر للمتصفحات تقوم بتغيير صفحات الويب أثناء تحميلها. تمنح هذه السكربتات المستخدمين القدرة على جعل المواقع تفعل ما يريدونه هم، بدلاً مما كان مقصودًا أصلاً. تُكتب User Scripts بلغة JavaScript وتتيح لك تعديل مظهر صفحة الويب وسلوكها في متصفحك. هذه السكربتات تؤثر على متصفحك فقط، وليس على صفحة الويب الفعلية.

تحذير سريع

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

لماذا السكربتات المخصصة للمستخدم؟

تقدم Free Code Camp العديد من المشاريع الواقعية الرائعة التي ستُثري مجموعة مهاراتك ومحفظة أعمالك. شخصيًا، أستمتع باستخدام المهارات التي تعلمتها في JavaScript وjQuery وCSS لتعديل تجربتي اليومية في التصفح. بعض User Scripts أصبحت شائعة للغاية وتم تحويلها إلى إضافات للمتصفح. مثال على ذلك هو Reddit Enhancement Suite. يمكنك أنت أيضًا استخدام User Script الخاص بك كأساس لإضافة متصفح!

البدء

تُشغل User Scripts من خلال إضافات المتصفح نفسها. كان Greasemonkey (لـ Firefox) هو الإضافة الرائدة التي سمحت للأشخاص بتخصيص تجربة تصفحهم. قم بتثبيت المكون الإضافي المناسب لمتصفحك:

• لـ Firefox: Greasemonkey
• لـ Chrome: Tampermonkey

لهذا الدليل، سنستخدم Chrome مع Tampermonkey. لا ينبغي أن تكون هناك أي اختلافات جوهرية في العملية بعد تثبيت Greasemonkey أو Tampermonkey.

المشروع: تعديل صفحة Hacker News الرئيسية

سنقوم بإجراء تغيير طفيف على الصفحة الرئيسية لموقع Hacker News (http://news.ycombinator.com). سنستخدم jQuery لجعل ألوان خلفية الروابط المتناوبة مختلفة قليلاً لتحسين قابلية القراءة.

بدء سكربت جديد

انقر على أيقونة Tampermonkey في الزاوية العلوية اليمنى واختر ‘Add a new script’ من مربع الحوار. سيتم نقلك إلى علامة تبويب جديدة.

ملء المعلومات

بعد بدء سكربت جديد، أول شيء نرغب في فعله هو ملء معلومات السكربت في الأعلى. قم بملء السمات التالية كما يحلو لك: name، description، author.

أضف jQuery مباشرة قبل السطر // ==/UserScript==. أضف سطرًا يحتوي على النص التالي:

// @require http://code.jquery.com/jquery-latest.js

فكر في هذا على أنه استيراد أو طلب jQuery لمشروع JS.

اختبار تحميل السكربت

لنرى ما إذا كان سكربتنا سيُحمّل على http://news.ycombinator.com وأن jQuery جاهزة للعمل. بعد السطر // your code here، أضف الكود التالي:

$( document ).ready( function ( ) { alert( 'WINNING' );});

ثم اضغط Ctrl + s أو انقر على زر الحفظ على اليسار. قد يتم نقلك إلى صفحة السكربتات المثبتة. إذا لم يكن كذلك، انقر على علامة التبويب Installed userscripts. هذا يعني أن السكربت الخاص بنا تم تحميله في Tampermonkey. النقطة الخضراء على اليسار تعني أن السكربت قيد التشغيل.

تنفيذ السكربت

زر Hacker News في متصفحك، وإذا كنت تتبع الخطوات بشكل صحيح وسار كل شيء على ما يرام، يجب أن ترى مربع حوار alert يعمل.

تشغيل المصحح (Debugger)

حان الوقت للعثور على عناصر المنشور التي نريد تعديلها. اضغط Ctrl + Shift + i لإظهار مصحح المتصفح (browser debugger). الآن نريد تحديد عنصر لإلقاء نظرة فاحصة عليه. النقر على المربع الأزرق الذي يحتوي على الماوس في الجزء العلوي الأيسر من المصحح سيفتح محدد العناصر (element selector). يمكنك أيضًا استخدام الأمر Ctrl + Shift + c.

كما ترى، لقد وجدت عنصرًا يسمى td.title. بعد النقر عليه، يتم تمييز العنصر في علامة تبويب العناصر (elements tab) في المصحح. تمييز العنصر الذي يعلو عنواننا والذي يسمى <tr class = "athing" > يحدد هذا في المتصفح.

لقد وجدنا العنصر الذي نريده. يتميز Hacker News بتخطيط HTML نظيف، لذا لم يكن من الصعب جدًا العثور على العنصر المستهدف. إذا كنت تتذكر jQuery الخاص بك، فكل ما عليك فعله للعثور على جميع عناصر المنشور هو استخدام المحدد:

$( '.athing' )

تعديل عناصر المنشور

الآن بعد أن أصبح لدينا طريقة لتحديد عنصرنا باستخدام jQuery، يمكننا تعديل العنصر. دعنا نغير لون خلفية المنشورات باستخدام الكود التالي. قم بتغيير كود $(document).ready() إلى هذا:

$( document ).ready( function ( ) { $( '.athing' ).css( 'background-color' , '#DDD' );});

ملاحظة: #DDD هو اختصار لـ #DDDDDD. دعنا نلقي نظرة على الصفحة الناتجة. تذكر حفظ userscript الخاص بك ثم تحديث صفحة Hacker News. قد تحتاج إلى إغلاق المصحح لعرض الصفحة بأكملها.

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

jQuery لإنقاذ الموقف: المحدد :odd

لا داعي للقلق أيها المبرمجون. لقد جاءت jQuery للإنقاذ مرة أخرى. توفر jQuery محددات خاصة لمناسبة كهذه. نقدم لكم المحدد :odd.

كل ما علينا فعله هو إضافة :odd إلى نهاية المحدد الخاص بنا بحيث يصبح السطر بهذا الشكل. ملاحظة: لقد غيرت اللون أيضًا إلى #EEE ليتناسب بشكل أفضل.

$( '.athing:odd' ).css( 'background-color' , '#EEE' );

احفظ السكربت الخاص بك وقم بتحديث Hacker News ويجب أن ترى المنتج النهائي.

الخاتمة

ها قد انتهيت! الآن لديك منفذ إبداعي آخر لإطلاق العنان لمهاراتك البرمجية الناشئة. يمكن استخدام User Scripts لتعديل وظائف أو مظهر موقع ما، أو لإضافة ميزة طالما رغبت بها، بالإضافة إلى الكثير غير ذلك.

واجب منزلي

اكتب User Script خاصًا بك لإضافة شيء إلى موقع ويب تستخدمه غالبًا. سواء كان ذلك تعديلًا في التصميم أو زرًا يمكنه تبديل رؤية عناصر معينة، فالأمر متروك لك تمامًا.

للمزيد من القراءة

• Tampermonkey
• GreaseSpot Wiki
• Greasy Fork – safe and useful user scripts
• Getting Started: Building a Chrome Extension
• How to develop a Firefox extension