كيفية جعل فحص تغييرات العناصر دائمًا في متصفحك باستخدام Tampermonkey

تعد ميزة Inspect Element الموجودة في متصفح الويب الخاص بك بمثابة أداة مطور تتيح لك تعديل جوانب الواجهة الأمامية لموقع الويب، بما في ذلك HTML وCSS وJavaScript، وإجراء تغييرات مؤقتة. يمكنك أيضًا القيام بالكثير باستخدام Inspect Element. ومع ذلك، يتم فقدان كافة التغييرات بعد التحديث.

لكن في بعض الأحيان، قد ترغب في الاحتفاظ بالتغييرات لفترة ممتدة أو إضافة وظائف إضافية لتحسين تجربة المستخدم. إحدى الطرق لجعل تغييرات Inspect Element دائمة هي استخدام ملحق Tampermonkey. فهو يتيح لك إضافة نصوص برمجية مخصصة على صفحات الويب، مما يجعل التغييرات دائمة على جهازك المحلي.

دعونا نلقي نظرة على كيفية استخدام Tampermonkey لجعل تغييرات عنصر الفحص دائمة على متصفحك المحلي.

ما هو Tampermonkey وكيف يمكنك تثبيته؟

يعد Tampermonkey، وهو مدير نص المستخدم، امتدادًا شائعًا للمتصفح متاحًا لجميع متصفحات الويب الرئيسية، بما في ذلك Chrome وEdge وOpera Next وFirefox. يتيح لك إنشاء وتشغيل برامج نصية مخصصة وحالية لتعديل صفحات الويب لإصلاحها أو تحسينها.

كما أنه يتميز بمكتبة نصوص المستخدمين التي أنشأها مستخدمون آخرون لـ Tampermonkey. على سبيل المثال، يمكنك استخدام البرنامج النصي للمستخدم Local YouTube Downloader للقيام بذلك قم بتنزيل مقاطع فيديو YouTube باستخدام Tampermonkey أو شاهد مقاطع فيديو YouTube التي تم الإبلاغ عنها دون تسجيل الدخول.

يقوم الملحق بتشغيل نصوص المستخدم المحفوظة بمجرد تحميل صفحة الويب المحددة، مما يجعل التغييرات المقصودة تبدو دائمة.

قبل أن نبدأ في كتابة البرنامج النصي، ستحتاج إلى تثبيت Tampermonkey. لذلك، لنبدأ بتثبيت الامتداد:

1. اذهب الى الصفحة الرسمية لبرنامج تامبرمونكي. وسوف يكتشف متصفح الويب الخاص بك تلقائيًا. إذا لم يكن الأمر كذلك، فانقر فوق أي علامة تبويب من Chrome وMicrosoft Edge وFirefox وSafari وOpera، اعتمادًا على المتصفح الذي تستخدمه.
2. في ال تحميل القسم، انقر على احصل عليه من المتجر. سيتم توجيهك إلى متجر الويب الخاص بالمتصفح الخاص بك.
3. انقر فوق ثَبَّتَ لإضافة الامتداد إلى متصفحك. اتبع أي تعليمات تظهر على الشاشة لإكمال التثبيت.

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

بمجرد التثبيت، يمكنك البدء في كتابة نصوص مستخدم مخصصة باستخدام JavaScript لإجراء التغييرات المقصودة على أي موقع ويب. وغني عن القول أنك ستحتاج إلى فهم أساسي لـ HTML وCSS وJavaScript لكتابة نص المستخدم وإجراء التعديلات باستخدام Tampermonkey.

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

ما يجب مراعاته قبل إجراء تعديلات على عناصر موقع الويب

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

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

الشروع في العمل مع Tampermonkey

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

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

يبدو رأس Tampermonkey الافتراضي أو تعليقات البيانات التعريفية كما يلي:

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grantnone
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();

تتضمن تعليقات البيانات التعريفية هذه معلومات مهمة حول اسم البرنامج النصي للمستخدم والغرض المقصود والأذونات وإخبار Tampermonkey بموعد تنفيذ البرنامج النصي.

في هذا الدليل، سنركز على @مباراة التوجيه، ويعرف أيضا باسم البيانات الوصفية المقدمة. يستخدم Tampermonkey هذا التوجيه لضمان تطبيق نص المستخدم فقط على موقع ويب أو صفحات ويب محددة. في هذه الحالة، سيتم تشغيل نص المستخدم التالي فقط على example.com (استبدل عنوان URL لموقع الويب وفقًا لمتطلباتك) وجميع صفحاته.

كتابة نص مستخدم لإضافة زر مشاركة WhatsApp

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

يمكنك إنشاء نص مستخدم في Tampermonkey لإضافة زر مشاركة WhatsApp في نهاية المقالة. سنقوم بدمج الزر في أداة المشاركة الحالية التي ستسمح لك بمشاركة عنوان URL لصفحة الويب مع جهات اتصال WhatsApp الخاصة بك.

لنبدأ بإنشاء زر مشاركة WhatsApp أساسي.

//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

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

//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';

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

ومع ذلك، في هذه الحالة، لدينا بالفعل أداة مشاركة في نهاية كل مقالة. لذا، فمن المثالي جعل زر المشاركة هذا جزءًا من الأداة.

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

سترى أنه عنصر باسم الفئة "تقاسم القاع”. يمكنك تحديد هذا العنصر باستخدام querySelector الطريقة في نص المستخدم الخاص بك.

const sharingDiv = document.querySelector ('div.sharing.bottom');

بعد تحديد العنصر، دعونا ندرج زر المشاركة كفرع له:

if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
}

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

لكي يعمل الزر، سنقوم بإنشاء وظيفة لإنشاء عنوان URL لمشاركة WhatsApp استنادًا إلى عنوان URL للصفحة الحالية. يمكنك استخدام location.href لإرجاع عنوان URL للصفحة.

functiongenerateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return`https://api.whatsapp.com/send? text=${pageURL}`;
}

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

Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});

حفظ وتشغيل برنامج Userscript

بمجرد أن يصبح نص المستخدم جاهزًا، اضغط على السيطرة + س لحفظ التغييرات. افتح ال البرامج النصية للمستخدمين المثبتة علامة التبويب في Tampermonkey لعرض جميع نصوص المستخدم المثبتة على متصفحك.

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

يمكنك تعديل البرنامج النصي بشكل أكبر لإضافة المزيد من التحسينات. على سبيل المثال، يمكنك عرض أيقونة WhatsApp على الزر أو تغيير موضعها باستخدام وظيفة InsertAfter().

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

جعل تغييرات فحص العناصر دائمة باستخدام Tampermonkey

يعد Tampermonkey واحدًا من العديد من أدوات إدارة نص المستخدم المتوفرة والتي تسمح لك بتعديل صفحات الويب لتحسين تجربة التصفح لديك. يمكن أن تساعد التعديلات الصغيرة في تحسين إمكانية الوصول وإصلاح الإزعاجات البسيطة في موقع الويب المفضل لديك.

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