নিজের পছন্দের ছবি দিয়ে তৈরী করুন গুগল ক্রোমের জন্য থিম

আমাদের মধ্যে অনেকেই গুগল ক্রোম নিয়মিত ব্যবহার করেন এর বিভিন্ন ফিচার এর জন্য। অনেকেই হয়ত এর থিম গ্যালারি থেকে অনেক মনমুগ্ধকর থিম ব্যবহার করেছেন। কিন্তু কখনো কি চিন্তা করেছেন এই থিম কিভাবে তৈরী করা যায়।

যারা এখনো গুগল ক্রোম এর জন্য থিম তৈরী করা শিখেননি তাদের জন্য আজকের এই আয়োজন। আপনারা চিন্তাও করতে পারবেন না এই থিম প্যাক গুলো তৈরী করা কত সহজ। আপনাদের যা যা প্রয়োজন তা হল-

  • আপনার থিম তৈরীর ইচ্ছে
  • আপনার থিম সাজানোর চিন্তাভাবনা
  • কিছু ছবি
  • একটু সময়

সাধারনত গুগল ক্রোম থিম এর জন্য CRX এক্সটেনশন ব্যবহার করে থাকে। এই CRX আর কিছুই না, একটি ZIP ভার্সন, যা গুগল ক্রোম ব্যবাহার করে। এটি [Newborn Nebula.crx] একটি থিম যা গুগল ক্রোম এর জন্য আমি তৈরী করার চেষ্টা করেছি। এর আনপ্যাকড ভার্সন [Newborn Nebula.zip] এখান হতে Download করুন।

প্রয়োজনীয় Tools সমূহ গুলো হল :

  • Wallpaper এবং আনুসাঙ্গিক কিছু ছবি, যা আমরা থিম এ ব্যবহার করব।
  • একটি গ্রফিক্স এডিটিং সফটওয়্যার যেমন Adobe Photoshop, GIMP, Paint .Net বা MS Paint। আর যদি আমাদের নেট স্পিড একটু ভাল থাকে তবে অনলাইন ভিত্তিক এই Aviary Phoenix ব্যবহার করতে পারেন।
  • একটি সাধারন মানের টেক্সট এডিটর যেমন Notepad, WordPad। কিন্তু আমি আপনাদের সবাইকে Notepad++ রিকমেন্ড করব।
  • কিছু ক্রিয়েটিভ চিন্তা।

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

প্রয়োজনীয় Tools যোগার করার পর আমরা আমাদের workspace এ আমাদের থিম এর নাম অনুসারে একটি Folder তৈরী করব। অতপর তার ভিতরে images নামে একটি Folder তৈরী করব। এই images নামক Folder এ আমাদের প্রয়োজনীয় Image File গুলো রাখব। নিচের চিত্রটি একটু লক্ষ্য করুন-
ধাপ ২ : ছবি নির্বাচন ও প্রয়োজনীয় পরিবর্তন

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

১. 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 অক্ষ বরাবর আসবে, কিংবা ছবিটির অবস্থান আমরা ঠিক করতে পারি।
এবারে সবকিছু ঠিকঠাক থাকলে মোটামুটি আমদের কাজ শেষ হয়ে এসেছে। আমাদের এবার আমাদের তৈরী কৃত থিম টি দেখবার পালা। থিম টি কেমন হল, তার পরিবর্তনের প্রয়োজন আছে কি না তা দেখবার জন্য আমাদের থিম টি test করতে হবে। তাই থিম টি দেখতে হলে প্রথমে আমরা Google Chrome চালু করি। এবার address bar এ লিখি chrome://extensions এবং এন্টার চাপি। Extensions পেজটি চালু হবে।
এখানে আমরা আমাদের ক্রোম এ install কৃত extensions গুলোর একটি লিষ্ট দেখতে পারব। + Developer mode এ ক্লিক করি। Developer mode এক্সপান্ড হবে।এখন আমরা Load unpacked extension এ ক্লিক করি এবং আমাদের work space টি দেখিয়ে দেই যেখানে “manifest.json” এবং “image” ফল্ডারটি অবস্থিত।কোন সমস্যা না হলে আমরা আমাদের থিম এর প্রিভিউ দেখতে পারব।

