কীভাবে একটি ক্রোম এক্সটেনশন তৈরি করবেন

'আমাদের বর্তমান জীবনের মধ্যে, আমরা আমাদের বিনোদন এবং অনুসন্ধানের উদ্দেশ্যে সামাজিক মিডিয়া অ্যাপস এবং Google সার্চ ইঞ্জিন ব্যবহার করতে বেশি আগ্রহী, যেমন, 'Google' সার্চ ইঞ্জিনের মাধ্যমে কিছু শিক্ষামূলক বিষয় নিয়ে গবেষণা করতে এবং সেইসাথে সাধারণ জ্ঞান অর্জন করতে। কিছু অনুসন্ধান করার জন্য Google সার্চ ইঞ্জিন ব্যবহার করতে, আমাদের অবশ্যই আমাদের মোবাইল ফোন, ল্যাপটপ বা ব্যক্তিগত কম্পিউটারে ইতিমধ্যেই কিছু ব্রাউজার ইনস্টল করা থাকতে হবে। আজকের শতাব্দীর সর্বাধিক ব্যবহৃত এবং দক্ষ ব্রাউজারগুলির মধ্যে একটি হল 'গুগল ক্রোম' ব্রাউজার যা এক্সটেনশনের ইউটিলিটি সহ অনেক ভাল কার্যকারিতা নিয়ে এসেছে। 'এক্সটেনশন' হল ওয়েবসাইট এবং বিভিন্ন ফাংশনকে সীমাবদ্ধ বা অনুমতি দেওয়ার জন্য যেকোনো ব্রাউজারে পাওয়া প্লাগইন। এই এক্সটেনশনগুলি সাধারণত অন্তর্নির্মিত আসে না; যখনই প্রয়োজন হয় তখন আপনাকে আলাদাভাবে আপনার ব্রাউজারে প্রতিটি এক্সটেনশন যোগ করতে হবে। আপনি যদি প্রযুক্তিতে সামান্য বিশেষজ্ঞ হন, তবে আপনি কয়েক ধাপে একটি এক্সটেনশন তৈরি করতে এবং যুক্ত করতে ম্যানিফেস্ট JSON ফাইলগুলির ব্যবহার জানেন। তাই, এই নিবন্ধটি Google Chrome ব্রাউজারে একটি নতুন এক্সটেনশন তৈরি করার সমস্ত পদক্ষেপগুলি কভার করবে৷

একটি এক্সটেনশন তৈরি করার পদ্ধতিটি দেখার আগে, আপনাকে নিশ্চিত করতে হবে যে আপনার Google Chrome ব্রাউজার ইতিমধ্যেই চালু হয়েছে এবং “Google” সার্চ ইঞ্জিনে কোনো ব্যাকগ্রাউন্ড নেই। আপনি দেখতে পাচ্ছেন যে নীচে সংযুক্ত চিত্রটির সার্চ ইঞ্জিন 'Google.com' এর জন্য কোন পটভূমি নেই, অর্থাৎ শুধুমাত্র সাদা ব্যাকগ্রাউন্ড৷

এক্সটেনশন ফোল্ডার যোগ করুন

আপনার উইন্ডোজ সিস্টেমের অ্যাপগুলি থেকে আপনার ভিজ্যুয়াল স্টুডিও কোড টুলটি দ্রুত খুলুন। ভিজ্যুয়াল স্টুডিও কোডটি সঠিকভাবে খুলতে এবং এটিকে আমাদের ব্যবহারের জন্য সক্ষম করতে 1 মিনিট পর্যন্ত সময় লাগতে পারে। এটি সঠিকভাবে চালু হওয়ার পরে এবং ব্যবহারের জন্য প্রস্তুত হওয়ার পরে, আমরা নীচে দেখানো শীর্ষ টাস্কবারে 'ফাইল' মেনু তালিকার মাধ্যমে ইতিমধ্যে তৈরি করা ফোল্ডার 'এক্সটেনশন' যুক্ত করেছি। 'এক্সটেনশন' ফোল্ডারটি তৈরি করার পরে, আমরা এটিতে 'ইমেজ' নামে আরেকটি ফোল্ডার যুক্ত করেছি যাতে ব্রাউজারে এক্সটেনশনের জন্য আইকন হিসাবে ব্যবহার করা ছবিগুলি রয়েছে। এর সাথে, আমরা একটি 'manifest.json' ফাইল এবং একটি জাভাস্ক্রিপ্ট ফাইল যোগ করেছি যার নাম 'script.js' একটি নতুন এক্সটেনশন তৈরি করতে এবং এটি ব্রাউজারে যুক্ত করতে। 'Google' এর ব্যাকগ্রাউন্ড পরিবর্তন করতে একটি এক্সটেনশন তৈরি করতে এবং ব্যবহার করতে JSON-এ কাজ শুরু করতে manifest.json ফাইল থেকে শুরু করা যাক।

