چگونه با Tampermonkey تغییرات عنصر را در مرورگر خود دائمی کنید

با استفاده از ابزار Inspect Element تغییراتی در وب سایت ایجاد کردید؟ در اینجا نحوه استفاده از افزونه Tampermonkey برای دائمی کردن این تغییرات آورده شده است.

ویژگی Inspect Element در مرورگر وب شما یک ابزار توسعه دهنده است که به شما امکان می دهد جنبه های جلویی یک وب سایت، از جمله HTML، CSS و جاوا اسکریپت را تغییر دهید و تغییرات موقتی ایجاد کنید. همچنین می توانید با Inspect Element کارهای بیشتری انجام دهید. با این حال، تمام تغییرات پس از یک رفرش از بین می رود.

اما گاهی اوقات، ممکن است بخواهید تغییرات را برای مدت طولانی نگه دارید یا عملکردهای اضافی را برای بهبود تجربه کاربری اضافه کنید. یکی از راه‌های دائمی کردن تغییرات Inspect Element استفاده از پسوند Tampermonkey است. این به شما امکان می دهد اسکریپت های سفارشی را در صفحات وب اضافه کنید و تغییرات را در دستگاه محلی خود دائمی کنید.

بیایید نحوه استفاده از Tampermonkey برای دائمی کردن تغییرات عنصر بازرسی در مرورگر محلی خود را بررسی کنیم.

Tampermonkey چیست و چگونه می توان آن را نصب کرد؟

Tampermonkey، یک مدیر اسکریپت کاربر، یک افزونه مرورگر محبوب است که برای همه مرورگرهای وب اصلی، از جمله Chrome، Edge، Opera Next و Firefox در دسترس است. این به شما امکان می دهد اسکریپت های کاربری سفارشی و موجود را ایجاد و اجرا کنید تا صفحات وب را برای اصلاح یا بهبود آنها اصلاح کنید.

همچنین دارای یک کتابخانه اسکریپت های کاربر است که توسط سایر کاربران Tampermonkey ایجاد شده است. به عنوان مثال، می‌توانید از اسکریپت Local YouTube Downloader برای دانلود ویدیوهای YouTube با استفاده از Tampermonkey یا تماشای ویدیوهای YouTube پرچم‌دار بدون ورود به سیستم استفاده کنید.

برنامه افزودنی کاربراسکریپت های ذخیره شده را به محض بارگیری صفحه وب مشخص شده اجرا می کند، بنابراین تغییرات مورد نظر دائمی به نظر می رسد.

قبل از شروع نوشتن یک اسکریپت، باید Tampermonkey را نصب کنید. بنابراین، اجازه دهید با نصب افزونه شروع کنیم:

1. به صفحه رسمی Tampermonkey بروید. به طور خودکار مرورگر وب شما را شناسایی می کند. در غیر این صورت، بسته به مرورگری که استفاده می‌کنید، روی هر برگه از Chrome، Microsoft Edge، Firefox، Safari و Opera کلیک کنید.
2. در قسمت دانلود بر روی دریافت از فروشگاه کلیک کنید. به فروشگاه وب مرورگر خود هدایت خواهید شد.
3. بر روی Install کلیک کنید تا افزونه را به مرورگر خود اضافه کنید. برای تکمیل نصب، هر دستورالعمل روی صفحه را دنبال کنید.

اگر مرورگر شما در لیست نیست، اما از مرورگر Chromium استفاده می‌کنید، باید بتوانید این افزونه را از فروشگاه Chrome نصب کنید.

پس از نصب، می توانید شروع به نوشتن اسکریپت های کاربری سفارشی با استفاده از جاوا اسکریپت کنید تا تغییرات مورد نظر را در هر وب سایت ایجاد کنید. نیازی به گفتن نیست که برای نوشتن اسکریپت کاربری و ایجاد تغییرات با استفاده از Tampermonkey به درک اولیه HTML، CSS و JavaScript نیاز دارید.

برای نشان دادن قابلیت‌های Tampermonkey، ما یک اسکریپت برای اضافه کردن دکمه اشتراک‌گذاری WhatsApp برای اشتراک‌گذاری لینک‌های مقاله با مخاطبین WhatsApp شما می‌نویسیم.

قبل از ایجاد تغییرات در عناصر وب سایت چه نکاتی را باید در نظر گرفت

