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

আজ আমি আপনাকে ভ্যানিলা জাভাস্ক্রিপ্টে একটি ক্রোম এক্সটেনশান কীভাবে তৈরি করব তা দেখাতে যাচ্ছি - এটি, প্রতিক্রিয়া, কৌণিক বা ভ্যুর মতো অতিরিক্ত ফ্রেমওয়ার্ক ছাড়াই সহজ জাভাস্ক্রিপ্ট।

একটি ক্রোম এক্সটেনশন তৈরি করা কঠিন হতে হবে না। প্রোগ্রামার হিসাবে আমার প্রথম বছরে, আমি দুটি এক্সটেনশন প্রকাশ করেছি এবং উভয়কে কেবল এইচটিএমএল, সিএসএস এবং সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে তৈরি করেছি। এই নিবন্ধে, আমি আপনাকে এটি কয়েক মিনিটের মধ্যে কীভাবে করব through

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

ক্রোম এক্সটেনশানগুলি সম্পর্কে জানুন

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

প্রয়োজনীয়তা

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

আপনার ফাইলগুলি সেট আপ করা হচ্ছে

এই টিউটোরিয়ালে, আমরা একটি সাধারণ ড্যাশবোর্ড তৈরি করব যা ব্যবহারকারীকে নাম দিয়ে অভ্যর্থনা জানায়। আসুন আমাদের এক্সটেনশানটিকে "সাধারণ গ্রিটিং ড্যাশবোর্ড" বলি।

প্রথমত, আপনাকে তিনটি ফাইল তৈরি করতে হবে: index.html, main.css এবং main.js. এটি নিজের ফোল্ডারে রাখুন। এর পরে, বেসিক এইচটিএমএল ডকুমেন্ট সেটআপ সহ এইচটিএমএল ফাইলটি পূরণ করুন এবং এতে সিএসএস এবং জেএস ফাইলগুলির সাথে যুক্ত হন:

সাধারণ স্বাগতম ড্যাশবোর্ড
================================= // ->
  
