ক্রোম ওয়েব এক্সটেনশন - কোন পূর্ববর্তী কোডিং অভিজ্ঞতার প্রয়োজন নেই: 6 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:57

ক্রোম এক্সটেনশন হল একটি ছোট প্রোগ্রাম যা ব্যবহারকারীদের ব্রাউজিং অভিজ্ঞতা উন্নত করার জন্য তৈরি করা হয়। ক্রোম এক্সটেনশন সম্পর্কে আরও তথ্যের জন্য https://developer.chrome.com/extensions এ যান।

একটি ক্রোম ওয়েব এক্সটেনশন তৈরি করতে, কোডিং প্রয়োজন, তাই নীচের ওয়েবসাইটে HTML, JavaScript এবং CSS পর্যালোচনা করা খুবই উপকারী:

www.w3schools.com/default.asp (w3 স্কুল কোডিং রিসোর্সের জন্য একটি ভালো ওয়েবসাইট)

কোড করতে জানেন না? চিন্তা করবেন না, এই টিউটোরিয়াল পথ নির্দেশ করতে সাহায্য করবে।

ক্রোম এক্সটেনশান সম্পর্কে সবচেয়ে ভালো জিনিস হল সেগুলো কাস্টমাইজ করা যায়। এটি কেবল একটি নির্দিষ্ট জিনিস নয় যা করা যায়, তাই সৃজনশীল হন।

সরবরাহ

যেসব সরবরাহের প্রয়োজন তা নিচে দেওয়া হল:

• একটি টেক্সট এডিটর সহ একটি কম্পিউটার (আমি নোটপ্যাড ব্যবহার করছি)
• গুগল ক্রম

এবং সব শেষ!

ধাপ 1: ডিরেক্টরি তৈরি করুন

প্রথমে, সমস্ত ফাইল রাখার জন্য একটি ফোল্ডার তৈরি করুন এবং এর নাম দিন 'এক্সটেনশন'। ইচ্ছা করলে নাম পরে পরিবর্তন করা যাবে।

পদক্ষেপ 2: ম্যানিফেস্ট ফাইল তৈরি করুন এবং এটি কোড করুন

ম্যানিফেস্ট ফাইলটি এক্সটেনশনের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ। এটি এক্সটেনশনকে ঠিক কী করতে হবে এবং কী করতে হবে তা বলে। ম্যানিফেস্ট ফাইলগুলি JSON- এ ফরম্যাট করা হয়। প্রথম ধাপ হল একটি টেক্সট এডিটর খুলে একটি নতুন ফাইল 'ম্যানিফেস্ট.জসন' হিসেবে সেভ করা।

পরবর্তী নিচের স্ক্রিপ্টটি টাইপ করুন:

{

"name": "First Extension", "version": "1.0", "description": "আমি একটি এক্সটেনশন কোড করতে পারি", "manifest_version": 2, "browser_action": {"default_title": "প্রথম এক্সটেনশন"}}

মানগুলির পরে কমাগুলি মনে রাখবেন!

এটি টাইপ করার পরে, ম্যানিফেস্ট ফাইলটি সংরক্ষণ করুন এবং ক্রোম: // এক্সটেনশনে যান (এর জন্য ব্রাউজার হিসাবে ক্রোম ব্যবহার করা উচিত)। একবার chrome: // extensions এ, ডেভেলপার মোড চালু করুন। তারপরে, 'আনপ্যাকড লোড করুন' বোতাম টিপুন এবং 'এক্সটেনশন' ফোল্ডারটি নির্বাচন করুন।

ড্রাম রোল দয়া করে …

হ্যাঁ! এটি একটি এক্সটেনশন, ব্যতীত … এর ধরণের বিরক্তিকর। এটি আপাতত আক্ষরিকভাবে কিছুই করে না, তবে শীঘ্রই এটি দুর্দান্ত হবে।

ধাপ 3: আইকন তৈরি করুন এবং ম্যানিফেস্ট আপডেট করুন

আইকন আঁকার জন্য ভালো কাজ করে এমন একটি ওয়েবসাইট হল https://www.piskelapp.com/। ব্যবহারের জন্য অন্যান্য অঙ্কন প্রোগ্রামও পাওয়া যায়। আইকনগুলি বর্গাকার হওয়া উচিত। এই প্রকল্পটি 16x16, 32x32, 48x48 এবং 128x128 আইকন ব্যবহার করবে। আইকন তৈরি হয়ে গেলে, এক্সটেনশন ফোল্ডারে 'ইমেজ' নামে একটি ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারে আইকনটি রাখুন। ইমেজের আকার অনুযায়ী নামকরণ করা ভাল ধারণা হতে পারে। উদাহরণস্বরূপ, 'icon32.png'। নতুন কোড নিচে দেওয়া হল:

