সম্প্রসারণ সেবা কর্মী সম্পর্কিত ধারণা নিয়ে একটি টিউটোরিয়াল।
সংক্ষিপ্ত বিবরণ
এই টিউটোরিয়ালটি ক্রোম এক্সটেনশন সার্ভিস ওয়ার্কার সম্পর্কে একটি প্রাথমিক ধারণা দেয়। এই টিউটোরিয়ালের অংশ হিসেবে, আপনি এমন একটি এক্সটেনশন তৈরি করবেন যা ব্যবহারকারীদের অমনিবক্স ব্যবহার করে দ্রুত ক্রোম এপিআই রেফারেন্স পেজগুলিতে নেভিগেট করতে সাহায্য করবে। আপনি শিখবেন কীভাবে:
- আপনার সার্ভিস ওয়ার্কার নিবন্ধন করুন এবং মডিউলগুলো ইম্পোর্ট করুন।
- আপনার এক্সটেনশন সার্ভিস ওয়ার্কার ডিবাগ করুন।
- অবস্থা পরিচালনা করুন এবং ঘটনাগুলি সামলান।
- পর্যায়ক্রমিক ঘটনাগুলো শুরু করুন।
- কন্টেন্ট স্ক্রিপ্টের মাধ্যমে যোগাযোগ করুন।
শুরু করার আগে
এই নির্দেশিকাটি ধরে নেয় যে আপনার ওয়েব ডেভেলপমেন্টের প্রাথমিক অভিজ্ঞতা আছে। এক্সটেনশন ডেভেলপমেন্টের প্রাথমিক ধারণা পাওয়ার জন্য আমরা এক্সটেনশন ১০১ এবং হ্যালো ওয়ার্ল্ড পর্যালোচনা করার পরামর্শ দিই।
এক্সটেনশনটি তৈরি করুন
এক্সটেনশন ফাইলগুলো রাখার জন্য quick-api-reference নামে একটি নতুন ডিরেক্টরি তৈরি করে শুরু করুন, অথবা আমাদের গিটহাব স্যাম্পল রিপোজিটরি থেকে সোর্স কোড ডাউনলোড করুন।
ধাপ ১: পরিষেবা কর্মীকে নিবন্ধন করুন
প্রজেক্টের রুটে ম্যানিফেস্ট ফাইলটি তৈরি করুন এবং নিম্নলিখিত কোডটি যোগ করুন:
manifest.json:
{
"manifest_version": 3,
"name": "Open extension API reference",
"version": "1.0.0",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "service-worker.js"
}
}
এক্সটেনশনগুলো তাদের সার্ভিস ওয়ার্কারকে ম্যানিফেস্টে রেজিস্টার করে, যার জন্য শুধুমাত্র একটি জাভাস্ক্রিপ্ট ফাইল প্রয়োজন হয়। একটি ওয়েব পেজের মতো এখানে navigator.serviceWorker.register() কল করার কোনো প্রয়োজন নেই।
একটি images ফোল্ডার তৈরি করুন এবং আইকনগুলো সেখানে ডাউনলোড করুন ।
এক্সটেনশনটির মেটাডেটা এবং ম্যানিফেস্টে থাকা আইকনগুলো সম্পর্কে আরও জানতে রিডিং টাইম টিউটোরিয়ালের প্রথম ধাপগুলো দেখে নিন।
ধাপ ২: একাধিক সার্ভিস ওয়ার্কার মডিউল ইম্পোর্ট করুন
আমাদের সার্ভিস ওয়ার্কার দুটি ফিচার বাস্তবায়ন করে। আরও ভালো রক্ষণাবেক্ষণের জন্য, আমরা প্রতিটি ফিচার একটি আলাদা মডিউলে বাস্তবায়ন করব। প্রথমে, আমাদের ম্যানিফেস্টে সার্ভিস ওয়ার্কারটিকে একটি ES মডিউল হিসেবে ঘোষণা করতে হবে, যা আমাদের সার্ভিস ওয়ার্কারে মডিউল ইম্পোর্ট করার সুযোগ দেয়:
manifest.json:
{
"background": {
"service_worker": "service-worker.js",
"type": "module"
},
}
service-worker.js ফাইলটি তৈরি করুন এবং দুটি মডিউল ইম্পোর্ট করুন:
import './sw-omnibox.js';
import './sw-tips.js';
এই ফাইলগুলো তৈরি করুন এবং প্রতিটিতে একটি কনসোল লগ যোগ করুন।
sw-omnibox.js:
console.log("sw-omnibox.js");
sw-tips.js:
console.log("sw-tips.js");
একটি সার্ভিস ওয়ার্কারে একাধিক ফাইল ইম্পোর্ট করার অন্যান্য উপায় সম্পর্কে জানতে ‘ইম্পোর্টিং স্ক্রিপ্টস’ দেখুন।
ঐচ্ছিক: সার্ভিস ওয়ার্কার ডিবাগ করা
আমি ব্যাখ্যা করব কিভাবে সার্ভিস ওয়ার্কার লগ খুঁজে বের করতে হয় এবং এটি কখন বন্ধ হয়েছে তা জানতে হয়। প্রথমে, একটি আনপ্যাক করা এক্সটেনশন লোড করার নির্দেশাবলী অনুসরণ করুন।
৩০ সেকেন্ড পর আপনি "সার্ভিস ওয়ার্কার (ইনঅ্যাক্টিভ)" দেখতে পাবেন, যার অর্থ সার্ভিস ওয়ার্কারটি বন্ধ হয়ে গেছে। এটি পরীক্ষা করার জন্য "সার্ভিস ওয়ার্কার (ইনঅ্যাক্টিভ)" লিঙ্কে ক্লিক করুন। নিচের অ্যানিমেশনটিতে এটি দেখানো হয়েছে।
আপনি কি লক্ষ্য করেছেন যে সার্ভিস ওয়ার্কারটি পরিদর্শন করার ফলে এটি সক্রিয় হয়ে উঠেছে? ডেভটুলস-এ সার্ভিস ওয়ার্কারটি খুললে তা সক্রিয় থাকবে। আপনার সার্ভিস ওয়ার্কারটি বন্ধ হয়ে গেলে আপনার এক্সটেনশনটি যেন সঠিকভাবে কাজ করে, তা নিশ্চিত করতে ডেভটুলস বন্ধ করতে মনে রাখবেন।
এখন, ত্রুটিগুলো কোথায় আছে তা জানতে এক্সটেনশনটি ভেঙে ফেলুন। এটি করার একটি উপায় হলো service-worker.js ফাইল থেকে './sw-omnibox.js' ইম্পোর্টের শেষে ".js" মুছে ফেলা। এর ফলে Chrome সার্ভিস ওয়ার্কারটি রেজিস্টার করতে পারবে না।
chrome://extensions-এ ফিরে যান এবং এক্সটেনশনটি রিফ্রেশ করুন। আপনি দুটি ত্রুটি দেখতে পাবেন:
Service worker registration failed. Status code: 3.
An unknown error occurred when fetching the script.
See Debugging extensions for more ways to debug the extension service worker.
ধাপ ৪: অবস্থা প্রারম্ভিকীকরণ করুন
প্রয়োজন না হলে ক্রোম সার্ভিস ওয়ার্কারগুলো বন্ধ করে দেবে। সার্ভিস ওয়ার্কার সেশন জুড়ে স্টেট ধরে রাখার জন্য আমরা chrome.storage API ব্যবহার করি। স্টোরেজ অ্যাক্সেসের জন্য, আমাদের ম্যানিফেস্টে অনুমতির অনুরোধ করতে হবে:
manifest.json:
{
...
"permissions": ["storage"],
}
প্রথমে, ডিফল্ট সাজেশনগুলো স্টোরেজে সেভ করুন। এক্সটেনশনটি প্রথমবার ইনস্টল করার সময় runtime.onInstalled() ইভেন্টটি লিসেন করে আমরা স্টেট ইনিশিয়ালাইজ করতে পারি:
sw-omnibox.js:
...
// Save default API suggestions
chrome.runtime.onInstalled.addListener(({ reason }) => {
if (reason === 'install') {
chrome.storage.local.set({
apiSuggestions: ['tabs', 'storage', 'scripting']
});
}
});
সার্ভিস ওয়ার্কারদের উইন্ডো অবজেক্টে সরাসরি অ্যাক্সেস নেই এবং তাই তারা ভ্যালু স্টোর করার জন্য window.localStorage ব্যবহার করতে পারে না। এছাড়াও, সার্ভিস ওয়ার্কাররা স্বল্পস্থায়ী এক্সিকিউশন এনভায়রনমেন্ট; একজন ব্যবহারকারীর ব্রাউজার সেশন চলাকালীন এগুলো বারবার টার্মিনেট হয়ে যায়, যা এদেরকে গ্লোবাল ভ্যারিয়েবলের সাথে বেমানান করে তোলে। এর পরিবর্তে, chrome.storage.local ব্যবহার করুন, যা ডেটা লোকাল মেশিনে স্টোর করে।
এক্সটেনশন সার্ভিস ওয়ার্কারদের জন্য অন্যান্য স্টোরেজ বিকল্প সম্পর্কে জানতে, গ্লোবাল ভেরিয়েবল ব্যবহার না করে ডেটা পার্সিস্ট করার বিষয়টি দেখুন।
ধাপ ৫: আপনার ইভেন্টগুলো নিবন্ধন করুন
সমস্ত ইভেন্ট লিসেনারকে সার্ভিস ওয়ার্কারের গ্লোবাল স্কোপে স্ট্যাটিক্যালি রেজিস্টার করতে হবে। অন্য কথায়, ইভেন্ট লিসেনারগুলোকে অ্যাসিঙ্ক ফাংশনের ভেতরে রাখা উচিত নয়। এভাবে ক্রোম নিশ্চিত করতে পারে যে, সার্ভিস ওয়ার্কার রিবুট হওয়ার ক্ষেত্রে সমস্ত ইভেন্ট হ্যান্ডলার পুনরুদ্ধার করা হয়।
এই উদাহরণে, আমরা chrome.omnibox API ব্যবহার করতে যাচ্ছি, কিন্তু প্রথমে আমাদের ম্যানিফেস্টে omnibox কীওয়ার্ড trigger ডিক্লেয়ার করতে হবে:
manifest.json:
{
...
"minimum_chrome_version": "102",
"omnibox": {
"keyword": "api"
},
}
এখন, স্ক্রিপ্টের টপ লেভেলে অমনিবক্স ইভেন্ট লিসেনারগুলো রেজিস্টার করুন। যখন ব্যবহারকারী অ্যাড্রেস বারে অমনিবক্স কীওয়ার্ড ( api ) লিখে ট্যাব বা স্পেস চাপবেন, তখন ক্রোম স্টোরেজে থাকা কীওয়ার্ডগুলোর উপর ভিত্তি করে সাজেশনের একটি তালিকা প্রদর্শন করবে। onInputChanged() ইভেন্টটি, যা ব্যবহারকারীর বর্তমান ইনপুট এবং একটি suggestResult অবজেক্ট গ্রহণ করে, এই সাজেশনগুলো পপুলেট করার জন্য দায়ী।
sw-omnibox.js:
...
const URL_CHROME_EXTENSIONS_DOC =
'https://developer.chrome.com/docs/extensions/reference/';
const NUMBER_OF_PREVIOUS_SEARCHES = 4;
// Display the suggestions after user starts typing
chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {
await chrome.omnibox.setDefaultSuggestion({
description: 'Enter a Chrome API or choose from past searches'
});
const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
const suggestions = apiSuggestions.map((api) => {
return { content: api, description: `Open chrome.${api} API` };
});
suggest(suggestions);
});
ব্যবহারকারী কোনো সাজেশন নির্বাচন করার পর, onInputEntered() সংশ্লিষ্ট ক্রোম এপিআই রেফারেন্স পেজটি খুলবে।
sw-omnibox.js:
...
// Open the reference page of the chosen API
chrome.omnibox.onInputEntered.addListener((input) => {
chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
// Save the latest keyword
updateHistory(input);
});
` updateHistory() ` ফাংশনটি অমনিবক্সের ইনপুট গ্রহণ করে এবং তা storage.local এ সংরক্ষণ করে। এর ফলে, সর্বশেষ সার্চ টার্মটি পরবর্তীতে অমনিবক্স সাজেশন হিসেবে ব্যবহার করা যায়।
sw-omnibox.js:
...
async function updateHistory(input) {
const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
apiSuggestions.unshift(input);
apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
return chrome.storage.local.set({ apiSuggestions });
}
ধাপ ৬: একটি পুনরাবৃত্তিমূলক ইভেন্ট সেট আপ করুন
setTimeout() বা setInterval() মেথডগুলো সাধারণত বিলম্বিত বা পর্যায়ক্রমিক কাজ সম্পাদন করতে ব্যবহৃত হয়। তবে, এই API-গুলো ব্যর্থ হতে পারে, কারণ সার্ভিস ওয়ার্কারটি বন্ধ হয়ে গেলে শিডিউলার টাইমারগুলো বাতিল করে দেয়। এর পরিবর্তে, এক্সটেনশনগুলো chrome.alarms API ব্যবহার করতে পারে।
ম্যানিফেস্টে "alarms" পারমিশনটির জন্য অনুরোধ করার মাধ্যমে শুরু করুন:
manifest.json:
{
...
"permissions": ["storage"],
"permissions": ["storage", "alarms"],
}
এক্সটেনশনটি সমস্ত টিপস সংগ্রহ করবে, দৈবচয়নের মাধ্যমে একটি বেছে নেবে এবং স্টোরেজে সংরক্ষণ করবে। আমরা একটি অ্যালার্ম তৈরি করব যা টিপসটি আপডেট করার জন্য দিনে একবার চালু হবে। ক্রোম বন্ধ করলে অ্যালার্ম সংরক্ষিত থাকে না। তাই আমাদের দেখতে হবে অ্যালার্মটি আছে কিনা এবং না থাকলে তা তৈরি করতে হবে।
sw-tips.js:
// Fetch tip & save in storage
const updateTip = async () => {
const response = await fetch('https://chrome.dev/f/extension_tips/');
const tips = await response.json();
const randomIndex = Math.floor(Math.random() * tips.length);
return chrome.storage.local.set({ tip: tips[randomIndex] });
};
const ALARM_NAME = 'tip';
// Check if alarm exists to avoid resetting the timer.
// The alarm might be removed when the browser session restarts.
async function createAlarm() {
const alarm = await chrome.alarms.get(ALARM_NAME);
if (typeof alarm === 'undefined') {
chrome.alarms.create(ALARM_NAME, {
delayInMinutes: 1,
periodInMinutes: 1440
});
updateTip();
}
}
createAlarm();
// Update tip once a day
chrome.alarms.onAlarm.addListener(updateTip);
ধাপ ৭: অন্যান্য প্রেক্ষাপটের সাথে যোগাযোগ করুন
এক্সটেনশনগুলো পেজের বিষয়বস্তু পড়তে ও পরিবর্তন করতে কন্টেন্ট স্ক্রিপ্ট ব্যবহার করে। যখন কোনো ব্যবহারকারী একটি ক্রোম এপিআই রেফারেন্স পেজ ভিজিট করেন, তখন এক্সটেনশনটির কন্টেন্ট স্ক্রিপ্ট ‘টিপ অফ দ্য ডে’ দিয়ে পেজটি আপডেট করে। এটি সার্ভিস ওয়ার্কারের কাছে ‘টিপ অফ দ্য ডে’ অনুরোধ করার জন্য একটি মেসেজ পাঠায় ।
প্রথমে ম্যানিফেস্টে কন্টেন্ট স্ক্রিপ্টটি ডিক্লেয়ার করুন এবং ক্রোম এপিআই রেফারেন্স ডকুমেন্টেশন অনুযায়ী ম্যাচ প্যাটার্নটি যোগ করুন।
manifest.json:
{
...
"content_scripts": [
{
"matches": ["https://developer.chrome.com/docs/extensions/reference/*"],
"js": ["content.js"]
}
]
}
একটি নতুন কন্টেন্ট ফাইল তৈরি করুন। নিচের কোডটি টিপ-এর অনুরোধ জানিয়ে সার্ভিস ওয়ার্কারে একটি মেসেজ পাঠায়। এরপর, এটি একটি বাটন যোগ করে যা এক্সটেনশন টিপ সম্বলিত একটি পপওভার খুলবে। এই কোডটি নতুন ওয়েব প্ল্যাটফর্ম Popover API ব্যবহার করে।
content.js:
(async () => {
// Sends a message to the service worker and receives a tip in response
const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });
const nav = document.querySelector('.upper-tabs > nav');
const tipWidget = createDomElement(`
<button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
<span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
</button>
`);
const popover = createDomElement(
`<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
);
document.body.append(popover);
nav.append(tipWidget);
})();
function createDomElement(html) {
const dom = new DOMParser().parseFromString(html, 'text/html');
return dom.body.firstElementChild;
}
চূড়ান্ত ধাপটি হলো আমাদের সার্ভিস ওয়ার্কারে একটি মেসেজ হ্যান্ডলার যুক্ত করা, যা দৈনিক টিপস সহ কন্টেন্ট স্ক্রিপ্টে একটি উত্তর পাঠাবে।
sw-tips.js:
...
// Send tip to content script via messaging
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.greeting === 'tip') {
chrome.storage.local.get('tip').then(sendResponse);
return true;
}
});
এটি কাজ করে কিনা পরীক্ষা করুন
আপনার প্রোজেক্টের ফাইল কাঠামোটি নিম্নলিখিতের মতো দেখতে কিনা তা যাচাই করুন:
আপনার এক্সটেনশনটি স্থানীয়ভাবে লোড করুন
To load an unpacked extension in developer mode, follow the steps in Hello world .
একটি রেফারেন্স পৃষ্ঠা খুলুন
- ব্রাউজারের অ্যাড্রেস বারে 'api' কীওয়ার্ডটি টাইপ করুন।
- 'ট্যাব' বা 'স্পেস' চাপুন।
- এপিআই-এর সম্পূর্ণ নামটি লিখুন।
- অথবা পূর্ববর্তী অনুসন্ধানগুলির তালিকা থেকে বেছে নিন
- ক্রোম এপিআই রেফারেন্স পৃষ্ঠার একটি নতুন পেজ খুলে যাবে।
এটা দেখতে এইরকম হওয়া উচিত:
দিনের সেরা টিপসটি খুলুন
এক্সটেনশন টিপটি খোলার জন্য নেভিগেশন বারে অবস্থিত টিপ বাটনটিতে ক্লিক করুন।
🎯 সম্ভাব্য উন্নয়ন
আজ যা শিখেছেন তার ভিত্তিতে, নিচের যেকোনো একটি সম্পন্ন করার চেষ্টা করুন:
- অমনিবক্স সাজেশনগুলো বাস্তবায়নের জন্য অন্য কোনো উপায় অন্বেষণ করুন।
- এক্সটেনশন টিপটি দেখানোর জন্য আপনার নিজস্ব কাস্টম মোডাল তৈরি করুন।
- MDN-এর ওয়েব এক্সটেনশন রেফারেন্স API পৃষ্ঠাগুলিতে একটি অতিরিক্ত পৃষ্ঠা খুলুন।
নির্মাণ চালিয়ে যান!
এই টিউটোরিয়ালটি শেষ করার জন্য অভিনন্দন 🎉। অন্যান্য শিক্ষানবিস টিউটোরিয়ালগুলো সম্পন্ন করে আপনার দক্ষতা আরও বাড়িয়ে তুলুন:
| সম্প্রসারণ | আপনি যা শিখবেন |
|---|---|
| পড়ার সময় | নির্দিষ্ট কিছু পৃষ্ঠায় স্বয়ংক্রিয়ভাবে কোনো উপাদান যুক্ত করতে। |
| ট্যাব ম্যানেজার | ব্রাউজার ট্যাবগুলো পরিচালনা করার জন্য একটি পপআপ তৈরি করতে। |
| ফোকাস মোড | এক্সটেনশন অ্যাকশনে ক্লিক করার পর বর্তমান পেজে কোড রান করার জন্য। |
অন্বেষণ চালিয়ে যান
আপনার সম্প্রসারণ সেবাকর্মী বিষয়ক জ্ঞানার্জন অব্যাহত রাখতে, আমরা নিম্নলিখিত প্রবন্ধগুলো পড়ার সুপারিশ করছি: