এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কোডল্যাব: জেমিনি ব্যবহার করে জাভাস্ক্রিপ্টে একটি ক্রোম এক্সটেনশন তৈরি করুন

১. ভূমিকা

আপনি কি কোনো মিট কলে যোগ দিচ্ছেন কিন্তু প্রথম ব্যক্তি হতে চান না? যদি আপনার ক্ষেত্রেও এমনটা হয়ে থাকে, তবে আমাদের কাছে আপনার জন্য সমাধান আছে!

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

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

যখনই কোনো অংশগ্রহণকারী একটি মিট কলে যোগদান করে, তখন নোটিফিকেশন পাওয়ার জন্য আপনাকে ম্যানিফেস্ট v3 রিলিজটি মেনে চলতে হবে।

২. শুরু করার আগে

পূর্বশর্ত

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

সেটআপ/প্রয়োজনীয়তা

ক্রোম ব্রাউজার
আপনার স্থানীয় সিস্টেমে একটি IDE/এডিটর সেটআপ করা আছে।
আপনি যদি gcloud ব্যবহার করে Gemini API সক্রিয় করতে চান, তাহলে gcloud cli ইনস্টল করুন।

জেমিনি এপিআই সক্রিয় করুন

গুগল ক্লাউড কনসোলের প্রজেক্ট সিলেক্টর পেজে, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন।
আপনার ক্লাউড প্রোজেক্টের জন্য বিলিং চালু আছে কিনা তা নিশ্চিত করুন। কোনো প্রোজেক্টে বিলিং চালু আছে কিনা তা কীভাবে পরীক্ষা করবেন, তা জেনে নিন।
এপিআই (API) সক্রিয় করতে জেমিনি মার্কেটপ্লেস (Gemini Marketplace) পৃষ্ঠায় যান। আপনি gcloud ব্যবহার করেও এপিআই সক্রিয় করতে পারেন: gcloud services enable cloudaicompanion.googleapis.com --project PROJECT_ID
একটি নতুন ট্যাবে জেমিনি ফর ক্লাউড কনসোল পেজটি খুলুন এবং 'চ্যাটিং শুরু করুন'-এ ক্লিক করুন।

Note that if you're writing the code in the Cloud Shell editor,
then you will have to download the folder somewhere on your local filesystem to test the extension locally.

৩. মজা শুরু হোক।

বেসিক এক্সটেনশন ইনস্টলেশন

চলুন একটি ডিরেক্টরি তৈরি করি, যেটি আমরা আমাদের প্রজেক্টের রুট হিসেবে ব্যবহার করব।

mkdir gemini-chrome-ext
cd gemini-chrome-ext

জেমিনিকে নির্দিষ্ট প্রশ্ন করা শুরু করার আগে, চলুন একটি ক্রোম এক্সটেনশনের সাধারণ কাঠামো সম্পর্কে কিছু প্রশ্ন করা যাক।

প্রম্পট:

What are the important parts to build a chrome extension?

আমরা manifest ফাইল, background script এবং ইউজার ইন্টারফেস সম্পর্কে কিছু খুঁটিনাটি তথ্যসহ একটি প্রতিক্রিয়া পাই। চলুন এই নির্দিষ্ট ফাইলগুলো নিয়ে আরও বিস্তারিত আলোচনা করা যাক।

প্রম্পট:

Create a manifest.json file to build a chrome extension.
Make the name of the extension "Meet Joinees Notifier"
and the author "<YOUR_EMAIL>"

লেখক অংশে আপনি আপনার পছন্দের নাম এবং ইমেল ব্যবহার করতে পারেন।

জেমিনি আমাদের প্রয়োজনীয় ম্যানিফেস্ট ফাইলের বিষয়বস্তু ফেরত দেয়, কিন্তু আমরা কিছু অতিরিক্ত ফিল্ডও পাই যেগুলো আমাদের প্রয়োজন হবে না, যেমন action ফিল্ড। এছাড়াও, আমাদের একটি বিবরণ প্রয়োজন। চলুন, এটা ঠিক করা যাক।

প্রম্পট:

Remove the "action" field and make the description as
"Adds the ability to receive a notification when a participant joins a Google meet".

চলুন এই কন্টেন্টটি আপনার প্রোজেক্টের রুটে থাকা manifest.json ফাইলে রাখি।