ধাপ ৪: থিম এর প্যাক তৈরী করন

এখন আমরা আমাদের তৈরীকৃত থিম এর এক্সটেনশন তৈরী করব। আমাদের থিম কে আমরা দুই ভাবে এক্সটেনশন রূপ দিতে পারি।

::  পদ্ধতি ১ :: আমরা গুগল ক্রোম এর Developer mode এর সহায়তা নিতে পারি। Developer mode অংশে “Pack extension...” বাটনে ক্লিক করি।

একটি pop-up বক্স আসবে। আমরা Extension Root Directory এর Browse বাটনে ক্লিক করে আমাদের থিম ফোল্ডারটি দেখিয়ে দেই, যেখানে “images” এবং “manifest.json” ফাইল দুটো রয়েছে। এবার Ok বাটনে ক্লিক করি।

থিম ফোল্ডারের নাম অনুকরনের একটি CRX এবং একটি PEM বা Private Key ফাইল তৈরী হবে।

::  পদ্ধতি ২ :: এই পদ্ধতিতে কাজ করতে থিম ফোল্ডার এ প্রবেশ করে এর “images” ফোল্ডার এবং “manifest.json” ফাইল দুটো সিলেক্ট করে এগুলো কে প্রথমে যেকোন সফটওয়্যার ব্যবহার করে ZIP আরকাইভ তৈরী করি। অতপর একে রিনেম করি Theme_name.CRX এই ফরমেটে। আপনার থিম এক্সটেনশন ফাইল তৈরী সম্পন্ন হল।

এবার এই CRX ফাইল টি আপরার বাউজার এর উপরে ড্রাগ করে এনে ছেড়ে দিন।

একটি পপ-আপ আসবে এই থিম ইনসটল করতে চাই কি না জানতে চাইবে। আপনি Continue চাপুন।

থিমটি ইনসটল হয়ে যাবে। এখন শুধু শিখলেন কিন্তু আমাদের সাথে Share করলেন না তা কিন্ত হবে না।

টিউনটি খারাপ লাগলেও আপনাদের তৈরীকৃত থিম গুলো আমাদের সাথে share করুন। আর আপনারা কোন আপডেট ব্যবাহার করলেও আমাদের জানান। আশাকরি সকলেই উপকৃত হবে।

এডমিন দের দৃষ্টি আকর্ষন করছি। যদি টিউনটি দ্বিতীয়বার হয় তবে এটি দয়া করে মুছে দেবেন। আর যার টিউনের সাথে মিলে গেল তার কাছে আগে ভাগেই মাপ চেয়ে নেই, কিন্তু এতটুকু বলব গুগল এর documentation এর help নিয়েই এতটুকু কাজ করেছি। কোন সাইট থেকে চুরি কিংবা কপি পেষ্ট করি নি।

এত সময় নিয়ে টিউনটি পরার জন্য সকলকে ধন্যবাদ।

এই টিউনটির পিডিএফ ভার্সন ডাওনলোড করুন এই লিংক হতে।

Level 2

আমি স্টারটেক স্টারটেক। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 20 টি টিউন ও 164 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

জানতে আগ্রহী, জানাতে আগ্রহী। হাত বাড়াই সাহায্য দেবার ও নেবার জন্য। সাধ্য খুবই কম দেবার মত। জ্ঞান আহোরনে ব্যস্ত থাকার চেষ্টা করি চাই বন্ধু হতে সবার...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

অত্যন্ত কাজের টিউন ! ধন্যবাদ।।

অত্যন্ত দরকারি টিউন… সরাসরি প্রিয়তে, আপনাকে অনেক অনেক ধন্যবাদ। ভাল থাকবেন।

There is a program called XS++ which it helps you to get into your phone’s system files and change anything you want for ex. the text fonts Unfortunately your phone isn’t compatible yet with the XS++ just like mine too I’m monitoring when it’s going to be released the newer version here and also you can find some tips also there for how 2…