هنگام ایجاد تغییرات در هر وب سایت، مهم است که به سیاست های آنها در مورد استفاده از جاوا اسکریپت های شخص ثالث احترام بگذارید. سعی نکنید کاربر اسکریپت ها را خودسرانه در هیچ وب سایتی اجرا کنید، به خصوص زمانی که با داده های حساس سروکار دارید.

در حالی که Tampermonkey به شما کمک می کند ظاهر را تغییر دهید و عملکردی را به یک وب سایت اضافه کنید، همه تغییرات فقط به صورت محلی در مرورگر شما قابل مشاهده است و بر منبع تأثیر نمی گذارد.

شروع کار با Tampermonkey

هنگامی که تغییراتی را که می خواهید در یک صفحه وب انجام دهید برنامه ریزی کردید، می توانید شروع به نوشتن اسکریپت خود کنید. اسکریپت های کاربری جدید را می توان از نوار ابزار یا داشبورد Tampermonkey ایجاد کرد.

برای ایجاد یک اسکریپت جدید، روی نماد Extensions در نوار ابزار مرورگر کلیک کرده و Tampermonkey را انتخاب کنید. سپس Create a new script را انتخاب کنید. با این کار یک ویرایشگر اسکریپت در داشبورد 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/*

// @grant none

// ==/UserScript==

(function() {

'use strict';

// Your code here...

})();

این نظرات فراداده شامل اطلاعات مهمی در مورد نام کاربر اسکریپت، هدف مورد نظر و مجوزها می شود و به Tampermonkey می گوید که چه زمانی اسکریپت را اجرا کند.

برای این راهنما، ما روی دستورالعمل @match، با نام متادیتا فایل شده تمرکز خواهیم کرد. Tampermonkey از این دستورالعمل استفاده می کند تا اطمینان حاصل کند که اسکریپت کاربر فقط برای یک وب سایت یا صفحات وب خاص اعمال می شود. در این مثال، اسکریپت کاربری زیر فقط در example.com اجرا می‌شود (در صورت نیاز آدرس وب‌سایت را جایگزین کنید) و تمام صفحات آن.

نوشتن یک یوزر اسکریپت برای افزودن دکمه اشتراک گذاری WhatsApp

در پایان هر مقاله MakeUseOf، یک ویجت اشتراک گذاری برای پلتفرم های مختلف رسانه های اجتماعی، به جز واتس اپ، پیدا خواهید کرد. در حالی که می‌توانید URL را کپی و جای‌گذاری کنید، دکمه اشتراک‌گذاری واتس‌اپ اگر مکرراً مقالاتی را در گروه واتس‌اپ خود به اشتراک می‌گذارید مفید است.

شما می توانید یک اسکریپت کاربری در Tampermonkey ایجاد کنید تا دکمه اشتراک گذاری WhatsApp را در انتهای مقاله اضافه کنید. ما این دکمه را در ویجت اشتراک گذاری موجود ادغام می کنیم که به شما امکان می دهد URL صفحه وب را با مخاطبین WhatsApp خود به اشتراک بگذارید.

بیایید با ایجاد یک دکمه اشتراک گذاری اساسی WhatsApp شروع کنیم.

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

اکنون که یک دکمه اشتراک گذاری اولیه واتس اپ داریم، بیایید سبکی به آن اضافه کنیم. با این کار رنگ پس‌زمینه و متن، حاشیه، بالشتک و سبک مکان‌نما به دکمه داده می‌شود. با کمی سرهم بندی، می توانید ویژگی های دکمه را تغییر دهید تا ظاهر را به خوبی تنظیم کنید.

//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';

با آماده بودن دکمه، زمان تست آن فرا رسیده است. اما کجا آن را قرار می دهید؟ به عنوان یک روش معمول، اغلب دکمه اشتراک گذاری در انتهای مقالات قرار می گیرد.

با این حال، در این مثال، ما قبلاً یک ویجت اشتراک گذاری در انتهای هر مقاله داریم. بنابراین، ایده آل است که این دکمه اشتراک گذاری را بخشی از ویجت کنید.

برای انجام این کار، ویجت اشتراک‌گذاری موجود را بررسی می‌کنیم تا محفظه والد حاوی عناصر اشتراک‌گذاری را برای یافتن آن در اسکریپت کاربر پیدا کنیم. در صفحه وب، Ctrl + Shift + C را فشار دهید تا Inspect Element باز شود. سپس، عنصر اشتراک گذاری ویجت را در صفحه انتخاب کنید تا آن را بررسی کنید.

خواهید دید که یک عنصر

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

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

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

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