এই পর্যায়ে ম্যানিফেস্ট ফাইলটি দেখতে অনেকটা এইরকম হবে।

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "<YOUR_EMAIL>"
}

আপাতত আপনার ম্যানিফেস্ট ফাইলে তৈরি হওয়া অন্য যেকোনো অতিরিক্ত ফিল্ড সরিয়ে ফেলুন, কারণ এই কোডল্যাবটি ধরে নেয় যে আপনার ম্যানিফেস্ট ফাইলে এই ফিল্ডগুলো রয়েছে।

এখন, এক্সটেনশনটি কাজ করছে কিনা তা আমরা কীভাবে পরীক্ষা করব? চলো আমাদের বন্ধু জেমিনিকে জিজ্ঞেস করি, কেমন?

প্রম্পট:

Guide me on the steps needed to test a chrome extension on my local filesystem.

এটি কীভাবে পরীক্ষা করতে হবে তার কিছু ধাপ দেখিয়ে দেয়। চলুন chrome://extensions এ গিয়ে "Extensions Page" -এ যাই এবং "Developer Mode" বাটনটি চালু করতে হবে। এটি চালু করলে "Load unpacked" বাটনটি দেখা যাবে, যা ব্যবহার করে আমরা স্থানীয়ভাবে এক্সটেনশন ফাইলগুলো থাকা ফোল্ডারে যেতে পারব। এটি করার পর, আমরা "Extensions Page" -এ এক্সটেনশনটি দেখতে পাব।

দারুণ! আমরা আমাদের এক্সটেনশনটি দেখতে পাচ্ছি, কিন্তু চলুন কিছু কার্যকারিতা যোগ করা শুরু করি।

৪. একটি কন্টেন্ট স্ক্রিপ্ট যোগ করুন

আমরা শুধুমাত্র https://meet.google.com এ কিছু জাভাস্ক্রিপ্ট কোড চালাতে চাই, যা আমরা কন্টেন্ট স্ক্রিপ্ট ব্যবহার করে করতে পারি। চলুন জেমিনিকে জিজ্ঞাসা করি, আমাদের এক্সটেনশনে এটি কীভাবে করা যায়।

প্রম্পট:

How to add a content script in our chrome extension?

অথবা আরও নির্দিষ্টভাবে বললে:

প্রম্পট:

How to add a content script to run on meet.google.com subdomain in our chrome extension?

অথবা অন্য একটি সংস্করণ:

প্রম্পট:

Help me add a content script named content.js to run on meet.google.com subdomain
in our chrome extension. The content
script should simply log "Hello Gemini" when we navigate to "meet.google.com".

জেমিনি আমাদের manifest.json ফাইলে ঠিক কী কী পরিবর্তন করতে হবে এবং content.js ফাইলে কোন জাভাস্ক্রিপ্ট প্রয়োজন, তা স্পষ্টভাবে দেখিয়ে দেয়।

`content_scripts` যোগ করার ফলে আমাদের ম্যানিফেস্ট ফাইলটি নিম্নরূপ হবে:

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "abc@example.com",
    "content_scripts": [
        {
          "matches": ["https://meet.google.com/*"],
          "js": ["content.js"]
        }
    ]
}

এটি ক্রোমকে নির্দেশ দেয় যে, যখনই আমরা " https://meet.google.com " সাবডোমেইনের কোনো পৃষ্ঠায় যাব, তখন যেন content.js কন্টেন্ট স্ক্রিপ্টটি যুক্ত হয়। চলুন, ফাইলটি যোগ করে পরীক্ষা করে দেখি, কেমন?

চলুন এই কোডটি content.js ফাইলে যোগ করি।

console.log("Hello Gemini");

একদম ঠিক! যখন আমরা meet.google.com-এ যাই, তখন জাভাস্ক্রিপ্ট কনসোলে (Mac: Cmd + Opt + J / Win/Linux: Ctrl + Shift + J ) "Hello Gemini" দেখতে পাই।

manifest.json

{

"name": "Meet Joinees Notifier",

"version": "1.0",

"manifest_version": 3,

"description": "Adds the ability to receive a notification when a participant joins a Google Meet",

"author": "luke@cloudadvocacyorg.joonix.net",

"permissions": [

    "tabs",

    "notifications"

],

"content_scripts": [

    {

        "matches": [

            "https://meet.google.com/*"

        ],

        "js": [

            "content.js"

        ]

    }

]

}