I created a theme but cannot add the background photo
https://www.androidfreewares.com/

This helped me. Thanks alot
https://www.mozzec.com/

VTIN R4 Bluetooth Speaker V5.0 Portable Bluetooth Speaker with 24H Playtime,
Crystal Clear Stereo Sound, 10W Powerful
Waterproof Speaker, Built-in Mic, Support TF Card,
Suitable for Home and Outdoor
https://www.bluetoothspeakersbuy.com/

With over 100 Million Downloads Hago has received a lot of love from the players around the globe. Download and enjoy Games, Channels, Voice Chatting and have unlimited fun. Hago can be your getaway for all social and casual needs.
https://www.hago.pro/

Downloading apps for Android from Morph is a simple task and it is safe. All the Android APKs and programs downloads are at your finger tip. https://www.morphtvapk.com/

Tech Free Zone is your home to read reviews and download apk of all the popular Android Apps and Games just for free. https://www.techfreezone.com/

Download free and best Apps for your Android phone or tablet with APK Installer, including tool apps, lifestyle apps, communication apps, Entertainment Apps etc. https://www.apksinstaller.com/

Download the latest version of Apps for Android. All the best free apps you want on your Android are available to download in Droid Admin. https://www.droidadminapp.com/

Download lots of the latest Android apps, games, music, movies, TV, books, magazines & more at Anytime. Free Downloads available. https://www.android-lovers.com/

XAPK Installer is an app that you can use to install .xapk files to the Android smartphones and devices easily. This app is freeware so you can download it for free.
https://www.xapk.pro/

Flipaclip Apk is an interesting drawing tool that can download for your smartphones and pc devices easily. This is the best way to creating stories.
https://www.flipaclip.pro/

Yes player Apk is HD video player mainly for Android devices, it can play all the types of HD video formats and tons of other video formats.
https://www.yesplayer.pro/

YouCut Apk is the best Video Editor, best Video Trimmer and Joiner app for YouTube and other social media. FREE & No Watermark! Features: Free Movie Maker
https://www.youcutapk.com/

Remini Apk is an app for restoring old photos in a matter of seconds. Thanks to the latest artificial intelligence, restoring blurry, old, and low-quality photos is now a piece of cake.
https://www.reminiapk.com/

ZArchiver Apk is a app for archive management. It has a simple and clean interface. This lets you compress and archive, as well as view and decompresses files and folders
https://www.zarchiver.pro/

Health Benefits Of Using Sunflower Seeds That You Should Know
https://www.beatycare.com/

We are going to tell you his Net Worth in Indian Rupees, Age, Wiki, Bio, Family, and much more.

প্রয়োজনীয় Tools যোগার করার পর আমরা আমাদের workspace এ আমাদের থিম এর নাম অনুসারে একটি Folder তৈরী করব। অতপর তার ভিতরে images নামে একটি Folder তৈরী করব। এই images নামক Folder এ আমাদের প্রয়োজনীয় Image File গুলো রাখব। নিচের চিত্রটি একটু লক্ষ্য
https://www.filelinkedapk.com/applinked/
https://getandroidcamera.com/b612-camera-apk/

ই ছবিটি ক্রোম এর নিন্মে এক দিকে দেখা যায়। এখানে যে থিম প্যাক টি তৈরী করল তার একটি Signature সে ব্যবহার করতে পারে, যার সাহায্যে থিম ব্যবহারকারী
https://getandroidcamera.com/
https://www.filelinkedapk.com/aptoide-tv/

প্রয়োজনীয় Tools যোগার করার পর আমরা আমাদের workspace এ আমাদের থিম এর নাম অনুসারে একটি Folder তৈরী করব। অতপর তার ভিতরে images নামে একটি Folder তৈরী করব। এই images নামক Folder এ আমাদের প্রয়োজনীয় Image File গুলো রাখব। নিচের চিত্রটি একটু লক্ষ্য
https://www.acmarket-app.com/
https://getcleanmaster.com/