আপনি যদি ক্রোম ব্যবহারকারী হন তবে সম্ভবত আপনি এক বা একাধিক এক্সটেনশান ব্যবহার করছেন। বিজ্ঞাপনগুলি ব্লক করা বা বৈশিষ্ট্যগুলি যুক্ত করা, এক্সটেনশনগুলি ব্রাউজারে প্রচুর উপযোগ যুক্ত করে। তাহলে আপনি নিজের ক্রোম এক্সটেনশানটি তৈরি করতে পারলে কি শীতল হবে না? আমি আপনাকে এখানে এটি প্রদর্শন করব।
আমাদের নিবন্ধটি সেরা টাচস্ক্রিন ক্রোমবুকগুলিও দেখুন
আমি ক্লায়েন্টদের জন্য ওয়েবসাইটগুলি বজায় রাখার সাথে সাথে আমি জানতে চাই যে প্রতিটি সাইট কীভাবে পৃষ্ঠা লোডের সাথে অভিনয় করে। গুগল যেমন এখন তার এসইও গণনায় লোড টাইম ব্যবহার করে, কোনও সাইটের অনুকূলকরণের সময় কোনও পৃষ্ঠা লোডগুলি কত গতিবেগ বা ধীর গতিতে জেনে রাখা গুরুত্বপূর্ণ মেট্রিক। মোবাইলের জন্য কোনও ওয়েবসাইটকে অনুকূলকরণ করার সময় এটি আরও সত্য। গুগলের মধ্যে সর্বোচ্চ স্কোর করতে কোনও ত্রুটি ছাড়াই এটি হালকা, দ্রুত এবং লোড হতে হবে।
এতে যোগ করুন, সাইটের পয়েন্টে একজন উদ্যোগী ব্যক্তিও পৃষ্ঠার গতি, জিটিমেট্রিক্স যাচাই করতে আমি একই ওয়েবসাইট ব্যবহার করে এবং এটি পরীক্ষা করার জন্য একটি ক্রোম এক্সটেনশান তৈরি করেছে, আমি ভেবেছিলাম যে আমিও একই কাজ করব এবং এটির মাধ্যমে আপনাকে চলব।
ক্রোম এক্সটেনশনগুলি
ক্রোম এক্সটেনশানগুলি হ'ল মিনি প্রোগ্রাম যা মূল ব্রাউজারে বৈশিষ্ট্যগুলি যুক্ত করে। এগুলি আমরা তৈরি করতে যাচ্ছি তার মতোই সহজ বা নিরাপদ পাসওয়ার্ড পরিচালক বা স্ক্রিপ্ট ইমুলেটরগুলির মতো জটিল হতে পারে। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের মতো সামঞ্জস্যপূর্ণ ভাষায় রচিত, সেগুলি স্বয়ংসম্পূর্ণ ফাইল যা ব্রাউজারের পাশাপাশি বসে।
প্রয়োজনীয়তার দ্বারা, বেশিরভাগ এক্সটেনশানগুলি হ'ল আইকন ক্লিক সম্পাদন যা প্রদত্ত ক্রিয়া সম্পাদন করে। এই ক্রিয়াটি আপনি ক্রোমকে আক্ষরিক অর্থে যে কোনও কিছু করতে পারেন।
আপনার নিজের ক্রোম এক্সটেনশন তৈরি করুন
অল্প গবেষণা করে আপনি নিজের পছন্দটি যা করতে চান তা করতে টুইঙ্ক করতে পারেন তবে আমি এক বোতামের স্পিড চেকের ধারণা পছন্দ করি তাই এটি চলছে।
সাধারণত, আপনি যখন সাইটের গতি পরীক্ষা করেন আপনি পৃষ্ঠার URL টি জিটিমেট্রিক্স, পিংডম বা অন্য কোথাও পেস্ট করে বিশ্লেষণে চাপুন। এটি কেবল কয়েক সেকেন্ড সময় নেয় তবে আপনি কি আপনার ব্রাউজারে কেবল একটি আইকন নির্বাচন করতে এবং এটি আপনার জন্য এটি করতে পারলে ভাল লাগবে না? এই টিউটোরিয়ালটির মাধ্যমে কাজ করার পরে, আপনি ঠিক এটি করতে সক্ষম হবেন।
আপনার কম্পিউটারে একটি ফোল্ডার তৈরি করতে হবে যাতে সমস্ত কিছু রাখা যায় three তিনটি খালি ফাইল, ম্যানিফেস্ট.জসন, পপআপ এইচটিএমএল এবং পপআপ.জেএস তৈরি করুন। আপনার নতুন ফোল্ডারের ভিতরে ডান ক্লিক করুন এবং নতুন এবং পাঠ্য ফাইলটি নির্বাচন করুন। আপনার পছন্দের পাঠ্য সম্পাদকটিতে আপনার তিনটি ফাইলের প্রতিটি খুলুন। নিশ্চিত করুন যে পপআপ এইচটিএমএল একটি HTML ফাইল হিসাবে সংরক্ষণ করা হয়েছে এবং পপআপ.জেএস একটি জাভাস্ক্রিপ্ট ফাইল হিসাবে সংরক্ষণ করা হয়েছে। কেবলমাত্র এই টিউটোরিয়ালের উদ্দেশ্যে Google থেকে এই নমুনা আইকনটি ডাউনলোড করুন।
ম্যানিফেস্ট.জসন নির্বাচন করুন এবং এতে নিম্নলিখিতটি পেস্ট করুন:
manifest "manifest_version": 2, "নাম": "জিটিমেট্রিক্স পৃষ্ঠা গতি বিশ্লেষক", "বিবরণ": "একটি ওয়েবসাইট পৃষ্ঠা লোডিং গতি বিশ্লেষণ করতে জিটিমেট্রিক্স ব্যবহার করুন", "সংস্করণ": "1.0", "ব্রাউজার_অ্যাকশন": default "ডিফল্ট_আইকন" : "আইকন.পিএনজি", "ডিফল্ট_পপআপ": "পপআপ এইচটিএমএল"}, "অনুমতিগুলি":
আপনি দেখতে পাচ্ছেন, আমরা এটিকে একটি শিরোনাম এবং মৌলিক বিবরণ দিয়েছি। আমরা একটি ব্রাউজার ক্রিয়াও বলেছি যাতে আমরা গুগল থেকে ডাউনলোড করা আইকনটি অন্তর্ভুক্ত করে যা আপনার ব্রাউজার বার এবং পপআপ এইচটিএমএলে প্রদর্শিত হবে। যখন আপনি ব্রাউজারে এক্সটেনশন আইকনটি নির্বাচন করেন তখন পপআপ এইচটিএমএল বলে।
পপআপ এইচটিএমএল খুলুন এবং এতে নিম্নলিখিতটি পেস্ট করুন।
জিটিমেট্রিক্স ব্যবহার করে পেজস্পিড বিশ্লেষক
যখন আপনি ব্রাউজারে এক্সটেনশন আইকনটি নির্বাচন করেন তখন পপআপ এইচটিএমএল বলে। আমরা এটিকে একটি নাম দিয়েছি, পপআপটিকে লেবেল দিয়েছি এবং একটি বোতাম যুক্ত করেছি। বোতামটি নির্বাচন করলে পপআপ.জেএস কল হবে যা আমরা পরবর্তী ফাইলটি শেষ করব।
পপআপ.জে খুলুন এবং এতে নিম্নলিখিতটি পেস্ট করুন:
document.addEventListener ('DOMContentLoaded', ফাংশন () check var checkPageButton = document.getElementById ('চেকপেজ'); চেকপেজবটন.অ্যাডভেনটলিস্টনার ('ক্লিক করুন', ফাংশন () rome chrome.tabs.getSelected (নাল, ফাংশন (ট্যাব)) = ডকুমেন্ট; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'ইনপুট'); i.type = 'লুকানো'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, মিথ্যা);}, মিথ্যা);
আমি জাভাস্ক্রিপ্টটি জানার ভান করব না যার কারণে সাইটপয়েন্টে ফাইলটি ইতিমধ্যে স্থাপন করা সহজ ছিল। আমি কেবল জানি এটি জিটিমেট্রিক্সকে বর্তমান ক্রোম ট্যাবে পৃষ্ঠাটি বিশ্লেষণ করতে বলে। যেখানে এটি বলেছে 'chrome.tabs.getSelected' এক্সটেনশানটি সক্রিয় ট্যাব থেকে URL নেয় এবং এটি ওয়েব ফর্মের মধ্যে প্রবেশ করে। আমি যতদূর যেতে পারি।
আপনার ক্রোম এক্সটেনশন পরীক্ষা করা হচ্ছে
এখন আমাদের কাছে প্রাথমিক কাঠামো রয়েছে, এটি কীভাবে কাজ করে তা দেখতে আমাদের পরীক্ষা করা দরকার।
- Chrome খুলুন, আরও সরঞ্জাম এবং এক্সটেনশানগুলি নির্বাচন করুন।
- এটি সক্ষম করতে বিকাশকারী মোডের পাশে থাকা বাক্সটি চেক করুন।
- আনপ্যাকড এক্সটেনশন লোড করুন নির্বাচন করুন এবং এই এক্সটেনশনের জন্য আপনি যে ফাইলটি তৈরি করেছেন সেটিতে নেভিগেট করুন।
- এক্সটেনশানটি লোড করতে ওকে নির্বাচন করুন এবং এটি আপনার এক্সটেনশান তালিকায় প্রদর্শিত হবে।
- তালিকায় সক্ষম করার পাশের বক্সটি চেক করুন এবং আইকনটি আপনার ব্রাউজারে উপস্থিত হওয়া উচিত।
- ব্রাউজারে আইকনটি নির্বাচন করুন যাতে পপআপ উপস্থিত হয়।
- বোতামটি নির্বাচন করুন, এখনই এই পৃষ্ঠাটি দেখুন!
আপনার পৃষ্ঠাগুলি চেক করা এবং জিটিমেট্রিক্স থেকে একটি পারফরম্যান্স প্রতিবেদন দেখতে হবে। আপনি যেমন নিজের ইমেজটিতে আমার নিজস্ব সাইট থেকে দেখতে পাচ্ছেন, আমার নতুন ডিজাইনের গতি বাড়ানোর জন্য আমার একটু কাজ করা দরকার!
এগিয়ে এক্সটেনশন গ্রহণ
আপনার নিজের ক্রোম এক্সটেনশন তৈরি করা যতটা সহজ মনে হচ্ছে তত কঠিন নয়। যদিও এটি একটি সামান্য কোড জেনে প্রাথমিকভাবে শুরু করতে সহায়তা করেছিল, অনলাইনে এমন শত শত সংস্থান রয়েছে যা আপনাকে তা দেখিয়ে দেবে। এছাড়াও, গুগলের কাছে তথ্য, টিউটোরিয়াল এবং ওয়াকথ্রুগুলি রয়েছে যেগুলি সাহায্য করবে huge এই এক্সটেনশানটিতে আমাকে সহায়তা করতে আমি Google বিকাশকারী সাইট থেকে এই পৃষ্ঠাটি ব্যবহার করেছি। পৃষ্ঠাটি আপনাকে এক্সটেনশন তৈরির প্রতিটি অংশে নিয়ে যায় এবং সেই আইকনটি সরবরাহ করে যা আমরা আগে ব্যবহার করেছি।
পর্যাপ্ত গবেষণার সাহায্যে আপনি এক্সটেনশানগুলি তৈরি করতে পারেন যা ব্রাউজারের পক্ষে সক্ষম যথেষ্ট কিছু করতে পারে। ক্রোম স্টোরের কয়েকটি সেরা এক্সটেনশানগুলি ব্যক্তি থেকে নয় সংস্থাগুলির থেকে, প্রমাণ করে যে আপনি সত্যই নিজের তৈরি করতে পারেন।
মূল গাইডের জন্য সাইট পয়েন্টে জন সোনমেজকে সমস্ত ক্রেডিট। তিনি কঠোর পরিশ্রম করেছিলেন, আমি এটিকে কিছুটা পুনর্গঠিত করেছি এবং এটি সামান্য আপডেট করেছি।
আপনি কি নিজের ক্রোম এক্সটেনশন তৈরি করেছেন? প্রচার করতে বা ভাগ করতে চান? আপনি যদি নীচে আমাদের জানান!