সাধারণ স্বাগতম ড্যাশবোর্ড </ শিরোনাম></pre><pre>  <link rel = "stylesheet" type = "text / css" media = "screen" href = "main.css" /></pre><pre></ head></pre><pre><body></pre><pre>   <! - Mein Code wird hier abgelegt -></pre><pre>   <script src = "main.js"> </ script></pre><pre></ body></pre><pre></ html></pre><h3>আপনার ম্যানিফেস্ট.জসন ফাইলটি কাস্টমাইজ করুন</h3><p>আপনার প্রকল্পের ক্রোম এক্সটেনশান হিসাবে ব্যবহার করার জন্য এই ফাইলগুলি যথেষ্ট নয়। এটি করার জন্য, আমাদের একটি मॅਨੀিফেস্ট.জসন ফাইল দরকার, যা আমরা আমাদের এক্সটেনশান সম্পর্কিত কিছু প্রাথমিক তথ্যের সাথে খাপ খাইয়ে নিই। আপনি এই ফাইলটি গুগল বিকাশকারী পোর্টাল থেকে ডাউনলোড করতে পারেন বা কেবলমাত্র একটি নতুন ফাইলে নিম্নলিখিত লাইনগুলি অনুলিপি / পেস্ট করতে পারেন এবং এটি আপনার ফোল্ডারে ম্যানিফেস্ট.জসন হিসাবে সংরক্ষণ করতে পারেন:</p><pre>name "নাম": "শুরু করার উদাহরণ", "সংস্করণ": "1.0", "বিবরণ": "একটি এক্সটেনশন তৈরি করুন!", "ম্যানিফেস্ট_ভার্সন": 2</pre><p>এখন আসুন আমাদের এক্সটেনশান সম্পর্কে আরও কিছু তথ্য দিয়ে নমুনা ফাইলটি আপডেট করুন। আমরা কেবল এই কোডটির প্রথম তিনটি মান পরিবর্তন করতে চাই: নাম, সংস্করণ এবং বিবরণ। আমাদের নাম এবং এক-লাইন বর্ণন লিখুন। যেহেতু এটি আমাদের প্রথম সংস্করণ, তাই আমরা এই মানটি 1.0 এ রাখি। ম্যানিফেস্ট_ভারশন নম্বরটি একই থাকে।</p><p>এর পরে, ক্রোমকে এই এক্সটেনশানটি দিয়ে কী করতে হবে তা জানাতে আমরা কয়েকটি লাইন যুক্ত করব।</p><pre>name "নাম": "সাধারণ গ্রিটিং ড্যাশবোর্ড", "সংস্করণ": "1.0", "বিবরণ": "এই ক্রোম এক্সটেনশানটি প্রত্যেকবার নতুন ট্যাব খোলার সময় ব্যবহারকারীকে অভ্যর্থনা জানায়" "," ম্যানিফেস্ট_ভার্সন ": 2</pre><pre>"ছদ্মবেশী": "বিভক্ত", "ক্রোম_আরল_ওভারাইডস": {"নিউট্যাব": "সূচিপত্র। html"}, "অনুমতিগুলি": ["অ্যাক্টিভ ট্যাব"],</pre><pre>"আইকন": 12 "128": "icon.png"}</pre><p>"ছদ্মবেশী" মান: "বিভাজন" Chrome কে জানায় যে এটি যখন ছদ্মবেশী মোডে থাকে তখন এই এক্সটেনশনটি দিয়ে কী করা উচিত। "বিভক্ত" দিয়ে এক্সটেনশানটি একটি পৃথক প্রক্রিয়াতে চালিত করা যেতে পারে যদি ব্রাউজারটি ছদ্মবেশী হয়। আরও বিকল্পের জন্য, ক্রোম বিকাশকারী ডকুমেন্টেশন দেখুন।</p><p>আপনি সম্ভবত দেখতে পাচ্ছেন, chrom_url_overrides একটি নতুন ট্যাব খুললে ক্রোমকে index.html খুলতে বলে। "অনুমতিগুলি" এর মান ব্যবহারকারীকে একটি পপ-আপ দেয় যাতে তারা জানায় যে এই এক্সটেনশনটি নতুন ট্যাবটি ইনস্টল করার চেষ্টা করলে ওভাররাইট করে দেবে।</p><p>অবশেষে, আমরা ক্রোমকে ফেভিকন হিসাবে কী প্রদর্শিত হবে তা বলি: আইকন নামের একটি ফাইল p</p><h3>একটি আইকন তৈরি করুন</h3><p>যেহেতু আমাদের কাছে এখনও আইকন ফাইল নেই, তাই আসুন পরবর্তী সহজ গ্রিটিং ড্যাশের জন্য একটি আইকন তৈরি করুন। নিচে এটি নির্দ্বিধায় করুন। আপনি যদি নিজের তৈরি করতে চান, আপনি ফটোশপ বা ক্যানভার মতো একটি বিনামূল্যে পরিষেবা ব্যবহার করে সহজেই তা করতে পারেন। ডায়মেনশনগুলি 128 x 128 পিক্সেল এবং এটি আপনার HTML, সিএসএস, জেএস, এবং জেএসএন ফাইলগুলির মতো একই ফোল্ডারে আইকন.পিএনজি হিসাবে সেভ করে তা নিশ্চিত করুন।</p><img alt="আমার সাধারণ গ্রিটিং ড্যাশ 128x128 আইকন" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153068239.png" /><h3>আপনার ফাইলগুলি আপলোড করা হচ্ছে (যদি আপনি নিজের পৃষ্ঠা কোড করেন)</h3><p>আপনার নিজের নতুন ক্রোম ট্যাব এক্সটেনশান তৈরি করার জন্য উপরের তথ্যগুলি আপনাকে সত্যই জেনে রাখা দরকার। এখন আপনি নিজের মেনিফেস্ট.জসন ফাইলটি কাস্টমাইজ করেছেন, আপনি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে যে কোনও নতুন ট্যাব ডিজাইন করতে পারেন এবং এটি নীচের চিত্রের মতো আপলোড করতে পারেন। তবে, আপনি কীভাবে এই সাধারণ ড্যাশবোর্ডটি তৈরি হয় তা দেখতে চাইলে "একটি সেটিংস মেনু তৈরি করুন" এ যান।</p><p>একবার আপনি নিজের নতুন ট্যাবটি ডিজাইনিং শেষ করার পরে, আপনার ক্রোম এক্সটেনশান Chrome এ আপলোড করার জন্য প্রস্তুত। এটিকে নিজে আপলোড করতে আপনার ব্রাউজারে ক্রোম: // এক্সটেনশানস / নেভিগেট করুন এবং উপরের ডানদিকে বিকাশকারী মোড সক্রিয় করুন।</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153069171.png" /><p>পৃষ্ঠাটি রিফ্রেশ করুন এবং "লোড আনজিপড" এ ক্লিক করুন।</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153070239.png" /><p>এরপরে, ফোল্ডারটি নির্বাচন করুন এবং আপলোড করুন যেখানে আপনি আপনার এইচটিএমএল, সিএসএস, জেএস এবং ম্যানিফেস্ট.জসন ফাইলগুলি এবং সেইসাথে আপনার আইকন.পিএনজি ফাইল সংরক্ষণ করবেন। প্রতিবার নতুন ট্যাব খুললে এক্সটেনশনের কাজ করা উচিত!</p><p>একবার আপনি আপনার এক্সটেনশানটি সম্পন্ন করার পরে এবং এটি নিজে পরীক্ষা করে নেওয়ার পরে, আপনি একটি বিকাশকারী অ্যাকাউন্ট তৈরি করতে এবং Chrome এর এক্সটেনশান স্টোর থেকে এটি পেতে পারেন। আপনার এক্সটেনশানটি কীভাবে প্রকাশ করবেন এই গাইডটি সহায়তার জন্য ডিজাইন করা হয়েছে।</p><p>আপনি যদি বর্তমানে নিজের একটি এক্সটেনশন তৈরি না করে থাকেন এবং ক্রোম এক্সটেনশানগুলির মাধ্যমে কী সম্ভব তা কেবল দেখতে চান তবে কীভাবে খুব বেসিক ওয়েলকাম ড্যাশবোর্ড তৈরি করতে হয় তা পড়ুন।</p><h3>সেটিংস মেনু তৈরি করুন</h3><p>আমার এক্সটেনশনের জন্য, আমি প্রথমে যা করতে চাই তা হ'ল একটি ইনপুট তৈরি করা যা আমার ব্যবহারকারী তাদের নাম যুক্ত করতে পারে। যেহেতু আমি চাই না যে এই ইনপুটটি সর্বদা দৃশ্যমান হয়, তাই আমি এটিকে "সেটিংস" নামক একটি ডিভের মধ্যে রাখি যা সেটিংস বোতামটি ক্লিক করা হলে আমি কেবল দৃশ্যমান করি।</p><pre><button id = "settings-button">সেটিংস</button></ button></pre><pre><div class = "settings" id = "settings"></pre><pre>   <form class = "name-form" id = "name-form" action = "#"></pre><pre>      <input class = "name-input" type = "text"
        id = "name-input" placeholder = "Geben Sie hier Ihren Namen ein ..."></pre><pre><button type = "submit" class = "name-button">অ্যাড</button></ button></pre><pre>   </ form></pre><pre></ div></pre><p>এই মুহুর্তে আমাদের সেটিংস এর মতো দেখাচ্ছে:</p><img alt="এত সুন্দর!" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153071439.png" /><p>... সুতরাং আমি আপনাকে কয়েকটি বেসিক সিএসএস শৈলী দেব। আমি বোতামটি প্রবেশ করি এবং একটি দূরত্ব এবং একটি বাহ্যরেখা উভয়ই প্রবেশ করি। তারপরে আমি সেটিংস এবং ফর্মের মধ্যে কিছুটা জায়গা রেখেছি।</p><pre>। সেটিংস {</pre><pre>প্রদর্শন: নমনীয়;</pre><pre>নমনীয় দিক: সারি;</pre><pre>কন্টেন্ট সারিবদ্ধ: মাঝারি;</pre><pre>}</pre><pre>ইনপুট {</pre><pre>প্যাডিং: 5 পিএক্স;</pre><pre>হরফ আকার: 12px;</pre><pre>প্রস্থ: 150px;</pre><pre>উচ্চতা: 20px;</pre><pre>}
