تطبيق JavaScript: مخطوطات المستخدم

تعد كتابة Userscript طريقة ممتعة لاستخدام مهاراتك في JavaScript. إنه يأخذك من المحرر إلى المتصفح مع ردود الفعل والتحقق من الصحة في الوقت الفعلي.

ما هو نص المستخدم؟

تعد نصوص المستخدمين (المعروفة أيضًا باسم البرامج النصية للمستخدم أو البرامج النصية للمستخدم أو .user.js) من الوظائف الإضافية المرخصة مفتوحة المصدر لمتصفحات الويب التي تغير صفحات الويب عند تحميلها. إنها تمنح المستخدمين القدرة على جعل مواقع الويب تفعل ما يريدون ، بدلاً من ما كان مقصودًا في الأصل.

تتم كتابة البرامج النصية للمستخدم بلغة جافا سكريبت وتسمح لك بتعديل شكل ومظهر صفحة الويب على متصفحك. تؤثر البرامج النصية فقط على متصفحك ، وليس صفحة الويب الفعلية.

تحذير سريع

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

التفسيرات مأخوذة من //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

لماذا البرامج النصية المستخدم؟

يحتوي Free Code Camp على الكثير من مشاريع العالم الحقيقي الرائعة التي ستثري مجموعة مهاراتك ومحفظة أعمالك. أنا شخصياً أحب استخدام المهارات التي تعلمتها في JavaScript و jQuery و CSS لتعديل تصفحي اليومي.

لقد حظيت بعض البرامج النصية للمستخدم بشعبية كبيرة وتم تحويلها إلى ملحقات للمتصفح. مثال على ذلك هو Reddit Enhancement Suite الموجود في //redditenhancementsuite.com/.

يمكنك أيضًا استخدام البرنامج النصي للمستخدم الخاص بك كقاعدة لملحق المتصفح!

ابدء

يتم تشغيل البرامج النصية للمستخدم من امتدادات المتصفح نفسها. كان Grease Monkey (FireFox) هو الرائد الإضافي للسماح للأشخاص بتخصيص تجربة التصفح الخاصة بهم. قم بتثبيت المكون الإضافي المناسب لمتصفحك.

بالنسبة إلى FireFox: Grease Monkey

الشحوم قرد

تتيح لك قناة التطوير اختبار إصدار تجريبي جديد من هذه الوظيفة الإضافية قبل إصدارها للعامة… addons.mozilla.org

للكروم: Tamper Monkey

تامبرمونكي

مدير نصوص المستخدمين الأكثر شيوعًا للمتصفحات المستندة إلى Blink chrome.google.com

في هذا البرنامج التعليمي ، سأستخدم Chrome مع Tamper Monkey.

يجب ألا تكون هناك اختلافات كبيرة مع العملية بعد تثبيت Grease Monkey أو Tamper Monkey.

فقط في حالة حدوث ذلك ، إليك رابط سريع لتثبيت Grease Monkey (بالإضافة إلى عمل بعض الأشياء به.)

دروس Greasemonkey للمبتدئين

في البرنامج التعليمي Greasemonkey ، قمت بتغطية كيفية كتابة نصوص مستخدم Greasemonkey. بعد هذا البرنامج التعليمي ، سوف تكون قادرًا على… hayageek.com

المشروع

سنقوم بإجراء تغيير طفيف على الصفحة الرئيسية على Hacker News //news.ycombinator.com.

سنستخدم jQuery لجعل ألوان خلفية الروابط البديلة مختلفة قليلاً لتحسين إمكانية القراءة.

ابدأ نصًا جديدًا

انقر فوق رمز Tamper Monkey في الجزء العلوي الأيمن وحدد " إضافة نص جديد" من مربع الحوار.

يجب أن يتم نقلك إلى علامة تبويب جديدة تبدو هكذا

املأ المعلومات

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

  • اسم
  • وصف
  • مؤلف

سأريك كيف يبدو لي أيضًا.

أضف jQuery

قبل الخط مباشرة

// ==/UserScript==

أضف سطرًا بنص

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

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

تلك هي خاصتي

مرحبًا script.js!

دعونا نرى ما إذا كان يتم تحميل البرنامج النصي الخاص بنا على //news.ycombinator.com وأن jQuery جيد.