ম্যানিফেস্ট ফাইল তৈরি করুন

manifest.json ফাইলের মধ্যে, আপনাকে দেখানো-নীচে 'JSON' কোড যোগ করতে হবে। এই কোডটি আমাদের Google Chrome ব্রাউজারে একটি এক্সটেনশন তৈরি এবং যোগ করার জন্য প্রকৃত কনফিগারেশন স্ক্রিপ্ট। এই JSON কোডটি '2' হিসাবে ভেরিয়েবল ম্যানিফেস্ট সংস্করণের জন্য শুরু করা হয়েছে এবং তৈরি করা একটি এক্সটেনশনের নাম, অর্থাৎ, 'পটভূমি পরিবর্তন করুন'। এর পরে, আমরা 'বর্ণনা' ভেরিয়েবলের মধ্যে আমাদের এক্সটেনশনের জন্য সংক্ষিপ্ত বিবরণ যোগ করেছি।

এর সাথে, আমরা '1.0' হিসাবে একটি এক্সটেনশনের সংস্করণ যুক্ত করেছি। 'এক্সটেনশন'-এর জন্য সমস্ত মৌলিক কনফিগারেশন তৈরি করার পরে, আমাদের এক্সটেনশনগুলির জন্য একটি আইকন হিসাবে ব্যবহার করার জন্য চিত্র আইকনে পাথ যোগ করতে হবে। ভেরিয়েবল 'ব্রাউজার'কে Google Chrome ব্রাউজারের শীর্ষ টাস্কবারের জন্য এক্সটেনশন আইকন সেট করার জন্য সংজ্ঞায়িত করা হয়েছে, অর্থাৎ, যেখানে সমস্ত এক্সটেনশনগুলি নির্দিষ্ট বা সমস্ত সাইটের জন্য ভবিষ্যতে ব্যবহারের জন্য সক্ষম করার পরে প্রদর্শিত হয়৷ এর পরে, আমরা বিভিন্ন আকারের তিনটি ইমেজ ফাইলের পাথ যোগ করেছি যাতে ব্রাউজার প্রতিবার বিভিন্ন ফাইল ব্যবহার করতে পারে।

সেই সাথে, গুগল ক্রোমের শীর্ষ টাস্কবার থেকে 'এক্সটেনশন' আইকনে ক্লিক করার পরে কী চিত্র প্রদর্শিত হবে তা প্রদর্শন করতে 'পৃষ্ঠা_অ্যাকশন' ভেরিয়েবল ব্যবহার করা হয়েছে। 'Default_icon' ভেরিয়েবলটি এর মধ্যে ব্যবহার করা হয়েছে, প্রতিটি রিলোড করার সময় ইমেজগুলিকে আইকন হিসাবে ব্যবহার করার জন্য এর তিনটি ভিন্ন পাথ মান সহ। তিনটি ভিন্ন ইমেজ ফাইল এই উদ্দেশ্যে ব্যবহার করা হয়. শেষ কন্টেন্ট_স্ক্রিপ্ট ভেরিয়েবলে মোট 2টি নতুন ভেরিয়েবল লাগে, যেমন, ম্যাচ এবং CSS। 'ম্যাচ' ভেরিয়েবলটিতে এই নতুন এক্সটেনশনটি তৈরি হওয়ার পরে পরিবর্তন করার জন্য ওয়েবসাইটের পথ রয়েছে৷ সেই সাথে, 'CSS' ভেরিয়েবলটিতে একটি CSS ফাইলের নাম রয়েছে যা এক্সটেনশনের জন্য আবেদন করার পরে Google.com-এর স্টাইলিং এর জন্য ব্যবহার করা হবে, অর্থাৎ, এক্সটেনশন সক্রিয় করার পরে প্রতিটি রিলোড করার পরে Google.com স্টাইল করা। এখন যেহেতু এই কোডটি সম্পূর্ণ এবং ব্যবহারের জন্য প্রস্তুত, শুধু এটিকে দ্রুত সংরক্ষণ করুন এবং 'main.css' ফাইলের দিকে যান৷

