স্থাপত্য ওভারভিউ

এক্সটেনশনগুলি হল জিপ করা এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, ছবি এবং ওয়েব প্ল্যাটফর্মে ব্যবহৃত অন্যান্য ফাইলের বান্ডিল যা Google Chrome ব্রাউজিং অভিজ্ঞতাকে কাস্টমাইজ করে। এক্সটেনশনগুলি ওয়েব প্রযুক্তি ব্যবহার করে তৈরি করা হয় এবং ব্রাউজার খোলা ওয়েবে সরবরাহ করে একই API ব্যবহার করতে পারে।

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

ক্রোম ব্রাউজারটিকে সবচেয়ে ব্যক্তিগতকৃত ব্রাউজার বানানোর গেটওয়ে এক্সটেনশন বিবেচনা করুন৷

এক্সটেনশন ফাইল

এক্সটেনশনগুলি ফাইলের ধরন এবং ডিরেক্টরির পরিমাণে পরিবর্তিত হয়, তবে সেগুলির জন্য একটি [মনিফেস্ট][ডক্স-ম্যানিফেস্ট] থাকা প্রয়োজন৷ কিছু মৌলিক, কিন্তু উপযোগী, এক্সটেনশনে শুধুমাত্র ম্যানিফেস্ট এবং এর টুলবার আইকন থাকতে পারে।

manifest.json শিরোনামের ম্যানিফেস্ট ফাইলটি ব্রাউজারকে এক্সটেনশন সম্পর্কে তথ্য দেয়, যেমন সবচেয়ে গুরুত্বপূর্ণ ফাইল এবং এক্সটেনশনটি ব্যবহার করতে পারে এমন ক্ষমতা।

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

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

এই Google Mail Checker এক্সটেনশনটি একটি ব্রাউজার ক্রিয়া ব্যবহার করে:

Google Mail Checker এক্সটেনশনের একটি স্ক্রিনশট

এই ম্যাপি এক্সটেনশনটি একটি পৃষ্ঠা অ্যাকশন এবং বিষয়বস্তু স্ক্রিপ্ট ব্যবহার করে:

ম্যাপি এক্সটেনশনের একটি স্ক্রিনশট

ফাইল উল্লেখ

একটি এক্সটেনশনের ফাইলগুলিকে একটি আপেক্ষিক URL ব্যবহার করে উল্লেখ করা যেতে পারে, ঠিক একটি সাধারণ HTML পৃষ্ঠার ফাইলগুলির মতো৷

<img src="images/my_image.png">

উপরন্তু, প্রতিটি ফাইল একটি পরম URL ব্যবহার করে অ্যাক্সেস করা যেতে পারে।

chrome-extension://EXTENSION_ID/PATH_TO_FILE

সম্পূর্ণ URL-এ, EXTENSION_ID হল একটি অনন্য শনাক্তকারী যা এক্সটেনশন সিস্টেম প্রতিটি এক্সটেনশনের জন্য তৈরি করে। URL chrome://extensions- এ গিয়ে সমস্ত লোড করা এক্সটেনশনের আইডি দেখা যেতে পারে। PATH_TO_FILE হল এক্সটেনশনের শীর্ষ ফোল্ডারের অধীনে ফাইলটির অবস্থান; এটি আপেক্ষিক URL এর সাথে মেলে।

একটি আনপ্যাকড এক্সটেনশনে কাজ করার সময় এক্সটেনশন আইডি পরিবর্তন হতে পারে। বিশেষ করে, একটি আনপ্যাক করা এক্সটেনশনের আইডি পরিবর্তন হবে যদি এক্সটেনশনটি একটি ভিন্ন ডিরেক্টরি থেকে লোড করা হয়; এক্সটেনশন প্যাকেজ করা হলে আইডি আবার পরিবর্তন হবে। যদি একটি এক্সটেনশনের কোড একটি সম্পূর্ণ URL-এর উপর নির্ভর করে, তাহলে এটি বিকাশের সময় আইডির হার্ডকোডিং এড়াতে chrome.runtime.getURL() পদ্ধতি ব্যবহার করতে পারে।

স্থাপত্য

একটি এক্সটেনশনের আর্কিটেকচার তার কার্যকারিতার উপর নির্ভর করবে, কিন্তু অনেক শক্তিশালী এক্সটেনশন একাধিক উপাদান অন্তর্ভুক্ত করবে:

ব্যাকগ্রাউন্ড স্ক্রিপ্ট

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

UI উপাদান

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