content.js

console.log("হ্যালো জেমিনি!");



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

কন্টেন্ট স্ক্রিপ্ট উন্নত করা

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

মিটিংয়ে কেউ না থাকলে এমনটা দেখায়।

অপরদিকে, মিটিংয়ে কিছু অংশগ্রহণকারী থাকলে এই দৃশ্যগুলো দেখা যায়।

শুরুতেই আমরা দুটি উল্লেখযোগ্য পার্থক্য দেখতে পাই:

স্ট্যাটাস টেক্সট "এখানে আর কেউ নেই" থেকে পরিবর্তিত হয়ে "[ব্যবহারকারী] এই কলে আছেন" হয়।
যেসব ব্যবহারকারী কলে যোগদান করেছেন, আমরা তাদের ছবি দেখতে পাচ্ছি।

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

হটকি (ম্যাক: Cmd + Opt + C / Win: Ctrl + Shift + C ) ব্যবহার করে ক্রোমে 'এলিমেন্টস ইন্সপেক্টর' খুলুন, তারপর যে ব্যবহারকারী যোগদান করেছেন তার ছবিতে ক্লিক করুন।

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

সুতরাং, আমাদের একটি আংশিক কৌশল রয়েছে:

U04fid ক্লাসযুক্ত div-টিতে কখন কোনো এলিমেন্ট থাকে তা শনাক্ত করুন।
যদি তাই হয়, তাহলে তার মানে হলো আমাদের মিটিংয়ে নতুন সদস্য যোগ দিয়েছেন।
ব্যবহারকারীকে অবহিত করুন।

চলুন মিথুন রাশির কাছে ফিরে যাই এবং জিজ্ঞাসা করি কীভাবে আমরা ধাপে ধাপে এটি অর্জন করতে পারি।

প্রম্পট:

How to detect for element changes in the HTML page?

এটি আমাদের MutationObserver মাধ্যমে একটি সমাধান দেয়, কিন্তু আমাদের প্রয়োজন অনুযায়ী নির্দিষ্ট কিছু নয়, চলুন প্রম্পটটি পরিবর্তন করার চেষ্টা করি।

প্রম্পট:

How can I detect if an element "div.U04fid" has any child images in the HTML page?

এবার আমরা এমন একটি সমাধান পাই যেখানে MutationObserver অন্তর্ভুক্ত নয়, বরং parent div ব্যবহার করে যোগদানকারীদের যাচাই করা হয়।

আমরা যা পেয়েছি তা হলো:

const divU04fid = document.querySelector('div.U04fid');
const childImages = divU04fid.querySelectorAll('img');
if (childImages.length > 0) {
  // div.U04fid has at least one child image.
}

চলুন আমাদের পদ্ধতিটিকে আরও পরিবর্তন করার চেষ্টা করি:

প্রম্পট:

Create a method which checks if the element div.U04fid has any child elements,
if it does it should log it on the console. The method should be called checkJoinees
and it should be called as a callback for MutationObserver which is observing the document.body.

এটি নিম্নলিখিত কোড স্নিপেট সহ ফেরত আসে:

function checkJoinees(mutations) {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        // A child node was added or removed.
        if (document.querySelector('div.U04fid') && document.querySelector('div.U04fid').childElementCount > 0) {
          // div.U04fid has at least one child element.
          console.log('div.U04fid has at least one child element.');
        }
      }
    }
    return false;
}

const observer = new MutationObserver(checkJoinees);
observer.observe(document.body, {
  childList: true,
  delay: 1000
});

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

এই কোডটি content.js ফাইলে কপি করুন, এক্সটেনশনটি রিলোড করুন (এরপর মিট পেজটি রিলোড করুন)।

এখন যখন কেউ আমাদের মিটিংয়ে যোগ দেয়, আমরা কনসোলে লগ স্টেটমেন্টটি দেখতে পাই।

৫. ব্যবহারকারীকে একটি বিজ্ঞপ্তি পাঠান

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

প্রম্পট:

Using the documentation for chrome notifications tell me how to use the chrome.notifications.create method.

