ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

চলুন, আজকে আমরা শিখি কিভাবে একটি ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা যায়। দুই পর্বের এই টিউটোরিয়ালের মাধ্যমে আমরা ফোরামের জন্য একটি ফন্ট সিলেক্টর বানানো (এই পর্বে) ও সবার জন্য তা শেয়ার করা (পরের পর্বে) শিখবো যা ফায়ারফক্স ও ক্রোমে কাজ করবে (অন্তত)। স্ক্রীপ্টটির আউটপুট অনেকটা এরকম:

ইউজারস্ক্রীপ্ট আসলে জাভাস্ক্রীপ্ট ছাড়া আর কিছু নয় (সুতরাং যারা জাভাস্ক্রীপ্ট জানেন তাদেরই মূলত ইন্টারেস্ট থাকবে এই টিউটোরিয়ালে। তবে যারা জানেন না তারাও ট্রাই করতে দোষ কি, হ্যাঁ?)। তবে, এটি কাজ করার জন্য ব্রাউজারে ইউজারস্ক্রীপ্ট ম্যানেজমেন্ট (ইউজারস্ক্রীপ্ট ইন্সটল, রান ও ম্যানেজ করানোর জন্য) এক্সটেনশন থাকতে হয় যদি না ইউজারস্ক্রীপ্ট ম্যানেজমেন্টের জন্য ব্রাউজারের নিজস্ব ব্যবস্থা থাকে। মজিলা ফায়ারফক্সের জন্য এরকম একটি ইউজারস্ক্রীপ্ট ম্যানেজমেন্ট টুল হলো Greasemonkey। গুগল ক্রোম ব্রাউজার সম্ভবত নিজে থেকেই ইউজারস্ক্রীপ্ট ইন্সটল, রান ও ম্যানেজ করতে পারে, তবে এজন্য ইউজারস্ক্রীপ্টটি শুধুমাত্র ক্রোম ওয়েবস্টোরের হলেই এটি ইন্সটল করতে পারে। আবার, ক্রোম ওয়েবস্টোরে শেয়ার করার জন্য একটি সিংগেল ইউজারস্ক্রীপ্ট আপলোড করার ব্যাপারটি আমি বুঝে উঠতে পারিনি, যা পেরেছি userscripts.org এ স্ক্রীপ্ট আপলোড করার বেলায়। অবশ্য  ক্রোমের জন্যও Tampermonkey নামক একটি ইউজারস্ক্রীপ্ট ম্যানেজমেন্ট এক্সটেনশন আছে। Greasemonkey (ফায়ারফক্স) ও Tampermonkey (ক্রোম) -এই দুই বান্দর অবশ্য userscripts.org সাইট থেকে যে কোন স্ক্রীপ্ট ইন্সটল ও আপডেট করতে পারে।

যাই হোক, আমরা আজকের টিউটোরিয়ালে ফায়ারফক্স ব্রাউজার ও এর Greasemonkey এক্সটেনশনটি ব্যবহার করবো। যাদের ফায়ারফক্সে এই এক্সটেনশনটি ইন্সটল করা নেই তারা নিচের লিংকে গিয়ে "+ Add to Firefox" বাটনে ক্লিক করে এটি ইন্সটল করে নিন:

https://addons.mozilla.org/en-US/firefo … asemonkey/

ইন্সটল করার পরে এটি অটো-এনাব্‌ল হয়ে যাওয়ার কথা, না হলে মেনু কমান্ড Tools > Add-ons > Extensions থেকে এনাব্‌ল করে নিন।

এনাব্‌ল করার পরে এটির আইকন আপনার ব্রাউজারের উপরের দিকের ডান কোণায় দেখতে পাবেন।

ইন্সটল করার পরে আপনি স্ক্রীপ্ট বানানো ও সম্পাদনা করার জন্য আপনার ফেভারিট টেক্সট/কোড এডিটরটি গ্রীজমাংকিকে জানিয়ে দিতে পারেন:

আসুন, এবারে ইউজার-স্ক্রীপ্ট তৈরি করা শুরু করি।

ধাপ-১:
গ্রীজমাংকি আইকনের এ্যারো চিহ্ণটিতে ক্লিক করি ও ড্রপ-ডাউন মেনু থেকে New User Script... অপশনটিতে ক্লিক করি।

