ধাপ ১ : ফোল্ডার / ডিরেক্টরি তৈরী করা

সর্বাপরি ৪ টি ছবি ব্যবহার করে আমরা একটি সুন্দর থিম তৈরী করতে পারি। তবে কেউ যদি তার থিম এ তার একটি চিহ্ন ব্যবহার করতে চায় তবে আমাদের ৫ টি ছবির প্রয়োজন পড়বে। এগুলো হল-

১. Theme Frame: এই ছবিটি দ্বারা ক্রোম এর সবার উপরের অংশ আবৃত করা হয় যাতে Minimize, Maximize, ও Close বাটন গুলো থাকে। এটি ব্যবহার না করলে ক্রোম এর default যেই ফ্রেম আছে তাই ব্যবহার হবে। এই Frame এর জন্য যে ছবি ব্যবহার করব তার উচ্চতা (Height) কমপক্ষে 30px হতে হবে। আর প্রসস্ততা (Width) যে কোন মাপের হতে পারে। একে “frame.png” নামে image ফোল্ডারে save করি।

২. Theme toolbar: এই অংশে ব্যবহৃত ছবিটি ক্রোম এর Back, Forward, Reload, Address Bar, এবং অন্য এক্সটেনশন গুলোর পেছনে ব্যবহৃত হয়। এটি একই সাথে বর্তমানে যেই ট্যাবটি তে আপনার অবস্থান তাতে ও ব্যবহৃত হয়। এর রেজুলেশন এর ক্ষেত্রে উচ্চতা কমপক্ষে 120px হতে হবে। আর পসস্ততা যে কোন মাপের হতে পারে। একে “toolbar.png” নামে image ফোল্ডারে save করি

৩. Theme Tab Background: এই ছবিটির দ্বারা আমরা যখন বিভিন্ন Tab এ ব্রউজিং করি তার Inactive Tab গুলোকে আবৃত করে থাকে। এর রেজুলেশন এর ক্ষেত্রে উচ্চতা কমপক্ষে 65px হতে হবে। আর পসস্ততা যে কোন মাপের হতে পারে। একে “tab.png” নামে image ফোল্ডারে save করি।

৪. New Tab Page Background: এই ছবিটিই আপনার পছন্দসই ছবির স্থন নেবে। কেউ যখন নতুন কোন Tab খুলবে তখন তার Background হিসেবে এই ছবি টি ব্যবহার হবে। এর রেজুলেশন এর ক্ষেত্রে আপনি স্বাধীন ভাবে যে কোন রেজুলেশন এর ছবি ব্যবহার করতে পারবেন। তবে কমপক্ষে রেজুলেশন 800x600 হতে হবে। তবে আপনার স্ক্রিন রেজুলেশন এর ছবি আপনার জন্য ভাল সহায়ক হবে। একে “background.png” নামে image ফোল্ডারে save করি।

৫. Theme Attribution: এই ছবিটি ক্রোম এর নিন্মে এক দিকে দেখা যায়। এখানে যে থিম প্যাক টি তৈরী করল তার একটি Signature সে ব্যবহার করতে পারে, যার সাহায্যে থিম ব্যবহারকারী গন থিম তৈরী কারককে জানতে পারবেন। একে “theme_ntp_attribution.png” নামে image ফোল্ডারে save করি।

এখন এই ছবি গুলো আপনি আপনার workspace এর থিম ফোল্ডারের image ফোল্ডারের ভিতরে রাখুন।

ধাপ ৩ : একটি manifest File তৈরী করা

এখন কাজ হল একটি JSON-formatted manifest file তৈরী করা, যার নাম হবে “manifest.json” । এর ভিতরেই সকল information থাকবে। এতে মূলত ৪টি element থাকবে। এগুলো হল - images, colors, tints & properties। থিম প্যাক তৈরীর জন্য আপনারা এই কোড গুলো আপনাদের manifest.json ফাইলে যুক্ত ও প্রয়োজন অনুসারে পরিবর্তন করুন করুন। এটি আপনার থিম Folder এর ভেতরে save করুন।

{
"description ": "A theme for Chrome, which is created for learning and testing",
"version": "0.1",
"name": "Newborn Nebula",
"theme":
{ "images" :
{ "theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
},
"colors" :
{ "ntp_link": [255,255,255],
"frame":[0,0,0],
"frame_inactive":[40,45,56],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [10 , 17 , 27],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [10 , 17 , 27],
"tab_text": [255,255,255],
"tab_background_text": [10 , 17 , 27],
"bookmark_text": [255,255,255]
},
"tints" :
{ "buttons" : [0.5, 0, -0.5]
},
"properties" :
{ "ntp_background_alignment" : "top center",
"ntp_background_repeat": "no-repeat"
},
}
}

কোড বিশ্লেষন:

এখানে হালকা ভাবে একটু কোডিং কে বিশ্লেষন করি।

• শুরুতেই Description এ এই এক্সটেনশন সম্মন্ধে কিছু সাধারন বর্ননা দেয়া হয়েছে।
• Version অংশে ডেভলপ কৃত থিমটির বর্তমান সংস্করন এর নম্বর বলা হয়।
• Name অংশে থিম এর নাম যা থিম এর ফোল্ডার এর নাম রাখা হয়েছে তা লেখা হয়।

• Images অংশে আমাদের থিম এ ব্যবহৃত ছবি গুলোর information দেয়া হয়েছে। images ফোল্ডারে যে নামে আমাদের ছবি গুলো রয়েছে সেই নামে আমরা এখানেও উপস্থাপন করি।

• Color অংশে থিম এর বিভিন্ন অংশে যে color গুলো ব্যবহার হয়েছে তার information রাখা হয়। এখানে কিছু জিনিষ রয়েছে যা মনে রাখার মত, এগুলো হল-

• Status bar এর background color এবং toolbar color একই রকম হলে ভাল হয়।
• Status bar এর text color এবং tab text color একই রকম হলে দেখতে সুন্দর হয়।
• Toolbar button এর text color এবং bookmark text's color একই রকম হলে সুশ্রী দেখায়।
• Tints অংশে Toolbar এর বাটন গুলের রং এর বিবরন দেয়া হয়। একে রেঞ্জ আকারে ব্যবহার করতে হয় এর রেঞ্জ হল -1 , 0 , 1। যার দ্বারা Hue, Saturation, Luminance কে বুঝানো হয়। -1 ব্যবহার করলে কোর পার্থক্য দেখা যাবে না। আমরা এখানে এই রকম মান ব্যবহার করতে পারি 0.346, 0.1, -0.5

• Properties অংশে আমরা আমাদের মূল background ছবিটির কিছু বৈশিষ্ট ঠিক করতে পারি। যেমন ছবি টি কি একবার ই দেখাবে না তার x এবং y অক্ষ বরাবর আসবে, কিংবা ছবিটির অবস্থান আমরা ঠিক করতে পারি।