কীভাবে একটি এপিআই চালিত ক্রোম এক্সটেনশন তৈরি করবেন

একটি ক্রোম এক্সটেনশান বিকাশ করা মজাদার। ক্রোম এক্সটেনশনের সাহায্যে আমরা আমাদের ওয়েবসাইট বা ব্রাউজারে আরও কার্যকারিতা যুক্ত করতে পারি, জিনিসগুলিকে সামঞ্জস্য করতে পারি এবং আমাদের উত্পাদনশীলতা উন্নত করতে পারি।

আমাদের সম্প্রসারণের সুযোগ

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

সম্প্রসারণের সুযোগটি হ'ল

  • এক্সটেনশানটি কেবলমাত্র নির্দিষ্ট URL এর মাধ্যমে অ্যাক্সেস করা যায়।
  • এটি অবশ্যই সমস্ত ফর্ম ক্ষেত্রগুলি পেয়ে ও মানগুলির সাথে প্রদর্শন করবে।
  • এটি একাধিক পৃষ্ঠাগুলি নেভিগেটের পরিবর্তে তথ্য আপডেট করতে ব্যবহৃত হয়।

এই নিবন্ধে আমরা আমাদের চ্যালেঞ্জগুলি এবং যেভাবে আমরা সেগুলি ব্যবহারযোগ্য is

আমরা কীভাবে এটি তৈরি করেছি?

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

প্রতিটি ক্রোম এক্সটেনশান ম্যানিফেস্ট.জসন ফাইল দ্বারা সংজ্ঞায়িত এবং কনফিগার করা হয়

এই ম্যানিফেস্টে আপনি অ্যাক্সেসযোগ্য_সম্পাদনা, অনুমতি, পৃষ্ঠা ক্রিয়া এবং সামগ্রী স্ক্রিপ্টগুলির মতো জিনিসগুলি কনফিগার করতে পারেন।

সামগ্রী স্ক্রিপ্টস: ওয়েব পৃষ্ঠাগুলির প্রসঙ্গে এই ফাইলগুলি কার্যকর করা হয়। আমরা এক পৃষ্ঠায় একাধিক সামগ্রীর স্ক্রিপ্ট রাখতে পারি। আমরা নির্দিষ্ট ওয়েবপৃষ্ঠায় চালানোর জন্য ইনজেকশন.জেএস ব্যবহার করেছি।

পৃষ্ঠার ক্রিয়া: পৃষ্ঠা ক্রিয়াগুলি এমন ক্রিয়াকে প্রতিনিধিত্ব করে যা কেবলমাত্র বর্তমান পৃষ্ঠায় উপলভ্য এবং সমস্ত পৃষ্ঠায় নয়। এখানে আমরা ফর্ম প্রদর্শন করতে পপ-আপ খোলার জন্য কনফিগার করেছি।

অনুমতিগুলি: আমাদের এক্সটেনশনে ক্রোম এপিআইগুলি ব্যবহার করতে আমাদের সেগুলিকে অনুমতিগুলিতে ঘোষণা করতে হবে। উদাহরণস্বরূপ, ব্রাউজারের স্থানীয় স্টোরেজ অ্যাক্সেস করতে, আপনাকে এটি অনুমোদিত বলে ঘোষণা করতে হবে।

ওয়েবে উপলব্ধ সংস্থানসমূহ: প্যাকেজযুক্ত সংস্থাগুলির পাথ নির্দিষ্ট করুন যা কোনও ওয়েব পৃষ্ঠার প্রসঙ্গে ব্যবহৃত হতে পারে। আমরা এর জন্য চিত্র, স্টাইল শীট এবং কাস্টম ফন্ট ব্যবহার করেছি।

এই হল আমাদের ইশতেহার

1. বর্ধনের সীমাবদ্ধতা

এক্সটেনশানটি সীমাবদ্ধ করা উচিত যাতে এটি কেবল তথ্য পৃষ্ঠায় পাওয়া যায়। এটি এত সহজ এবং আপনার ম্যানিফেস্টে সামগ্রী স্ক্রিপ্ট এবং পৃষ্ঠা ক্রিয়া দিয়ে সম্পন্ন করা যায়।

"কন্টেন্ট_সস্ক্রিপ্টস": [{"ম্যাচস": ["*: //*.spritle.com / ইনফরমেশন =*"], "জেএস": ["জেএস ​​/ ইনজেকশন.জেএস", "জেএস ​​/ লগইন.জেএস"]} ]

এবং inject.js এর মত হবে

chrome.declarativeContent.onPageChanged.addRules ([শর্তসমূহ: [নতুন ক্রোম.ডেক্লারেটিভ কনটেন্ট.পেজস্টেটম্যাচার ({পেজ ইউআরএল: {হোস্টকন্টেনস: '.স্প্রিটল.কম', স্কিম: ['https']}})], ক্রিয়া: [নতুন ক্রোম .declarativeContent.ShowPageAction ()]}]);

ফলাফল হবে

এক্সটেনশনটি অন্য ওয়েবসাইটে নিষ্ক্রিয় করা হবেএক্সটেনশনটি

2. API থেকে ফর্ম ক্ষেত্রগুলি পুনরুদ্ধার করুন এবং প্রদর্শন করুন

আমরা ফর্ম ক্ষেত্রগুলি পুনরুদ্ধার করতে আমাদের ক্লায়েন্টের আরএসটি এপিআই ব্যবহার করেছি যা আমাদের কাজটিকে সহজ এবং সোজা করে তুলেছে। একটি নমুনা এপিআই প্রতিক্রিয়া এর মতো দেখাচ্ছে:

পূর্ববর্তী পদক্ষেপ থেকে এই উত্তরটি প্রক্রিয়া করে, আরও ভাল দেখতে আমাদের এটি ফর্ম্যাট করতে হয়েছিল। কাজটি কেবলমাত্র এবং সামান্য জাভাস্ক্রিপ্ট এবং সিএসএস দিয়ে করা হয়েছিল।

এখানে একটি উদাহরণ দেওয়া আছে, আমরা এর মতো একটি ইনপুট ক্ষেত্র তৈরি করেছি,

নীচের চিত্রের মতো, আমরা প্রাপ্ত জেএসওএন প্রতিক্রিয়ার প্রতিটি কী-মান জুটি পেরিয়ে প্রসারিত করেছি।

ব্যবহারকারী এক্সটেনশানটিতে ক্লিক করার সময় পপ-আপ উইন্ডোজ।

শেষ করি

ফর্মটি জমা দেওয়ার পরে, আমরা সার্ভারে ডেটা প্রেরণ করব এবং প্রতিটি সফল ক্রিয়াকলাপের জন্য তথ্য আপডেট করা হবে।

হ্যাঁ. আমরা এটি করেছি এবং ফর্মটি পূরণ করার জন্য একাধিক পৃষ্ঠায় নেভিগেট না করেই এটি সহজ করে তুলেছি। আমাদের এক্সটেনশন ফর্মটিতে ফিল্ড গ্রুপ, ফিল্ড সন্ধান ইত্যাদির মতো ফাংশন রয়েছে

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

আমরা স্প্রিটলের লোক এবং রেল, নোড জেএস, রিএ্যাক্ট নেটিভ ইত্যাদি দিয়ে পণ্য তৈরি করি