۱۳۸۷/۱۰/۰۳

چگونه يك اسكريپت گريس مانكي بنويسيم؟


گريس مانكي يكي از افزونه‌هاي فايرفاكس است كه توسط آن مي‌توان اسكريپت‌هايي را بر روي صفحات وب در حال مشاهده، جهت تغيير آن‌ها اجرا كرد. اين نوع تغييرات بيشتر در جهت بالا بردن كارآيي يا خوانايي سايت‌ها صورت مي‌گيرد. مثلا بررسي وجود لينك‌هاي ارائه شده در يك صفحه وب (قبل از اينكه به آن‌ها رجوع كنيم، مشخص شود كه آيا وجود دارند يا خير) و هزاران مثال شبيه به اين كه در سايت اسكريپت‌هاي آن قابل دريافت هستند.
گريس مانكي به خودي خود كار خاصي را انجام نمي‌دهد و فقط ميزبان اجرايي اسكريپت‌هايي است كه براي آن تهيه شده اند. به اين اسكريپت‌ها 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!');

فرمت كلي و آناتومي يك اسكريپت گريس مانكي مطابق چند سطر فوق است. در ابتدا نامي را كه براي اسكريپت مشخص كرده‌ايد، ذكر خواهيد نمود. سپس فضاي نام آن مشخص مي‌گردد. اين فضاي نام يك آدرس وب خواهد بود (مثلا سايت شخصي شما) . به اين طريق گريس مانكي مي‌تواند اسكريپت‌هاي هم نام را بر اساس اين فضاهاي نام مختلف مديريت كند. سپس توضيحات مربوط به اسكريپت ارائه مي‌شود. در قسمت include مشخص خواهيد كرد كه اين اسكريپت بر روي چه سايت‌ها و آدرس‌هايي اجرا شود و در قسمت exclude سايت‌هاي صرفنظر شونده را تعيين خواهيد نمود. در مثال فوق، اسكريپت بر روي تمامي سايت‌ها اجرا خواهد شد، منهاي دو سايت و زير سايت‌هايي كه در قسمت exclude مشخص شده‌اند.
در پايان مثلا نام آن‌را 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);
});

});

نحوه پياده سازي تابع loadJquery را در سورس مربوطه مي‌توانيد مشاهده نمائيد.
دريافت سورس اين مثال

در اينجا ابتدا لينك‌هاي حاصل از جستجو پيدا مي‌شوند. سپس نام دومين مربوطه استخراج مي‌گردد (با استفاده از regular expressions) و در ادامه از اين نام دومين يك آدرس استاندارد http://domain/favico.ico ساخته شده و از آن يك تگ img درست مي‌شود. در آخر اين تگ به قبل از لينك‌هاي گوگل اضافه مي‌شود.

شايد سؤال بپرسيد از كجا مشخص شد كه بايد به دنبال h3.r > a.l گشت؟ به تصوير زير دقت نمائيد (نمايي است از يكي از توانايي‌هاي افزونه fireBug فايرفاكس).



هنگاميكه صفحه بارگذاري شد، بر روي آيكون سوسك موجود در status bar فايرفاكس كليك كنيد تا FireBug ظاهر شود (البته من اينجا سوسك ديدم شايد موجود ديگري باشد :) )
سپس بر روي دكمه inspect در نوار ابزار آن كليك كنيد. در همين حال اشاره‌گر ماوس را به يكي از لينك‌هاي نتيجه جستجوي گوگل نزديك كنيد. بلافاصله تگ‌ها و كلاس‌هاي مورد استفاده آن به شكل زيبايي ظاهر خواهند شد. به اين صورت صرفه جويي قابل ملاحظه‌اي در وقت صورت خواهد گرفت.

نتيجه اجراي اسكريپت فوق (پس از نصب) به صورت زير است:



نكته: نحوه ديباگ كردن اسكريپت‌هاي گريس مانكي

اگر نياز به مشاهده مقدار متغيرها در لحظه اجراي اسكريپت داشتيد، يكي از راه‌حل‌هاي موجود استفاده از تابع GM_log مربوط به API گريس مانكي است كه خروجي آن‌را در قسمت messages مربوط به error console فايرفاكس مي‌توان ديد.