এক্সটেনশন UI পৃষ্ঠাগুলি, যেমন একটি পপআপ , জাভাস্ক্রিপ্ট যুক্তি সহ সাধারণ HTML পৃষ্ঠাগুলি ধারণ করতে পারে৷ এক্সটেনশনগুলি এক্সটেনশনে উপস্থিত অতিরিক্ত HTML ফাইলগুলি প্রদর্শন করতে tabs.create বা window.open() কল করতে পারে।

একটি পৃষ্ঠা ক্রিয়া এবং একটি পপআপ ব্যবহার করে একটি এক্সটেনশন ব্যাকগ্রাউন্ড স্ক্রিপ্টে যখন পপআপ ব্যবহারকারীদের জন্য উপলব্ধ থাকে তখন নিয়ম সেট করতে ঘোষণামূলক সামগ্রী API ব্যবহার করতে পারে৷ শর্ত পূরণ হলে, ব্যাকগ্রাউন্ড স্ক্রিপ্ট পপআপের সাথে যোগাযোগ করে যাতে ব্যবহারকারীদের কাছে আইকনটি ক্লিক করা যায়।

একটি পপআপ প্রদর্শন করে একটি পৃষ্ঠা অ্যাকশন ধারণকারী একটি ব্রাউজার উইন্ডো৷

বিষয়বস্তু স্ক্রিপ্ট

এক্সটেনশনগুলি যেগুলি ওয়েব পৃষ্ঠাগুলি পড়তে বা লিখতে একটি বিষয়বস্তু স্ক্রিপ্ট ব্যবহার করে৷ বিষয়বস্তু স্ক্রিপ্টে জাভাস্ক্রিপ্ট রয়েছে যা ব্রাউজারে লোড করা একটি পৃষ্ঠার প্রেক্ষাপটে কার্যকর করে। বিষয়বস্তু স্ক্রিপ্ট ব্রাউজার পরিদর্শন করা ওয়েব পৃষ্ঠাগুলির DOM পড়ে এবং সংশোধন করে।

একটি পৃষ্ঠা ক্রিয়া এবং একটি বিষয়বস্তু স্ক্রিপ্ট সহ একটি ব্রাউজার উইন্ডো৷

কন্টেন্ট স্ক্রিপ্টগুলি স্টোরেজ API ব্যবহার করে বার্তা আদান-প্রদান এবং মান সঞ্চয় করে তাদের অভিভাবক এক্সটেনশনের সাথে যোগাযোগ করতে পারে।

বিষয়বস্তু স্ক্রিপ্ট এবং প্যারেন্ট এক্সটেনশনের মধ্যে একটি যোগাযোগের পথ দেখায়

বিকল্প পৃষ্ঠা

এক্সটেনশনগুলি যেমন ব্যবহারকারীদের Chrome ব্রাউজারকে কাস্টমাইজ করার অনুমতি দেয়, বিকল্প পৃষ্ঠাটি এক্সটেনশনের কাস্টমাইজেশন সক্ষম করে। বৈশিষ্ট্যগুলি সক্ষম করতে বিকল্পগুলি ব্যবহার করা যেতে পারে এবং ব্যবহারকারীদের তাদের প্রয়োজনের সাথে কোন কার্যকারিতা প্রাসঙ্গিক তা চয়ন করতে দেয়৷

Chrome APIs ব্যবহার করে

ওয়েব পৃষ্ঠাগুলির মতো একই APIগুলিতে অ্যাক্সেস থাকার পাশাপাশি, এক্সটেনশনগুলি এক্সটেনশন-নির্দিষ্ট APIগুলি ব্যবহার করতে পারে যা ব্রাউজারের সাথে শক্ত একীকরণ তৈরি করে। এক্সটেনশন এবং ওয়েবপেজ উভয়ই একটি ইউআরএল খোলার জন্য স্ট্যান্ডার্ড window.open() পদ্ধতিতে অ্যাক্সেস করতে পারে, কিন্তু এর পরিবর্তে Chrome API tabs.create পদ্ধতি ব্যবহার করে এক্সটেনশনগুলি নির্দিষ্ট করে দিতে পারে যে কোন উইন্ডোতে URLটি প্রদর্শিত হবে।

অ্যাসিঙ্ক্রোনাস বনাম সিঙ্ক্রোনাস পদ্ধতি

বেশিরভাগ Chrome API পদ্ধতিগুলি অ্যাসিঙ্ক্রোনাস: তারা অপারেশন শেষ হওয়ার জন্য অপেক্ষা না করে অবিলম্বে ফিরে আসে। যদি একটি এক্সটেনশনের একটি অ্যাসিঙ্ক্রোনাস অপারেশনের ফলাফল জানতে হয় তবে এটি পদ্ধতিতে একটি কলব্যাক ফাংশন পাস করতে পারে। কলব্যাকটি পরে কার্যকর করা হয়, সম্ভাব্য অনেক পরে, পদ্ধতিটি ফিরে আসার পরে।