بعد // رمزك هنا ، أضف الكود التالي

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

وأدخل Ctrl + s أو انقر على زر حفظ على اليسار

قد يتم نقلك إلى الصفحة التالية. إذا لم يكن كذلك ، فانقر فوق علامة التبويب نصوص المستخدمين المثبتة.

رائع! يتم تحميل البرنامج النصي الصادر في Tamper Monkey. تعني النقطة الخضراء الموجودة على اليسار أنه تم تشغيل البرنامج النصي. يمكنك حتى رؤية شعار Hacker News في لقطة الشاشة.

تنفيذ البرنامج النصي

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

أطلق النار على المصحح

حان الوقت للعثور على عناصر المنشور التي نريد تعديلها. أدخل Ctrl + Shift + i لإظهار مصحح أخطاء المتصفح.

الآن نريد تحديد عنصر لإلقاء نظرة فاحصة. سيؤدي النقر فوق المربع الأزرق مع الماوس بداخله في الجزء العلوي الأيسر من مصحح الأخطاء إلى فتح محدد العنصر. يمكنك أيضًا استخدام الأمر الرئيسي Ctrl + Shift + c .

كما ترى وجدت عنصرًا يسمى td.title . بعد النقر عليه ، يتم تمييز العنصر في علامة تبويب العناصر في مصحح الأخطاء (كما هو موضح أعلاه).

تسليط الضوء على العنصر فوق عنواننا يسمى

يختار هذا في المتصفح

بنغو. يبدو أننا وجدنا العنصر الذي نريده. يحتوي Hacker News على تخطيط HTML نظيف ، لذا لم يكن من الصعب جدًا العثور على العنصر المستهدف.

إذا كنت تتذكر jQuery ، فكل ما عليك فعله للعثور على جميع عناصر التدوين هو استخدام المحدد

$('.athing')

افعل شيئًا لعنصر المشاركة لدينا

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

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

ملحوظة: #DDD هو اختصار لـ #DDDDDD ؛

دعونا نلقي نظرة على الصفحة الناتجة. تذكر حفظ نص المستخدم الخاص بك ثم تحديث صفحة HackerNews. قد تضطر إلى إغلاق مصحح الأخطاء لعرض الصفحة بأكملها.

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

أوه لا ؟! ماذا نفعل ... لا أريد أن أكتب أي حلقات!

مسج للإنقاذ

لا تخف يا رفاق المعسكر. لقد حان jQuery للإنقاذ مرة أخرى.

يوفر jQuery محددات خاصة لمناسبة كهذه فقط.

نقدم الآن : غريب

: محدد فردي

الوصف: يختار العناصر الفردية ، بدون فهرسة. انظر أيضا. على وجه الخصوص ، لاحظ أن الفهرسة المستندة إلى 0 تعني ... api.jquery.com

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

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

احفظ البرنامج النصي وقم بتحديث HackerNews وسترى هذا المنتج النهائي

اختتام

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

واجب منزلي

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

انطلق وقهر المعسكر!

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

تامبرمونكي

يعد Tampermonkey امتدادًا مجانيًا للمتصفح ومدير نصوص المستخدمين الأكثر شيوعًا للمتصفحات القائمة على Blink مثل Chrome… tampermonkey.net GreaseSpot Wiki

GreaseSpot هو توثيق المجتمع للبرمجة النصية للمستخدم مع Greasemonkey. wiki.greasespot.net Greasy Fork - نصوص مستخدم آمنة ومفيدة

تتيح لك البرامج النصية للمستخدم التحكم في تجربة التصفح الخاصة بك. بمجرد التثبيت ، يقومون تلقائيًا بإنشاء المواقع التي ... greasyfork.org الشروع في العمل: إنشاء ملحق Chrome

تسمح لك الإضافات بإضافة وظائف إلى Chrome دون التعمق في التعليمات البرمجية الأصلية. يمكنك إنشاء ... developer.chrome.com جديد كيفية تطوير امتداد Firefox

هذه المدونة قديمة جدا. إذا كنت ترغب في الحصول على دليل أحدث لتطوير الامتدادات ، يرجى قراءة How to… blog.mozilla.org الجديد