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

একটি Chrome এক্সটেনশন তৈরি করা একটি মোটামুটি সহজবোধ্য প্রক্রিয়া। আপনার হয়ে গেলে, ব্রাউজারটি কীভাবে কাজ করে তা উন্নত করতে আপনি এটি আপনার কম্পিউটারে ব্যবহার করতে সক্ষম হবেন৷

এক্সটেনশনটি সম্পূর্ণরূপে চালু হওয়ার আগে ব্রাউজারটির প্রয়োজনীয় কিছু মৌলিক উপাদান রয়েছে। আপনার কাস্টম এক্সটেনশনটি কীভাবে আপলোড করা বা অন্য কারো সাথে শেয়ার করার প্রয়োজন ছাড়াই Chrome-এ কাজ করার জন্য তা সহ আমরা নীচে এই সমস্ত বিষয়ে আলোচনা করব৷

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

একটি জটিল ক্রোম এক্সটেনশন তৈরি করা একটি প্রক্রিয়া যা আপনি নীচে যা দেখতে পাবেন তার চেয়ে অনেক বেশি বিস্তারিত, তবে সাধারণ প্রক্রিয়াটি একই। আপনি আজ ব্যবহার করা শুরু করতে পারেন এমন একটি Chrome এক্সটেনশন কীভাবে তৈরি করবেন তা শিখতে পড়তে থাকুন৷

৷

টিপ :আপনার নিজের এক্সটেনশন কতটা দুর্দান্ত হতে পারে তা দেখতে, এই আশ্চর্যজনক Chrome এক্সটেনশনগুলি দেখুন৷

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

এই নির্দেশিকা ব্যবহার করে, আপনি একটি সাধারণ ক্রোম এক্সটেনশন তৈরি করবেন যা আপনার পছন্দের কিছু ওয়েবসাইটকে তালিকাভুক্ত করে। এটি সম্পূর্ণরূপে কাস্টমাইজযোগ্য এবং আপডেট করা সত্যিই সহজ৷

৷

এখানে কি করতে হবে:

একটি ফোল্ডার তৈরি করুন যা এক্সটেনশন তৈরি করে এমন সমস্ত ফাইল ধারণ করবে।
এই এক্সটেনশনের প্রয়োজন এমন বেস ফাইলগুলি তৈরি করুন:manifest.json , popup.html , background.html , styles.css .
খুলুন popup.html একটি টেক্সট এডিটরে এবং তারপরে নিচের সবকটি সেখানে পেস্ট করুন, আপনার শেষ হয়ে গেলে এটি সংরক্ষণ করা নিশ্চিত করুন।

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

লিঙ্ক এবং লিঙ্ক পাঠ্য সম্পাদনা করতে নির্দ্বিধায়, অথবা আপনি যদি Chrome এক্সটেনশনকে আমরা ঠিক তেমন করতে চান, তবে সবকিছু একই রাখুন৷

manifest.json খুলুন টেক্সট এডিটরে এবং নিচের কপি/পেস্ট করুন:

{
“update_url”:“https://clients2.google.com/service/update2/crx”,

“manifest_version”:2,
“নাম”:“প্রিয় সাইট”,
"description":"আমার সব প্রিয় ওয়েবসাইট।",
“সংস্করণ”:“1.0”,
"আইকন":{৷
“16”:“icon.png”,
“32”:“icon.png”,
“48”:“icon.png”,
“128”:“icon.png”
},

“পটভূমি”:{
“পৃষ্ঠা”:”background.html”
},

    "ব্রাউজার_অ্যাকশন" :{
        “default_icon” :“icon.png”,
        “default_title” :“প্রিয় সাইট”,
        “default_popup”:“popup.html”
    }
}

এই কোডের ভোজ্য ক্ষেত্রগুলির মধ্যে রয়েছে নাম , বর্ণনা , এবং default_title .

styles.css খুলুন এবং নিম্নলিখিত কোড পেস্ট করুন। এটি পপআপ মেনুটিকে আরও আকর্ষণীয় করে তুলতে এবং ব্যবহার করা আরও সহজ করে তোলে৷

#myUL
লিস্ট-স্টাইল-টাইপ:কোনটিই নয়;
   প্যাডিং:0;
   মার্জিন:0;
   প্রস্থ:300px;
}

#myUL li a {
  সীমানা:1px কঠিন #ddd;
  মার্জিন-টপ:-1px;
  ব্যাকগ্রাউন্ড-রং:#f6f6f6;
  প্যাডিং:12px;
  টেক্সট-সজ্জা:কিছুই নয়;
  font-size:18px;
  রঙ:কালো;
  ডিসপ্লে:ব্লক;
  ফন্ট-ফ্যামিলি:‘নোটো সানস’, সান-সেরিফ;
}