ধাপ-২:
New User Script... ডায়লগ বক্সের প্যারামিটারগুলো নিচের মত করে দেই:

যতদুর বুঝি, এখানে Namespace -এ যে ভ্যালু দেবেন সেটি আপনার স্ক্রীপ্টের জন্য একটি ইউনিক বেইসনেম হিসেবে কাজ করবে। একই নামের আরেকটি ইউজারস্ক্রীপ্ট অন্য কেউ শেয়ার করে থাকতে পারে। সেক্ষেত্রে কনফ্লিকশন এড়ানোর জন্য এই নেমস্পেস কাজ করবে। সাধারণত এখানে নিজের মালিকানাধীন সাইটের নাম ব্যবহার করা হয়। আমরা আপাতত এখানে http://forum.projanmo.com ব্যবহার করছি। "Includes" ও "Excludes" -এর ঘরে কিছু থাকলে মুছে দিন। এটি আপাতত আমাদের দরকার নেই। সবশেষে OK করুন।

মজিলা ফায়ারফক্সের প্রোফাইল ফোল্ডারের ভেতরে gm_scripts নামের একটি ফোল্ডারের ভেতরে উপরে বর্ণিত ডায়লগ বক্সে দেয়া Name-এর সাথে মিল রেখে নামকৃত একটি সাবফোল্ডারের ভেতরে স্ক্রীপ্টটির জন্য .user.js ফাইল-এক্সটেনশনযুক্ত একটি জাভাস্ক্রীপ্ট ফাইল তৈরি হবে যার নামও আবার ওই Name প্যারামিটারের সাথে মিল রেখে নামকরণকৃত (এক্ষেত্রে Projanmo_Forum_Font_Selector.user.js) ।

এবং, সাথে সাথে আপনার পছন্দকৃত/ডিফল্ট টেক্সট/কোড এডিটরে জাভাস্ক্রীপ্ট ফাইলটি ওপেন হবে।

সেখানে আবার // ==UserScript== ব্লকের ভেতরে কিছু মেটাডাটা ব্লক তৈরি হবে পূর্বে আপনার ইনপুট দেয়া ভ্যালুগুলোর উপর ভিত্তি করে। এই UserScript ব্লকের প্রতিটি লাইনই "//" দিয়ে শুরু হবে এবং প্রতিটি মেটাডাটা ব্লক "@" সাইন দিয়ে শুরু হবে। যেমন: @name হলো আমাদের স্ক্রীপ্টটির name মেটাডাটা ব্লক। অটোমেটিক্যালি একটি version আইডেন্টিফায়ার মেটাডাটাও (@version) তৈরি হবে ডিফল্ট ভ্যালু "1" দিয়ে। greasemonkey কম্পিট্যাবল মেটাডাটাগুলো সম্পর্কে জানতে http://wiki.greasespot.net/Metadata_Block লিংকটি ভিজিট করতে পারেন। আপাতত ওগুলো না পড়লেও চলবে।

ধাপ-৩:
এডিটরে ওপেন হওয়া ফাইলটির শেষে কার্সর নিয়ে আমরা জাভাস্ক্রীপ্টটি টাইপ করা শুরু করি।

প্রথমে আমরা একটি "div" এলিমেন্ট (যা পরবর্তীতে ব্রাউজার <div> হিসেবে ইন্টারপ্রেট করবে) তৈরি করি এবং তা "font_panel" নামে একটি ভেরিয়েবলে সংরক্ষণ করি।

var font_panel = document.createElement("div");

এরপর, div-টির জন্য একটি আইডি সেট করি (এটা অবশ্য এই স্ক্রীপ্টের জন্য খুব একটা প্রয়োজনীয় নয়, তবে পরবর্তীতে প্র্যাকটিস/ডেভলপ করার সময় আপনি কখনো এটাকে রেফার করতে চাইলে এলিমেন্ট আইডি খুব কাজে লাগবে)।

font_panel.id = "font_panel_div";

আমরা চাচ্ছি, এই সিলেক্টরটি যাতে ব্রাউজার ভিউপোর্টের সাপেক্ষে স্থির থাকে, অর্থাৎ স্ক্রল করে নিচের দিকে গেলেও এটি যেন নিজের জায়গায় দৃশ্যমান থাকে। তাই এর পজিশনের ধরণ সেট করি:

font_panel.style.position = "fixed";

এলিমেন্টটির জন্য পজিশন কো-অর্ডিনেট top ও right সেট করি:

