اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
چهار دقیقه
گریس مانکی یکی از افزونههای فایرفاکس است که توسط آن میتوان اسکریپتهایی را بر روی صفحات وب در حال مشاهده، جهت تغییر آنها اجرا کرد. این نوع تغییرات بیشتر در جهت بالا بردن کارآیی یا خوانایی سایتها صورت میگیرد. مثلا بررسی وجود لینکهای ارائه شده در یک صفحه وب (قبل از اینکه به آنها رجوع کنیم، مشخص شود که آیا وجود دارند یا خیر) و هزاران مثال شبیه به این که در سایت اسکریپتهای آن قابل دریافت هستند.
گریس مانکی به خودی خود کار خاصی را انجام نمیدهد و فقط میزبان اجرایی اسکریپتهایی است که برای آن تهیه شده اند. به این اسکریپتها user scripts گفته میشود و جهت تهیه آنها از زبان جاوا اسکریپت استفاده میگردد.
مطابق اصول نامگذاری آن، فایل این اسکریپتها حتما باید به .user.js ختم شود تا توسط افزونه گریس مانکی قابل شناسایی باشد.
اسکریپت سلام دنیای گریس مانکی!
// ==UserScript==
// @name Hello World
// @namespace http://diveintogreasemonkey.org/download/
// @description example script to alert "Hello world!" on every page
// @include *
// @exclude http://diveintogreasemonkey.org/*
// @exclude http://www.diveintogreasemonkey.org/*
// ==/UserScript==
alert('Hello world!');
در پایان مثلا نام آنرا hello.user.js خواهیم گذاشت (همانطور که ذکر شد قسمت user.js آن باید رعایت شود). برای نصب آن فقط کافی است این فایل را به درون پنجره فایر فاکس کشیده و رها کنیم (drag & drop).
استفاده از jQuery در اسکریپتهای گریس مانکی
عمده کاربردهای اسکریپتهای گریس مانکی در جهت اعمال تغییرات بر روی document object model صفحه (DOM) هستند. کتابخانه jQuery اساسا برای این منظور تهیه و بهینه سازی شده است.
مثال:
فرض کنید قصد داریم به نتایج خروجی جستجوی گوگل، fav icon سایتهای یافت شده را اضافه کنیم (در کنار هر لینک، آیکون سایت مربوطه را نمایش دهیم). گوگل اینکار را انجام نداده است. اما ما علاقمند هستیم که این قابلیت را اضافه کنیم!
// ==UserScript==
// @name Google FavIcon
// @namespace http://userscripts.org
// @description Shows favicon for Google searches results
// @include http://*.google.*/search?*
// ==/UserScript==
loadJquery();
$(document).ready(function(){
$("h3.r > a.l").each(function(){
var $a = $(this);
var href = $a.attr("href");
var domain = href.replace(/<\S[^><]*>/g, "").split('/')[2];
var image = '<img src="http://' + domain + '/favicon.ico" style="border:0;padding-right:4px;" />';
//GM_log(">image:> " + image);
$(this).prepend(image);
});
});
دریافت سورس این مثال
در اینجا ابتدا لینکهای حاصل از جستجو پیدا میشوند. سپس نام دومین مربوطه استخراج میگردد (با استفاده از regular expressions) و در ادامه از این نام دومین یک آدرس استاندارد http://domain/favico.ico ساخته شده و از آن یک تگ img درست میشود. در آخر این تگ به قبل از لینکهای گوگل اضافه میشود.
شاید سؤال بپرسید از کجا مشخص شد که باید به دنبال h3.r > a.l گشت؟ به تصویر زیر دقت نمائید (نمایی است از یکی از تواناییهای افزونه fireBug فایرفاکس).
هنگامیکه صفحه بارگذاری شد، بر روی آیکون سوسک موجود در status bar فایرفاکس کلیک کنید تا FireBug ظاهر شود (البته من اینجا سوسک دیدم شاید موجود دیگری باشد :) )
سپس بر روی دکمه inspect در نوار ابزار آن کلیک کنید. در همین حال اشارهگر ماوس را به یکی از لینکهای نتیجه جستجوی گوگل نزدیک کنید. بلافاصله تگها و کلاسهای مورد استفاده آن به شکل زیبایی ظاهر خواهند شد. به این صورت صرفه جویی قابل ملاحظهای در وقت صورت خواهد گرفت.
نتیجه اجرای اسکریپت فوق (پس از نصب) به صورت زیر است:
نکته: نحوه دیباگ کردن اسکریپتهای گریس مانکی
اگر نیاز به مشاهده مقدار متغیرها در لحظه اجرای اسکریپت داشتید، یکی از راهحلهای موجود استفاده از تابع GM_log مربوط به API گریس مانکی است که خروجی آنرا در قسمت messages مربوط به error console فایرفاکس میتوان دید.