{

"নাম": "প্রথম এক্সটেনশন", "সংস্করণ": "1.0", "বর্ণনা": "আমি একটি এক্সটেনশন কোড করতে পারি", "manifest_version": 2, "browser_action": {"default_title": "প্রথম এক্সটেনশন", " default_icon ": {" 16 ":" images/icon16-p.webp

ম্যানিফেস্ট কোডের রেফারেন্সের জন্য, https://developer.chrome.com/extensions/manifest- এ যান।

ধাপ 4: একটি পপআপ যোগ করুন

এই এক্সটেনশনে একটি পপআপ থাকবে। পপআপ একটি এইচটিএমএল (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ) ফাইল, তাই প্রথমে এইচটিএমএল, সিএসএস, এবং জাভাস্ক্রিপ্টের মূল বিষয়গুলি শেখা ভাল।

প্রথমে এক্সটেনশন ফোল্ডারে একটি ডকুমেন্ট 'popup.html' ফাইল হিসেবে সেভ করুন।

এরপরে, ম্যানিফেস্ট ফাইলটি 'popup.html' দেখানোর জন্য সম্পাদনা করুন যখন এটি ক্লিক করা হয়। নতুন কোড নিচে দেওয়া হল:

{

"নাম": "প্রথম এক্সটেনশন", "সংস্করণ": "1.0", "বর্ণনা": "আমি একটি এক্সটেনশন কোড করতে পারি", "manifest_version": 2, "browser_action": {"default_title": "প্রথম এক্সটেনশন", " default_icon ": {" 16 ":" images/icon16-p.webp

কমা ভুলবেন না!

এখন, যদি নিম্নলিখিত HTML কোডটি popup.html এ যোগ করা হয়, তাহলে এটি ক্লিক করার সময় 'হ্যালো ওয়ার্ল্ড' দেখাবে।

ওহে বিশ্ব

ধাপ 5: এটি সুন্দর দেখান এবং এটি ইন্টারেক্টিভ করুন।

যদি একটি মৌলিক এইচটিএমএল লাইন টাইপ করা হয়, তাহলে এটি সর্বনিম্ন সম্পন্ন করে। যদি CSS (ক্যাসকেডিং স্টাইল শীট) যোগ করা হয়, তাহলে এটি শীতল দেখাবে, এবং যদি জাভাস্ক্রিপ্ট যোগ করা হয়, তাহলে এটি আরও ইন্টারেক্টিভ হতে পারে। এই টিউটোরিয়ালটি এইচটিএমএল, জাভাস্ক্রিপ্ট এবং সিএসএস ব্যাখ্যা করে বিস্তারিতভাবে যাবে না, কিন্তু অনলাইনে প্রচুর সম্পদ রয়েছে। নীচে সহজ 'হ্যালো ওয়ার্ল্ড' প্রোগ্রামের কোড, তারপর যথাক্রমে আরও রঙিন প্রোগ্রাম:

ওহে বিশ্ব

ওহে বিশ্ব

#হ্যালো {ব্যাকগ্রাউন্ড-কালার: #000000; রঙ: #ff0000; সীমানা: 8px প্রারম্ভিক #86a3b2; সীমানা-ব্যাসার্ধ: 50px; রূপান্তর: ঘোরান (57 ডিগ্রি); প্যাডিং: 10px; ব্যবহারকারী-নির্বাচন: কোনটিই নয়; কার্সার: ক্রসহেয়ার; রূপান্তর: রূপান্তর 2s; } #হ্যালো: হোভার {ট্রান্সফর্ম: রোটেট (-417 ডিগ্রি); }

এই দ্বিতীয় উদাহরণটি একজন শিক্ষানবিসের জন্য খুব বিভ্রান্তিকর হতে পারে। কিন্তু, এটি আপনাকে দেখানোর জন্য ছিল যে একটি প্রোগ্রাম/এক্সটেনশনের জন্য CSS কতটা গুরুত্বপূর্ণ। এখন একটি বিশ্রাম নেওয়ার এবং কিছু HTML5 কোডিং শেখার এবং কিছু রেফারেন্সের জন্য developer.chrome.com ব্যবহার করার একটি ভাল সময় হবে। এটি কিছু সময় নিতে পারে, কিন্তু একটি মহান এক্সটেনশন করা যেতে পারে।

ধাপ 6: এটি Chrome ওয়েব স্টোরে প্রকাশ করা

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

একটি এক্সটেনশন সর্বজনীন করার জন্য প্রথম কাজটি হল একটি এক্সটেনশন ফোল্ডারকে একটি জিপ ফাইলে পরিণত করা। দ্বিতীয় কাজটি হল https://chrome.google.com/webstore/category/extensions এ যান এবং একটি গুগল অ্যাকাউন্টে লগ ইন করুন। তারপরে, সেটিংস গিয়ার বোতামে ক্লিক করুন এবং তারপরে 'বিকাশকারী ড্যাশবোর্ড' এ ক্লিক করুন। জিপ ফাইল আপলোড করতে 'নতুন আইটেম' বোতাম টিপুন। একবার সেখানে গেলে, স্টোর তালিকা, গোপনীয়তা এবং মূল্য নির্ধারণ সম্পাদনা করা প্রয়োজন। একটি এক্সটেনশন সহজেই প্রকাশ করা যেতে পারে যদি এটি পর্যালোচনার জন্য জমা দেওয়া হয়।

এখন যে এক্সটেনশন শেষ হয়েছে, কোড চালিয়ে যান!