main.css CSS ফাইলের মধ্যে, আমরা আমাদের ম্যানিফেস্ট ফাইল এক্সটেনশন তৈরি করার জন্য স্টাইলিং যোগ করছি। এইচটিএমএল 'বডি' ট্যাগ ব্যবহার করে স্টাইলিং প্রয়োগ করা হবে, অর্থাৎ ম্যানিফেস্ট ফাইলের সম্পূর্ণ 'বডি' এলাকায় প্রয়োগ করা হবে। আমরা সার্চ ইঞ্জিন থেকে একটি ইমেজ ফাইলের 'URL' ব্যবহার করে Google.com এর জন্য নতুন ব্যাকগ্রাউন্ড সেট করছি। এখন, কিছু করার আগে আপনার কোড সংরক্ষণ করুন।

প্রয়োজনীয় কোডগুলি সম্পূর্ণ করার পরে, যেমন, manifest.json এবং main.css ফাইল, আমাদের নতুন ট্যাবে URL chrome://extensions' এর মাধ্যমে Google Chrome ব্রাউজারে এক্সটেনশন ইউটিলিটি খুলতে হবে। এক্সটেনশন ইউটিলিটি এলাকা খোলা হয়. এটির বিকাশকারী মোড থেকে, নীচের ছবিতে প্রদর্শিত 'লোড আনপ্যাকেজড' বোতামের মাধ্যমে এটিকে একটি এক্সটেনশন করতে আপনার স্থানীয় সিস্টেম থেকে আনপ্যাক করা 'এক্সটেনশন' ফোল্ডারটি লোড করতে হবে৷ ক্রোম ব্রাউজারে এক্সটেনশনটি কার্যকরীভাবে যুক্ত করা হয়েছে, যেমনটি প্রদর্শিত হয়েছে। এটি সম্পূর্ণরূপে কাজ করতে ত্রুটিগুলি সরান৷

'এক্সটেনশন' আইকন থেকে, টাস্কবারে প্রদর্শন করতে 'ব্যাকগ্রাউন্ড পরিবর্তন করুন' এক্সটেনশনটি নির্বাচন করুন, যেমন, 'সি' আইকন এক্সটেনশন।

Google.com পুনরায় লোড করার পরে, এই এক্সটেনশনটি ব্যবহার করে এর ব্যাকগ্রাউন্ড আপডেট করা হয়েছে।

উপসংহার

উইন্ডোজ সিস্টেমে ব্রাউজার ব্যবহারের ব্যাখ্যা থেকে শুরু করে, আমরা যেকোনো ব্রাউজারে এক্সটেনশনের গুরুত্ব নিয়েও আলোচনা করেছি। এক্সটেনশনগুলির সংক্ষিপ্ত ব্যাখ্যার পরে, আমরা Google Chrome ব্রাউজারের জন্য একটি এক্সটেনশন তৈরি করতে ম্যানিফেস্ট JSON ফাইলটি ব্যবহার করার পদ্ধতি এবং 'Google.com' সার্চ ইঞ্জিনের পটভূমি পরিবর্তন করতে কীভাবে এটি ব্যবহার করতে হয় তা ব্যাখ্যা করেছি। গুগল ক্রোমে এক্সটেনশনটি লোড করার পরে, আমরা এটির ব্যাকগ্রাউন্ড পরিবর্তন করতে Google.com এ এটি ব্যবহার করছি।