#myUL li a:hover:not(.header) {
ব্যাকগ্রাউন্ড-রং:#eee;
}

CSS ফাইলে আপনি অনেক কিছু পরিবর্তন করতে পারেন। আপনার পছন্দ অনুসারে কাস্টমাইজ করার জন্য আপনার Chrome এক্সটেনশন তৈরি করার পরে এই বিকল্পগুলির সাথে খেলুন৷

এক্সটেনশনের জন্য একটি আইকন তৈরি করুন এবং এটির নাম দিন icon.png . এটি আপনার Chrome এক্সটেনশন ফোল্ডারে রাখুন। আপনি উপরের কোডে দেখতে পাচ্ছেন, আপনি এই আকারগুলির জন্য একটি পৃথক আইকন তৈরি করতে পারেন:16×16 পিক্সেল, 32×32 এবং আরও অনেক কিছু৷

টিপ: ক্রোম এক্সটেনশন তৈরি করার বিষয়ে গুগলের কাছে আরও তথ্য রয়েছে। অন্যান্য উদাহরণ এবং উন্নত বিকল্প রয়েছে যা আমরা এখানে দেখানো সহজ ধাপগুলি অতিক্রম করে।

কীভাবে Chrome এ একটি কাস্টম এক্সটেনশন যোগ করবেন

এখন আপনি Chrome এক্সটেনশন তৈরি করেছেন, এটি ব্রাউজারে যুক্ত করার সময় এসেছে যাতে আপনি এইমাত্র তৈরি করা সমস্ত ফাইল ব্যবহার করতে পারেন। একটি কাস্টম এক্সটেনশন ইনস্টল করার জন্য একটি পদ্ধতি জড়িত যা আপনি কীভাবে একটি সাধারণ ক্রোম এক্সটেনশন ইনস্টল করবেন তার থেকে আলাদা৷

Chrome মেনু থেকে, আরো টুল -এ যান> এক্সটেনশন . অথবা, chrome://extensions/ টাইপ করুন ঠিকানা বারে।
ডেভেলপার মোড এর পাশের বোতামটি নির্বাচন করুন যদি এটি ইতিমধ্যে নির্বাচিত না হয়। এটি একটি বিশেষ মোড চালু করবে যা আপনাকে আপনার নিজের Chrome এক্সটেনশনগুলি আমদানি করতে দেয়৷

লোড আনপ্যাক ব্যবহার করুন উপরের ধাপ 1 এর সময় আপনি যে ফোল্ডারটি তৈরি করেছেন তা নির্বাচন করতে সেই পৃষ্ঠার উপরের বোতামটি।

যদি আপনি সেগুলি দেখতে পান তবে তা গ্রহণ করুন৷ অন্যথায়, আপনার কাস্টম-নির্মিত ক্রোম এক্সটেনশনটি ব্রাউজারের উপরের ডানদিকের কোণায় থাকা অন্য যেকোনটির সাথে দেখাবে৷

আপনার Chrome এক্সটেনশন সম্পাদনা করা হচ্ছে

এখন যেহেতু আপনার ক্রোম এক্সটেনশনটি ব্যবহারযোগ্য, আপনি এটিকে নিজের করতে পরিবর্তন করতে পারেন৷

styles.css ফাইলটি নিয়ন্ত্রণ করে কিভাবে এক্সটেনশনটি প্রদর্শিত হবে, তাই আপনি সামগ্রিক তালিকা শৈলী সামঞ্জস্য করতে এবং ফন্টের রঙ বা প্রকার পরিবর্তন করতে পারেন। W3Schools হল সেরা সম্পদগুলির মধ্যে একটি যা আপনি CSS এর সাথে করতে পারেন এমন সমস্ত বিভিন্ন জিনিস সম্পর্কে জানার জন্য।

ওয়েবসাইটগুলি যে ক্রমানুসারে তালিকাভুক্ত হয়েছে তা পরিবর্তন করতে, বা আরও সাইট যোগ করতে বা বিদ্যমানগুলিকে সরাতে, popup.html ফাইলটি সম্পাদনা করুন৷ শুধুমাত্র URL এবং নাম আপনার সম্পাদনা রাখা নিশ্চিত করুন. অন্য সব অক্ষর, যেমন

এবং , প্রয়োজনীয় এবং পরিবর্তন করা উচিত নয়। W3Schools-এর HTML টিউটোরিয়াল সেই ভাষা সম্পর্কে আরও জানার জন্য একটি ভাল জায়গা।