font_panel.style.top = "10px";
font_panel.style.right = "5px";

এলিমন্টটির ফোরগ্রাউন্ড কালার (টেক্সট কালার ও অন্যান্য এট্রিবিউটের ডিফল্ট কালার) সেট করি (আমি জলপাই রং খুব পছন্দ করি ):

font_panel.style.color = "olive";

এলিমেন্টটির জন্য কিছু ফুটানীমূলক সাজুগুজু (শ্যাডো, গোলাকার বর্ডার এরিয়া) তৈরি করি:

font_panel.style.boxShadow = "-5px 5px 10px grey";
font_panel.style.borderRadius = "25px";

এলিমেন্টটির প্যাডিং ভ্যালু সেট করি যাতে ভেতরের ক্লিকেবল লেখাগুলোর আশেপাশে কিছু খালি জায়গা থাকে:

font_panel.style.padding = "10px";

এবারে ভেতরের দুটি ক্লিকেবল নোড-আইটেম নেই। প্রথমটিতে ক্লিক করলে ফন্ট "সিয়াম রুপালী" ও দ্বিতীয়টিতে ক্লিক করলে ফন্ট "সোলাইমানলিপি" হবে। যতদুর দেখলাম, আমাদের ফোরামের বেশিরভাগ পেইজে "brd-page" নামক class-এর এলিমেন্টটিতেই ফন্ট-ফ্যামিলি এট্রিবিউট দেয়া হয়েছে যা ওই পেইজগুলো জুড়ে কাজ করে। আমরাও তাই এই ক্লাসের জন্যই ফন্ট ফ্যামিলি এট্রিবিউট সেট করি অন-ক্লিক ইভেন্টে:

font_panel.innerHTML = "<span style = 'display:block;cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Siyam Rupali\"'>Siyam Rupali</span><span style = 'cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Solaimanlipi\"'>Solaimanlipi</span>";

পরিশেষে, ফোরাম পেইজের অন্তস্থিত প্যারেন্ট এলিমেন্ট "brd-wrap" -এর চাইল্ড এলিমেন্ট হিসেবে উপরোক্ত "div" এলিমেন্টটিকে এপেন্ড করি:

document.getElementById("brd-wrap").appendChild(font_panel);

সব কোড একসাথে:

// ==UserScript==
// @name        Projanmo Forum Font Selector
// @namespace   http://forum.projanmo.com
// @description Projanmo Forum Font Selector
// @version     1
// ==/UserScript==

var font_panel = document.createElement("div");
font_panel.id = "font_panel_div";
font_panel.style.position = "fixed";
font_panel.style.top = "10px";
font_panel.style.right = "5px";
font_panel.style.color = "olive";
font_panel.style.boxShadow = "-5px 5px 10px grey";
font_panel.style.borderRadius = "25px";
font_panel.style.padding = "10px";
font_panel.innerHTML = "<span style = 'display:block;cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Siyam Rupali\"'>Siyam Rupali</span><span style = 'cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Solaimanlipi\"'>Solaimanlipi</span>";
document.getElementById("brd-wrap").appendChild(font_panel);

স্ক্রীণশটে দেখুন:

ধাপ-৪:
সেইভ করি স্ক্রীপ্টটি।

ধাপ-৫:
ফায়ারফক্সে গিয়ে গ্রীজমাংকির এ্যারোতে ক্লিক করে দেখুন নিচে "Projanmo Forum Font Selector" নামে একটি স্ক্রীপ্ট যোগ হয়েছে স্ক্রীপ্টের তালিকায়। পাশে চেকমার্ক থাকার মানে হলো এটি এনাবল্‌ড আছে।

ধাপ-৬:
যে কোন একটি নতুন ট্যাবে প্রজন্মের কোন একটি পোস্ট ওপেন করি। পেইজ লোড হওয়া পর্য্ন্ত অপেক্ষা করি। এবং টেক্টট নোড দুটিতে ক্লিক করে স্ক্রীপ্টটির কাযর্কারিতা (পেইজের ফন্টের পরিবর্তন) পরখ করি।

পরবর্তী পর্বে দেখবো কিভাবে userscripts.org সাইটে প্রজন্মের সদস্যদের জন্য এই স্ক্রীপ্টটি শেয়ার করবো আমরা। আজ এখানেই শেষ করছি।