ব্যবহারকারীর বর্তমানে নির্বাচিত ট্যাবটিকে একটি নতুন URL-এ নেভিগেট করার জন্য এক্সটেনশনের প্রয়োজন হলে, এটিকে বর্তমান ট্যাবের আইডি পেতে হবে এবং তারপরে সেই ট্যাবের ঠিকানাটিকে নতুন URL-এ আপডেট করতে হবে৷

যদি tabs.query পদ্ধতিটি সিঙ্ক্রোনাস হয় তবে এটি নীচের মত দেখতে পারে।

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

এই পদ্ধতিটি ব্যর্থ হবে কারণ query() অ্যাসিঙ্ক্রোনাস। এটি কাজ সম্পূর্ণ হওয়ার জন্য অপেক্ষা না করেই ফিরে আসে এবং একটি মান ফেরত দেয় না। একটি পদ্ধতি অ্যাসিঙ্ক্রোনাস হয় যখন কলব্যাক প্যারামিটারটি তার স্বাক্ষরে উপলব্ধ থাকে।

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

একটি ট্যাবকে সঠিকভাবে জিজ্ঞাসা করতে এবং এর URL আপডেট করতে এক্সটেনশনটিকে অবশ্যই কলব্যাক প্যারামিটার ব্যবহার করতে হবে৷

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

উপরের কোডে, লাইনগুলি নিম্নোক্ত ক্রমে কার্যকর করা হয়: 1, 4, 2। query() এর জন্য নির্দিষ্ট করা কলব্যাক ফাংশনটিকে কল করা হয় এবং তারপরে লাইন 2 চালানো হয়, কিন্তু শুধুমাত্র বর্তমানে নির্বাচিত ট্যাব সম্পর্কে তথ্য পাওয়া গেলেই। query() রিটার্ন করার পরে এটি ঘটে। যদিও update() অ্যাসিঙ্ক্রোনাস কোডটি কলব্যাক প্যারামিটার ব্যবহার করে না, যেহেতু এক্সটেনশন আপডেটের ফলাফলের সাথে কিছু করে না।

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

এই পদ্ধতিটি সিঙ্ক্রোনাসভাবে একটি string হিসাবে URL প্রদান করে এবং অন্য কোন অ্যাসিঙ্ক্রোনাস কাজ করে না।

আরো বিস্তারিত

আরও তথ্যের জন্য, Chrome API রেফারেন্স ডক্স অন্বেষণ করুন এবং নিম্নলিখিত ভিডিওটি দেখুন।

পৃষ্ঠাগুলির মধ্যে যোগাযোগ

একটি এক্সটেনশনের বিভিন্ন উপাদানকে প্রায়ই একে অপরের সাথে যোগাযোগ করতে হয়। chrome.extension পদ্ধতি ব্যবহার করে বিভিন্ন HTML পৃষ্ঠা একে অপরকে খুঁজে পেতে পারে, যেমন getViews() এবং getBackgroundPage() । একবার একটি পৃষ্ঠায় অন্যান্য এক্সটেনশন পৃষ্ঠাগুলির একটি রেফারেন্স পাওয়া গেলে প্রথমটি অন্য পৃষ্ঠাগুলিতে ফাংশনগুলি শুরু করতে পারে এবং তাদের DOMগুলিকে ম্যানিপুলেট করতে পারে৷ উপরন্তু, এক্সটেনশনের সমস্ত উপাদান স্টোরেজ API ব্যবহার করে সঞ্চিত মানগুলি অ্যাক্সেস করতে পারে এবং বার্তা পাসের মাধ্যমে যোগাযোগ করতে পারে।

ডেটা এবং ছদ্মবেশী মোড সংরক্ষণ করা হচ্ছে

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

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

একটি উইন্ডো ছদ্মবেশী মোডে আছে কিনা তা সনাক্ত করতে, প্রাসঙ্গিক ট্যাবগুলির incognito বৈশিষ্ট্য পরীক্ষা করুন৷ ট্যাব বা উইন্ডোজ৷ উইন্ডো অবজেক্ট৷

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

পরবর্তী পদক্ষেপ নিন

ওভারভিউ পড়ার পরে এবং শুরু করার টিউটোরিয়ালটি সম্পূর্ণ করার পরে, বিকাশকারীদের তাদের নিজস্ব এক্সটেনশন লেখা শুরু করতে প্রস্তুত হওয়া উচিত! নিম্নলিখিত সংস্থানগুলির সাথে কাস্টম ক্রোমের জগতে আরও গভীরে যান৷