</pre><pre>মূল {</pre><pre>উচ্চতা: 30px;</pre><pre>প্রস্থ: 70px;</pre><pre>পটভূমি: কোনটি নয়; / * এটি ডিফল্ট পটভূমি সরিয়ে দেয় * /</pre><pre>রঙ: # 313131;</pre><pre>প্রান্ত: 1px অবিচ্ছিন্ন # 313131;</pre><pre>প্রান্ত ব্যাসার্ধ: 50px; / * এটি আমাদের বোতামটি বৃত্তাকার প্রান্ত দেয় * /</pre><pre>হরফ আকার: 12px;</pre><pre>কার্সার: পয়েন্টার;</pre><pre>}</pre><pre>ফর্ম {</pre><pre>প্যাডিং শেল: 20px;</pre><pre>}</pre><p>এখন আমাদের সেটিংস আরও ভাল দেখায়:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153078213.png" /><p>তবে, ব্যবহারকারী যদি "সেটিংস" ক্লিক না করেন তবে তাদের লুকিয়ে রাখি। এটি করার জন্য, আমি নীচে। সেটিংগুলিতে যুক্ত করব, যা স্ক্রিনের পাশ থেকে নাম এন্ট্রি অদৃশ্য করে দেবে:</p><pre>রূপান্তর: অনুবাদ অনুবাদ (-100%);</pre><pre>রূপান্তর: রূপান্তর 1s;</pre><p>এখন আসুন সেটিংস-ওপেন নামে একটি শ্রেণি তৈরি করুন যা আমরা জাভাস্ক্রিপ্টে টগল করব এবং বন্ধ করব যখন ব্যবহারকারী সেটিংস বোতামটি ক্লিক করে। যখন সেটিংস-ওপেন সেটিংসে যুক্ত করা হয়, এতে কোনও রূপান্তর প্রয়োগ করা হয় না। এটি কেবল তার স্বাভাবিক অবস্থানেই দৃশ্যমান।</p><pre>.settings-open.settings {</pre><pre>রূপান্তর: কিছুই নয়;</pre><pre>}</pre><p>জাভাস্ক্রিপ্টে ক্লাস টগল করা যাক। আমি ওপেনসেটিংস () নামে একটি ফাংশন তৈরি করতে যাচ্ছি যা ক্লাস সেটিংসটি চালু বা বন্ধ করার ক্ষেত্রে টগল করবে। এই উদ্দেশ্যে, আমি প্রথমে আইডি "সেটিংস" ব্যবহার করে উপাদানটি পাই এবং তারপরে ক্লাসলিস্ট.টোগলটি "সেটিংস-ওপেন" ক্লাস যুক্ত করতে ব্যবহার করি।</p><pre>ফাংশন ওপেনসেটেটিং () {</pre><pre>document.getElementById ("সেটিংস")। classList.toggle ("সেটিংস-ওপেন");</pre><pre>}</pre><p>এখন আমি একটি ইভেন্ট শ্রোতা যুক্ত করতে যাচ্ছি সেটিংস বোতামটি ক্লিক করা হলে ফাংশনটি ট্রিগার করবে।</p><pre>document.getElementById ("সেটিংস-বোতাম")। addEventListener ('ক্লিক করুন', ওপেনসেটেটিং)</pre><p>আপনি সেটিংস বোতামটি ক্লিক করলে এটি আপনার সেটিংসটি প্রদর্শন বা আড়াল করবে।</p><h3>একটি ব্যক্তিগত অভিবাদন তৈরি করুন</h3><p>এরপরে, আমরা স্বাগত বার্তাটি তৈরি করব। এইচটিএমএলে আমরা একটি খালি এইচ 2 তৈরি করি এবং তারপরে এটি জাভাস্ক্রিপ্টের অভ্যন্তরীণ HTML সহ পূরণ করুন। আমি এইচ 2 কে একটি আইডি দিতে যাচ্ছি যাতে আমি এটির পরে অ্যাক্সেস করতে পারি এবং এটি কেন্দ্রীভূত করার জন্য গ্রিটিং-কন্টেইনার নামক একটি ডিভের মধ্যে রাখতে পারি।</p><pre><div class = "greeting-container"></pre><pre>   <h2 class = "greeting" id = "greeting"> </ h2></pre><pre></ div></pre><p>এখন আমি জাভাস্ক্রিপ্টে গ্রিটিংয়ের একটি সাধারণ ব্যবহারকারীর নাম তৈরি করব। প্রথমে, আমি একটি পরিবর্তনশীল করব যা নামটি ধারণ করবে, যা আমি আপাতত ফাঁকা রেখে দেব এবং এটি পরে যুক্ত করব।</p><pre>var ব্যবহারকারী নাম;</pre><p>এমনকি ব্যবহারকারীর নামটি ফাঁকা না থাকলেও, আমি যদি এইচটিএমএলটিতে কেবল একটি গ্রিটিংসে ব্যবহারকারীর নাম রাখি তবে Chrome অন্য নামটিতে এটি খুললে আমি একই নাম ব্যবহার করব না। ক্রোম আমার পরিচয় মনে রাখে তা নিশ্চিত করার জন্য, আমাকে স্থানীয় স্টোরেজ সহ কাজ করা উচিত। সুতরাং আমি সেভনেম () নামে একটি ফাংশন করি।</p><pre>ফাংশন সেভনাম () {</pre><pre>লোকালস্টোরেজ.সেটটাইম ('রিসিভনাম', ইউজারনেম);</pre><pre>}</pre><p>লোকালস্টোরেজ.সেটটাইম () ফাংশনটি দুটি আর্গুমেন্ট গ্রহণ করে: প্রথমটি এমন একটি কীওয়ার্ড যা আমি পরে তথ্য অ্যাক্সেস করতে ব্যবহার করতে পারি এবং দ্বিতীয়টি হল সেই তথ্য যা মনে রাখা দরকার। এই ক্ষেত্রে ব্যবহারকারীর নাম। আমি লোকালস্টোর.টেজ আইটেমের মাধ্যমে এই সঞ্চিত তথ্য পেয়ে যাব যা ব্যবহারকারীর নাম পরিবর্তনশীল আপডেট করতে আমি ব্যবহার করব।</p><pre>var ইউজারনেম = লোকালস্টোরেজ.জেটআইটেম ('রিসিভনাম');</pre><p>আমরা ফর্মটিতে কোনও ইভেন্ট শ্রোতার সাথে এটি লিঙ্ক করার আগে, আমি ক্রোমকে বলতে চাই যে আমি যদি এখনও আমার নাম না দিয়ে থাকে তবে কীভাবে আমাকে ফোন করবেন। আমি যদি একটি বিবৃতি দিয়ে এটি করি।</p><pre>যদি (ব্যবহারকারীর নাম == নাল) {</pre><pre>ব্যবহারকারীর নাম = "বন্ধু";</pre><pre>}</pre><p>এবং এখন অবশেষে আমরা আমাদের ব্যবহারকারীর নাম পরিবর্তনশীলটিকে আমাদের ফর্মের সাথে সংযুক্ত করব। আমি এটি কোনও ফাংশনের অভ্যন্তরে করতে চাই যাতে নামটি আপডেট হওয়ার পরে আমি সেই ফাংশনটি কল করতে পারি। আসুন চেঞ্জনাম () ফাংশনটি কল করি।</p><pre>ফাংশন পরিবর্তন নাম () {</pre><pre>ইউজারনেম = ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ("নাম-ইনপুট")। মূল্য;</pre><pre>saveName ();</pre><pre>}</pre><p>যখনই কেউ ফর্মের মাধ্যমে কোনও নাম প্রবেশ করায় আমি এই ফাংশনটি কল করতে চাই। আমি এটি ইভেন্ট শ্রোতার সাথে করি যেখানে আমি চেঞ্জনাম () ফাংশন বলি এবং ফর্মটি জমা দেওয়ার সময় পৃষ্ঠাটি ডিফল্টরূপে আপডেট হতে বাধা দেয়।</p><pre>document.getElementById ("নাম-ফর্ম")। addEventListener ('জমা দিন', ফাংশন (ঙ) {</pre><pre>e.preventDefault ()</pre><pre>নাম পরিবর্তন কর();</pre><pre>});</pre><p>অবশেষে, আমাদের শুভেচ্ছা তৈরি করা যাক। আমি এটিকে একটি ফাংশনেও রাখব যাতে পৃষ্ঠাটি রিফ্রেশ হয়ে যায় এবং যখন পরিবর্তন নাম () ঘটে তখন আমি উভয়কেই এটি কল করতে পারি। ফাংশনটি এখানে:</p><pre>ফাংশন getGreeting () {</pre><pre>document.getElementById ("অভিবাদন")। অভ্যন্তরীণ এইচটিএমএল = `হ্যালো, {{ব্যবহারকারীর নাম} তোমার দিন উপভোগ কর! `;</pre><pre>}</pre><pre>
getGreeting ()</pre><p>এখন আমি আমার চেঞ্জনাম () ফাংশনে getGreeting () কল এবং একটি দিনের জন্য কল!</p><h3>শেষ পর্যন্ত, আপনার পৃষ্ঠা ডিজাইন করুন</h3><p>সমাপ্তি ছোঁয়া এখন সময়। আমি আমার শিরোনামটি ফ্লেক্সবক্সের সাথে কেন্দ্র করব, এটি প্রসারিত করব এবং সিএসএসে পাঠ্যের মূল অংশে একটি গ্রেডিয়েন্ট পটভূমি যুক্ত করব। এবং যাতে বোতামটি এবং এইচ 2 গ্রেডিয়েন্টের বিরুদ্ধে লাফ দেয়, আমি তাদের সাদা করি make</p><pre>.গ্রিটিং-ধারক {</pre><pre>প্রদর্শন: নমনীয়;</pre><pre>ন্যায়সঙ্গত সামগ্রী: মাঝারি;</pre><pre>কনটেন্ট সারিবদ্ধ করুন: মাঝারি;</pre><pre>}</pre><pre>.গ্রিটিং {</pre><pre>হরফ পরিবার: সানস সিরিফ;</pre><pre>হরফ আকার: 60px;</pre><pre>রঙ: # এফএফ;</pre><pre>}</pre><pre>দেহ {</pre><pre>পটভূমির রঙ: # c670ca;</pre><pre>পটভূমি চিত্র: রৈখিক গ্রেডিয়েন্ট (45 ডিগ্রি, # c670ca 0%, # 25a5c8 52%, # 20e275 90%);</pre><pre>}</pre><pre>এইচটিএমএল {</pre><pre>উচ্চতা: 100%;</pre><pre>}</pre><p>এবং এটাই! আপনার পৃষ্ঠাটি দেখতে এইরকম হবে:</p><img alt="আপনার নিজের ক্রোম এক্সটেনশান!" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153079418.png" /><p>এটি খুব বেশি নয়, তবে এটি আপনার নিজের ক্রোম ড্যাশবোর্ডগুলি তৈরি এবং ডিজাইনের জন্য দুর্দান্ত বেস। আপনার যদি কোন প্রশ্ন থাকে এবং দয়া করে টুইটারে @saralaughed এ আমার কাছে পৌঁছাতে দয়া করে আমাদের জানান।</p></div><div class="neighbor-articles"><h4 class="ui header">আরো দেখুন</h4><a href="/question/how-to-replace-ignition-lock-cylinder-chevy-cavalier/" title="কিভাবে ইগনিশন লক সিলিন্ডার চবি অশ্বারোহী প্রতিস্থাপন">কিভাবে ইগনিশন লক সিলিন্ডার চবি অশ্বারোহী প্রতিস্থাপন</a><a href="/question/how-to-be-successful-in-pharmaceutical-sales/" title="ফার্মাসিউটিক্যাল বিক্রয় সফল হতে কিভাবে">ফার্মাসিউটিক্যাল বিক্রয় সফল হতে কিভাবে</a><a href="/question/how-to-go-from-beginner-to-intermediate-guitar/" title="কিভাবে শুরু থেকে মধ্যবর্তী গিটার যেতে হবে">কিভাবে শুরু থেকে মধ্যবর্তী গিটার যেতে হবে</a><a href="/question/how-to-remove-camera-from-mobile-and-use-it/" title="কীভাবে মোবাইল থেকে ক্যামেরা সরিয়ে এটি ব্যবহার করবেন">কীভাবে মোবাইল থেকে ক্যামেরা সরিয়ে এটি ব্যবহার করবেন</a><a href="/question/how-to-say-night-in-french/" title="ফরাসী ভাষায় রাত কীভাবে বলা যায়">ফরাসী ভাষায় রাত কীভাবে বলা যায়</a><a href="/question/how-to-get-rid-of-a-unibrow-on-a-child/" title="কিভাবে একটি সন্তানের উপর একটি ইউনিব্রোম পরিত্রাণ পেতে">কিভাবে একটি সন্তানের উপর একটি ইউনিব্রোম পরিত্রাণ পেতে</a><a href="/question/how-to-fix-missing-textures-in-minecraft/" title="কিভাবে মাইনক্রাফ্টে অনুপস্থিত টেক্সচার ঠিক করবেন">কিভাবে মাইনক্রাফ্টে অনুপস্থিত টেক্সচার ঠিক করবেন</a><a href="/question/how-to-disassemble-a-lorcin-380/" title="কিভাবে একটি লরসিন 380 বিচ্ছিন্ন করা যায়">কিভাবে একটি লরসিন 380 বিচ্ছিন্ন করা যায়</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">আরো দেখুন</h4><a href="/article/how-to-write-an-api-in-3-lines-of-code-with-django-rest-framework-63f757/" title="জ্যাঙ্গো আরইএসটি ফ্রেমওয়ার্ক ব্যবহার করে কীভাবে 3 লাইনের কোডে একটি এপিআই লিখবেন write">জ্যাঙ্গো আরইএসটি ফ্রেমওয়ার্ক ব্যবহার করে কীভাবে 3 লাইনের কোডে একটি এপিআই লিখবেন write</a><a href="/article/chapter-9-how-to-build-a-google-home-app-with-dialogflow-fulfillment-via-inline-editor-7ef253/" title="অধ্যায় 9: ডায়ালগফ্লো দিয়ে একটি গুগল হোম অ্যাপ তৈরি করা Building ইনলাইন সম্পাদকের মাধ্যমে পরিপূর্ণতা">অধ্যায় 9: ডায়ালগফ্লো দিয়ে একটি গুগল হোম অ্যাপ তৈরি করা Building ইনলাইন সম্পাদকের মাধ্যমে পরিপূর্ণতা</a><a href="/article/how-to-write-better-tests-for-drag-and-drop-operations-in-the-browser-afb556/" title="ব্রাউজারে ড্র্যাগ এবং ড্রপ অপারেশনের জন্য কীভাবে আরও ভাল পরীক্ষা লিখতে হয়">ব্রাউজারে ড্র্যাগ এবং ড্রপ অপারেশনের জন্য কীভাবে আরও ভাল পরীক্ষা লিখতে হয়</a><a href="/article/how-to-talk-the-talk-in-front-of-hundreds-717cf9/" title="কীভাবে কথা বলতে হয় (শত বছর আগে)">কীভাবে কথা বলতে হয় (শত বছর আগে)</a><a href="/article/how-to-get-better-sleep-not-just-more-sleep-fa6b21/" title="এভাবে আপনি আরও বেশি ঘুম না করে আরও ভাল ঘুম পান">এভাবে আপনি আরও বেশি ঘুম না করে আরও ভাল ঘুম পান</a><a href="/article/how-to-pick-a-skill-invocation-name-36dbc4/" title="কীভাবে দক্ষতার কল নাম চয়ন করবেন">কীভাবে দক্ষতার কল নাম চয়ন করবেন</a><a href="/article/how-to-deal-with-a-panic-attack-at-work-10a7fe/" title="কর্মক্ষেত্রে আতঙ্কিত আক্রমণটি কীভাবে মোকাবেলা করা যায়">কর্মক্ষেত্রে আতঙ্কিত আক্রমণটি কীভাবে মোকাবেলা করা যায়</a><a href="/article/the-problem-with-goals-and-how-to-improve-them-d33ca3/" title="লক্ষ্য নিয়ে সমস্যা। এবং কীভাবে এটি উন্নতি করা যায়।">লক্ষ্য নিয়ে সমস্যা। এবং কীভাবে এটি উন্নতি করা যায়।</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sa flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>