1. परिचय
क्या आपको Meet कॉल में शामिल होना है, लेकिन आपको सबसे पहले मीटिंग में शामिल नहीं होना है? अगर ऐसा है, तो हमारे पास इसका समाधान है!
इस कोडलैब के बाद, आपको एक Chrome एक्सटेंशन बनाना होगा. यह एक्सटेंशन, कॉल में शामिल होने वाले सबसे पहले व्यक्ति के शामिल होने पर आपको सूचना देगा.
आपको Chrome एक्सटेंशन के अलग-अलग एलिमेंट के बारे में जानकारी मिलेगी. इसके बाद, एक्सटेंशन के हर हिस्से के बारे में ज़्यादा जानकारी मिलेगी. आप कॉन्टेंट स्क्रिप्ट, सर्विस वर्कर, और मैसेज पास करने जैसे एक्सटेंशन फ़ंक्शन के बारे में जानेंगे.
आपको मेनिफ़ेस्ट v3 रिलीज़ का पालन करना होगा, ताकि जब भी कोई व्यक्ति Meet कॉल में शामिल हो, तो आपको उसकी सूचना मिल सके.
2. शुरू करने से पहले
ज़रूरी शर्तें
यह कोडलैब नए उपयोगकर्ताओं के लिए सही है, लेकिन JavaScript की बुनियादी समझ होने से आपका अनुभव काफ़ी बेहतर हो सकता है.
सेटअप/ज़रूरी शर्तें
- Chrome ब्राउज़र
- आपके लोकल सिस्टम पर एक IDE/Editor सेटअप.
- अगर आपको gcloud का इस्तेमाल करके Gemini API को चालू करना है, तो gcloud cli इंस्टॉल करें.
Gemini API को चालू करना
- Google Cloud Console में, प्रोजेक्ट सिलेक्टर पेज पर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
- पक्का करें कि आपके Cloud प्रोजेक्ट के लिए बिलिंग की सुविधा चालू हो. किसी प्रोजेक्ट के लिए बिलिंग की सुविधा चालू है या नहीं, यह देखने का तरीका जानें.
- एपीआई चालू करने के लिए, Gemini Marketplace के पेज पर जाएँ. इस एपीआई को चालू करने के लिए, gcloud का भी इस्तेमाल किया जा सकता है:
gcloud services enable cloudaicompanion.googleapis.com --project PROJECT_ID - नए टैब में, Gemini for Cloud कंसोल के पेज पर जाएं और "चैट शुरू करें" पर क्लिक करें.
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.
3. आइए मज़ा लेना शुरू करें
बुनियादी एक्सटेंशन इंस्टॉलेशन
चलिए, एक डायरेक्ट्री बनाते हैं, जिसका इस्तेमाल हम अपने प्रोजेक्ट के रूट के तौर पर करेंगे.
mkdir gemini-chrome-ext
cd gemini-chrome-ext
Gemini से कुछ सवाल पूछने से पहले, चलिए Chrome एक्सटेंशन के सामान्य स्ट्रक्चर के बारे में कुछ सवाल पूछते हैं.
प्रॉम्प्ट:
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>"
लेखक फ़ील्ड में अपनी पसंद का नाम और ईमेल पता इस्तेमाल किया जा सकता है.
Gemini, अपनी ज़रूरत के हिसाब से मेनिफ़ेस्ट फ़ाइल का कॉन्टेंट दिखाता है. हालांकि, हमें कुछ ऐसे अतिरिक्त फ़ील्ड मिलते हैं जिनकी हमें ज़रूरत नहीं होती. जैसे, 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>"
}
अपनी मेनिफ़ेस्ट फ़ाइल में जनरेट किए गए दूसरे सभी फ़ील्ड हटा दें, क्योंकि यह कोडलैब आपकी मेनिफ़ेस्ट फ़ाइल में मौजूद फ़ील्ड का इस्तेमाल करता है.
अब हम इसकी जांच कैसे करें कि एक्सटेंशन काम कर रहा है? चलिए, अपने दोस्त Gemini से पूछें.
प्रॉम्प्ट:
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" में एक्सटेंशन दिखेगा.
बढ़िया! हम अपना एक्सटेंशन देख सकते हैं, लेकिन कुछ फ़ंक्शन जोड़ना शुरू करते हैं.
4. कॉन्टेंट स्क्रिप्ट जोड़ें
हम कुछ JavaScript कोड सिर्फ़ https://meet.google.com पर चलाना चाहते हैं, जो हम कॉन्टेंट स्क्रिप्ट का इस्तेमाल करके कर सकते हैं. आइए, अब Gemini से पूछें कि हमारे एक्सटेंशन की मदद से यह काम कैसे किया जा सकता है.
प्रॉम्प्ट:
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".
Gemini, हमें मेनिफ़ेस्ट.json फ़ाइल में किए जाने वाले बदलावों के अलावा, उस JavaScript के बारे में भी बताता है जो हमें अपनी 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"]
}
]
}
यह Chrome को बताता है कि जब भी हम सबडोमेन "content.js https://meet.google.com". आइए इस फ़ाइल को जोड़ें और इसकी जाँच करें कि क्या हम इसे जाँचेंगे?
यह कोड content.js फ़ाइल में जोड़ें.
console.log("Hello Gemini");
बिलकुल! meet.google.com पर जाने पर, हमें "नमस्ते Gemini" दिखता है पर क्लिक करें(Mac: Cmd + Opt + J / Win/Linux: Ctrl + Shift + J).
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("नमस्ते Gemini!");
बढ़िया! अब हम अपने ऐप्लिकेशन में JavaScript की कुछ खास सुविधाएं जोड़ सकते हैं. आइए, हम क्या हासिल करने की कोशिश कर रहे हैं, इस बारे में सोचें.
कॉन्टेंट स्क्रिप्ट में सुधार करना
जब हम मीटिंग पेज(जहां हमारे पास मीटिंग में शामिल होने का विकल्प होता है) पर किसी व्यक्ति के मीटिंग में शामिल होने पर सूचना पाना चाहते हैं. इसे ठीक करने के लिए, आइए देखते हैं कि मीटिंग खाली होने और किसी व्यक्ति के मीटिंग में शामिल होने पर, स्क्रीन कैसे बदलती है.
जब मीटिंग में कोई नहीं होता है, तो ऐसा दिखता है.
ये उन विज़ुअल को तब दिखाते हैं, जब मीटिंग में कुछ लोग शामिल होते हैं.
हमें परफ़ॉर्मेंस में दो अहम अंतर दिख सकते हैं:
- स्थिति टेक्स्ट "यहां कोई और नहीं है" से बदल जाता है "[उपयोगकर्ता] इस कॉल में हैं" के लिए.
- हम कॉल में शामिल हुए उपयोगकर्ताओं की इमेज देख सकते हैं.
ये दोनों बदलाव हमारे लिए तब काम करेंगे, जब हमें यह जानना हो कि कोई व्यक्ति मीटिंग में शामिल हुआ है या नहीं. हालांकि, इससे उन उपयोगकर्ताओं के बारे में जानकारी पाने की कुछ संभावना होती है जो पहले से शामिल हैं, इसलिए आइए इसका इस्तेमाल करने की कोशिश करते हैं.
"एलिमेंट इंस्पेक्टर" खोलें Chrome में हॉटकी ( Mac: Cmd + Opt + C / Win: Ctrl + Shift + C) का इस्तेमाल करें और फिर उस उपयोगकर्ता की इमेज पर क्लिक करें जो इसमें शामिल है.
हम देख सकते हैं कि एक इमेज, जिसमें क्लास वाली स्ट्रिंग कम हैं और इमेज के टाइटल एट्रिब्यूट में उस उपयोगकर्ता का नाम है जो मीटिंग में शामिल हुआ है. इसके अलावा, यह इमेज टैग U04fid क्लास वाले div में रैप किया गया है. जब हम अपनी टेस्ट मीटिंग में कुछ लोगों को शामिल कर लेते हैं, तो हम देख सकते हैं कि यह पैरंट डीव, अलग-अलग उपयोगकर्ताओं के हिसाब से कई इमेज होस्ट करता है.
इसलिए, हमने कुछ हद तक रणनीति बनाई है:
- पता लगाएं कि
U04fidक्लास वाले div में कोई एलिमेंट कब होता है. - अगर ऐसा है, तो इसका मतलब है कि हमारी मीटिंग में वे लोग शामिल हैं जिन्हें न्योता भेजा गया है.
- उपयोगकर्ता को सूचना दें.
चलिए, Gemini पर वापस जाते हैं और सिलसिलेवार तरीके से जानते हैं कि यह काम कैसे किया जा सकता है.
प्रॉम्प्ट:
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 शामिल नहीं है, बल्कि एक ऐसा समाधान है जो पैरंट 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 फ़ाइल में कॉपी करें और एक्सटेंशन को फिर से लोड करें. इसके बाद, मीटिंग वाले पेज को फिर से लोड करें.
अब जब कोई व्यक्ति हमारी मीटिंग में शामिल होगा, तो हमें कंसोल में लॉग स्टेटमेंट दिखेगा.
5. उपयोगकर्ता को सूचना भेजें
अब हम यह पता लगा सकते हैं कि मीटिंग में कोई व्यक्ति कब शामिल हुआ. इसलिए, अब हम अपने Chrome एक्सटेंशन में सूचना वाला हिस्सा जोड़ने की कोशिश करते हैं. हम Chrome एक्सटेंशन के दस्तावेज़ ब्राउज़ कर सकते हैं या प्रॉम्प्ट में बदलाव करके यह जान सकते हैं कि हमें क्या चाहिए. हालांकि, इसके लिए ज़रूरी है कि हम chrome.notifications.create एपीआई का इस्तेमाल करें और यह तरीका बैकग्राउंड सर्विस वर्कर से लिया जाए.
प्रॉम्प्ट:
Using the documentation for chrome notifications tell me how to use the chrome.notifications.create method.
यहां कुछ ऐसे चरण दिए गए हैं जिनकी खास जानकारी यहां दी गई है:
- मेनिफ़ेस्ट फ़ाइल में
notificationsकी अनुमति जोड़ें. - chrome.notifications.create पर कॉल करें
- कॉल किसी बैकग्राउंड स्क्रिप्ट में होना चाहिए.
manifest version 3 में किसी Chrome एक्सटेंशन में बैकग्राउंड स्क्रिप्ट जोड़ने के लिए, हमें अपनी manifest.json फ़ाइल में background.service_worker एलान की ज़रूरत होगी.
इसलिए, हम background.js नाम की फ़ाइल बनाते हैं और अपनी मेनिफ़ेस्ट.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");
अब एक्सटेंशन पेज से एक्सटेंशन को फिर से लोड करें और आपको तुरंत एक सूचना पॉप-अप दिखेगा.
6. अपने Chrome एक्सटेंशन में पास होने वाला मैसेज जोड़ें
अब, हमारे लिए ज़रूरी आखिरी चरण है, कॉन्टेंट स्क्रिप्ट की पहचान करने वाले किसी व्यक्ति की पहचान करना और बैकग्राउंड स्क्रिप्ट में sendNotification तरीका कनेक्ट करना. Chrome एक्सटेंशन के हिसाब से, message passing तकनीक के ज़रिए ऐसा किया जा सकता है.
यह Chrome एक्सटेंशन के अलग-अलग हिस्सों के बीच कम्यूनिकेशन को चालू करता है, हमारे मामले में कॉन्टेंट स्क्रिप्ट से लेकर बैकग्राउंड सर्विस वर्कर तक. आइए, अपने दोस्त Gemini से यह जानने का तरीक़ा जानते हैं.
प्रॉम्प्ट:
How to send a message from the content script to the background script in a chrome extension
Gemini काम के कॉल का जवाब देने के लिए, chrome.runtime.sendMessage और chrome.runtime.onMessage.addListener का जवाब देता है.
दरअसल, कॉन्टेंट स्क्रिप्ट से भेजे गए मैसेज पर प्रतिक्रिया देने के लिए, हम sendMessage का इस्तेमाल करके यह मैसेज भेजेंगे कि कोई व्यक्ति Meet कॉल में शामिल हुआ है. साथ ही, 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'). का इस्तेमाल करके, मीटिंग में हिस्सा लेने वाले व्यक्ति का नाम फ़ेच कर सकते हैं
सूचना आईडी के बारे में, हम कॉन्टेंट स्क्रिप्ट का टैब आईडी फ़ेच कर सकते हैं और उसका इस्तेमाल सूचना आईडी के तौर पर कर सकते हैं. sender.tab.id. का इस्तेमाल करके, इवेंट लिसनर chrome.runtime.onMessage.addListener में ऐसा किया जा सकता है
आखिर में, हमारी फ़ाइलें कुछ ऐसी दिखनी चाहिए:
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",
});
}
background.js
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"
});
}
7. बधाई हो
Gemini की मदद से, कुछ ही समय में हमने Chrome एक्सटेंशन बनाया. चाहे आप एक अनुभवी Chrome एक्सटेंशन डेवलपर हों या फिर आपको एक्सटेंशन की दुनिया में नई जान-पहचान न हो, Gemini हर काम में आपकी मदद कर सकता है.
मेरी सलाह है कि आप यह पूछें कि Chrome एक्सटेंशन की मदद से क्या-क्या किया जा सकता है. कई एपीआई ब्राउज़ किए जा सकते हैं. जैसे, chrome.storage, alarms वगैरह. अगर आपको कोई समस्या आ रही है, तो Gemini या दस्तावेज़ का इस्तेमाल करके समस्या के बारे में जानें या समस्या को हल करने के अलग-अलग तरीके इकट्ठा करें.
आम तौर पर, ज़रूरी मदद पाने के लिए प्रॉम्प्ट में बदलाव करना पड़ता है. हालांकि, हम एक टैब से ऐसा कर सकते हैं, जिसमें कॉन्टेंट से जुड़ी हमारी सभी जानकारी सेव रहती है.