আমরা কিছু বিস্তারিত ধাপ দেখতে পাই, যার প্রধান বিষয়গুলো হলো:

ম্যানিফেস্ট ফাইলে notifications পারমিশনটি যোগ করুন।
chrome.notifications.create-কে কল করুন।
কলটি একটি ব্যাকগ্রাউন্ড স্ক্রিপ্টে থাকা উচিত।

manifest version 3 এ ক্রোম এক্সটেনশনে ব্যাকগ্রাউন্ড স্ক্রিপ্ট যোগ করতে হলে, আমাদের manifest.json ফাইলে background.service_worker ডিক্লারেশনটি প্রয়োজন।

সুতরাং, আমরা background.js নামে একটি ফাইল তৈরি করব এবং আমাদের manifest.json ফাইলে নিম্নলিখিত বিষয়গুলো যোগ করব।

"background": {
        "service_worker": "background.js"
},
"permissions": [
        "notifications"
]

উপরোক্ত সংযোজনগুলোর ফলে আমাদের ম্যানিফেস্ট ফাইলটি হবে নিম্নরূপ:

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "<YOUR_EMAIL>",
    "content_scripts": [
        {
          "matches": ["https://meet.google.com/*"],
          "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
            "notifications"
    ]
}

প্রম্পট:

Create a method sendNotification that calls the chrome.notifications.create
method with the message, "A user joined the call" for a chrome extension with manifest v3,
the code is in the background service worker

এই ছবিটি আপনার ফোল্ডারের রুটে সংরক্ষণ করুন এবং এর নাম পরিবর্তন করে success.png রাখুন।

এরপর আপনার background.js ফাইলে নিম্নলিখিত কোড স্নিপেটটি যোগ করুন।

function sendNotification(notificationId, message) {
    chrome.notifications.create(notificationId, {
      type: "basic",
      title: "A user joined the call",
      message: message,
      iconUrl: "./success.png"
    });
}

sendNotification("notif-id", "test message");

এখন এক্সটেনশন পেজ থেকে এক্সটেনশনটি রিলোড করুন এবং আপনি সাথে সাথেই একটি নোটিফিকেশন পপআপ দেখতে পাবেন।

৬. আপনার ক্রোম এক্সটেনশনে মেসেজ পাসিং যোগ করুন

এখন, আমাদের শেষ প্রধান ধাপটি হলো কন্টেন্ট স্ক্রিপ্টের অংশগ্রহণকারী শনাক্তকরণ এবং ব্যাকগ্রাউন্ড স্ক্রিপ্টের sendNotification মেথডকে সংযুক্ত করা। ক্রোম এক্সটেনশনের ক্ষেত্রে, message passing নামক একটি কৌশলের মাধ্যমে এটি করা হয়।

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

প্রম্পট:

How to send a message from the content script to the background script in a chrome extension

জেমিনি chrome.runtime.sendMessage এবং chrome.runtime.onMessage.addListener কে প্রাসঙ্গিক কল করার মাধ্যমে সাড়া দেয়।

মূলত, আমরা কন্টেন্ট স্ক্রিপ্ট থেকে কেউ মিট কলে যোগ দিয়েছে এই মর্মে একটি মেসেজ পাঠানোর জন্য sendMessage ব্যবহার করব এবং কন্টেন্ট স্ক্রিপ্ট দ্বারা প্রেরিত মেসেজে প্রতিক্রিয়া জানানোর জন্য onMessage.addListener কে একটি ইভেন্ট লিসেনার হিসেবে ব্যবহার করব। এক্ষেত্রে আমরা এই ইভেন্ট লিসেনার থেকে sendNotification মেথডটিকে কল করার প্রক্রিয়াটি ট্রিগার করব।

আমরা ব্যাকগ্রাউন্ড সার্ভিস ওয়ার্কারে নোটিফিকেশন মেসেজ এবং একটি action প্রপার্টি পাঠাবো। action প্রপার্টিটি বর্ণনা করে যে ব্যাকগ্রাউন্ড স্ক্রিপ্টটি কিসের প্রতি সাড়া দিচ্ছে।

তাহলে, এই হলো আমাদের content.js কোড:

function checkJoinees(mutations) {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        // A child node was added or removed.
        if (document.querySelector('div.U04fid') && document.querySelector('div.U04fid').childElementCount > 0) {
          // div.U04fid has at least one child element.
          sendMessage();
        }
      }
    }
    return false;
}

const observer = new MutationObserver(checkJoinees);
observer.observe(document.body, {
  childList: true,
  delay: 1000
});

function sendMessage() {
    chrome.runtime.sendMessage({
        txt: "A user has joined the call!",
        action: "people_joined"
    });
}

এবং এটি আমাদের background.js কোড:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "people_joined") {
      sendNotification("notif-id", message.txt);
    }
  });
  

function sendNotification(notificationId, message) {
    chrome.notifications.create(notificationId, {
      type: "basic",
      title: "A user joined the call",
      message: message,
      iconUrl: "./success.png"
    });
}

চলুন নোটিফিকেশন মেসেজটি কাস্টমাইজ করে একটি ইউনিক নোটিফিকেশন আইডি পাওয়ার চেষ্টা করি। নোটিফিকেশন মেসেজে আমরা ব্যবহারকারীর নাম অন্তর্ভুক্ত করতে পারি। আগের একটি ধাপ থেকে আমরা স্মরণ করলে দেখতে পাই যে, আমরা ইমেজের টাইটেল অ্যাট্রিবিউটে ব্যবহারকারীর নাম দেখতে পেয়েছিলাম। সুতরাং, আমরা document.querySelector('div.U04fid > img').getAttribute('title').

নোটিফিকেশন আইডির ক্ষেত্রে, আমরা কন্টেন্ট স্ক্রিপ্টের ট্যাব আইডিটি নিয়ে সেটিকে নোটিফিকেশন আইডি হিসেবে ব্যবহার করতে পারি। আমাদের ইভেন্ট লিসেনার chrome.runtime.onMessage.addListener এর ভেতরে sender.tab.id.

অবশেষে, আমাদের ফাইলগুলো দেখতে অনেকটা এইরকম হবে:

manifest.json

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "<YOUR_EMAIL>",
    "content_scripts": [
        {
          "matches": ["https://meet.google.com/*"],
          "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
            "notifications"
    ]
}

content.js

function checkJoinees(mutations) {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        // A child node was added or removed.
        if (document.querySelector('div.U04fid') && document.querySelector('div.U04fid').childElementCount > 0) {
            const name = document.querySelector('div.U04fid > img').getAttribute('title');
            sendMessage(name);
        }
      }
    }
    return false;
}

const observer = new MutationObserver(checkJoinees);
observer.observe(document.body, {
  childList: true,
  delay: 1000
});

function sendMessage(name) {
    const joinee = (name === null ? 'Someone' : name),
        txt = `${joinee} has joined the call!`;

    chrome.runtime.sendMessage({
        txt,
        action: "people_joined",
    });
}

ব্যাকগ্রাউন্ড.জেএস

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "people_joined") {
      sendNotification("" + sender.tab.id, message.txt); // We are casting this to string as notificationId is expected to be a string while sender.tab.id is an integer.
    }
  });
  

function sendNotification(notificationId, message) {
    chrome.notifications.create(notificationId, {
      type: "basic",
      title: "A user joined the call",
      message: message,
      iconUrl: "./success.png"
    });
}

৭. অভিনন্দন

জেমিনির সাহায্যে আমরা অল্প সময়ের মধ্যে একটি ক্রোম এক্সটেনশন তৈরি করতে সক্ষম হয়েছি। আপনি একজন অভিজ্ঞ ক্রোম এক্সটেনশন ডেভেলপার হোন বা এক্সটেনশনের জগতে নতুনই হোন না কেন, আপনি যে কোনো কাজই সম্পন্ন করতে চান, জেমিনি আপনাকে সাহায্য করতে পারে।

আমি আপনাকে একটি ক্রোম এক্সটেনশন দিয়ে কী কী করা যায়, সে সম্পর্কে জিজ্ঞাসা করতে উৎসাহিত করব। chrome.storage , alarms ইত্যাদির মতো অনেক এপিআই (API) আছে যা আপনি দেখে নিতে পারেন। যেখানেই আপনি আটকে যাবেন, সেখানে আপনি কী ভুল করছেন তা জানতে বা সমস্যা সমাধানের বিভিন্ন উপায় খুঁজে বের করতে Gemini বা ডকুমেন্টেশন ব্যবহার করুন।

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