Bu sayfa, Cloud Translation API ile çevrilmiştir.

Codelab: Gemini'ı kullanarak JavaScript'te bir Chrome Uzantısı oluşturma

1. Giriş

Bir Meet görüşmesine katılıyorsunuz ancak katılan ilk kişi olmak istemiyor musunuz? Bu bilgiler sizin için geçerliyse size uygun bir çözümümüz var!

Bu codelab'den yararlanarak, görüşmeye ilk katılımcı katıldığında sizi uyaracak bir Chrome uzantısı oluşturacaksınız.

Bir Chrome uzantısının farklı öğelerini öğrenecek ve ardından uzantının her bir bölümünü derinlemesine inceleyeceksiniz. İçerik komut dosyaları, hizmet çalışanları ve mesaj iletme gibi uzantı işlevleri hakkında bilgi edineceksiniz.

Bir katılımcı Meet görüşmesine her katıldığında bildirim alabilmek için manifest v3 sürümüne uymanız gerekir.

2. Başlamadan önce

Ön koşullar

Bu codelab yeni başlayanlar için uygun olsa da temel JavaScript bilgisine sahip olmak, deneyiminizi büyük ölçüde iyileştirebilir.

Kurulum/Gereksinimler

Chrome tarayıcı
Yerel sisteminizde bir IDE/Düzenleyici kurulumu.
gcloud'u kullanarak Gemini API'yi etkinleştirmek istiyorsanız gcloud cli dosyasını yükleyin.

Gemini API'yi etkinleştirme

Google Cloud Console'daki proje seçici sayfasında bir Google Cloud projesi seçin veya oluşturun.
Cloud projeniz için faturalandırmanın etkinleştirildiğinden emin olun. Bir projede faturalandırmanın etkin olup olmadığını nasıl kontrol edeceğinizi öğrenin.
API'yi etkinleştirmek için Gemini Marketplace sayfasına gidin. API'yi etkinleştirmek için gcloud'u da kullanabilirsiniz: gcloud services enable cloudaicompanion.googleapis.com --project PROJECT_ID
Yeni bir sekmede Cloud Console için Gemini sayfasını ziyaret edip "Sohbet etmeye başla"yı tıklayın.

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. Eğlence başlasın

Temel Uzantı Yükleme

Projemizin kökü olarak kullanacağımız bir dizin oluşturalım.

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

Gemini'a belirli sorular sormaya başlamadan önce, Chrome uzantısının genel yapısı hakkında bazı sorular soralım.

İstem:

What are the important parts to build a chrome extension?

manifest dosyası, background script ve kullanıcı arayüzü ile ilgili küçük ayrıntıların belirtildiği bir yanıt aldık. Şimdi bu dosyaları daha ayrıntılı inceleyelim.

İstem:

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

Yazar alanında istediğiniz adı ve e-posta adresinizi kullanabilirsiniz.

Gemini, ihtiyacımız olan manifest dosyasının içeriğini döndürüyor. Ancak action alanı gibi, ihtiyacımız olmayan bazı ek alanlar da alıyoruz. Açıklama da gerekiyor. Gelin bu sorunu çözelim.

İstem:

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

Bu içeriği projenizin kök dizininde bulunan manifest.json dosyasına yerleştirelim.

Manifest dosyası bu aşamada aşağıdakine benzer bir görünümde olacaktır.

{
    "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>"
}

Bu codelab'de manifest dosyanızdaki alanlar varsayıldığından, manifest dosyanızda oluşturulan diğer tüm ek alanları şimdilik kaldırın.

Peki, uzantının çalışıp çalışmadığını nasıl test edeceğiz? Arkadaşımız Gemini'a soralım.

İstem:

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

Nasıl test edeceğime ilişkin bazı adımlar sunuyor. chrome://extensions seçeneğine giderek "Extensions Page" öğesine gidelim ve "Developer Mode" düğmesini etkinleştirdiğimizden emin olalım. Bu düğme, uzantı dosyalarını yerel olarak içeren klasöre gitmek için kullanabileceğimiz "Load unpacked" düğmesini gösterir. Bunu yaptıktan sonra uzantıyı "Extensions Page" içinde görebileceğiz.

Çok güzel! Uzantımızı görebiliyoruz, ancak bazı işlevler eklemeye başlayalım.

4. İçerik komut dosyası ekleyin

İçerik komut dosyalarını kullanarak yapabildiğimiz bazı JavaScript kodlarını yalnızca https://meet.google.com üzerinde çalıştırmak istiyoruz. Gemini'a bunu uzantımızda nasıl sağlayabileceğimizi soralım.

İstem:

How to add a content script in our chrome extension?

Ya da daha ayrıntılı olarak belirtmek gerekirse:

İstem:

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

Alternatif olarak:

İstem:

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, yapmamız gereken değişiklikleri manifest.json dosyamızda ve content.js dosyamızda ihtiyacımız olan JavaScript'i sağlıyor.

content_scripts eklendiğinde manifest dosyamız şu hale gelir:

{
    "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"]
        }
    ]
}

Bu komut, Chrome'a "content.js" alt alan adındaki bir sayfaya gittiğimizde içerik komut dosyasını yerleştirmesini söyler. https://meet.google.com") ekleyin. Bu dosyayı ekleyip test edelim mi?

Bu kodu content.js dosyasına ekleyelim.

console.log("Hello Gemini");

Tabii ki. meet.google.com adresine gittiğimizde "Hello Gemini" JavaScript konsolunda(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("Merhaba Gemini!");

Çok güzel! Artık uygulamamıza JavaScript'e özgü bazı işlevler ekleyebileceğimiz bir konumdayız. Şimdi ne başarmaya çalıştığımızı bir düşünün.

İçerik senaryosunu iyileştirme

Toplantı sayfasındayken bir kullanıcı toplantıya katıldığında bildirim alabilmek istiyoruz(Toplantıya katılma seçeneği sunduğumuz yerlerde). Bu amaç doğrultusunda, toplantı boşken ve birisi toplantıya katıldığında ekranın görsel olarak nasıl değiştiğini gözlemleyelim.

Toplantıda kimse yokken bu şekilde görünür.

Bunlar, toplantıda bazı katılımcılar olduğunda gösterilen görsellerdir.

2 temel farkı hemen görebiliriz:

"Burada başka kimse yok" durumundaki durum metni değişir. "[Kullanıcı] bu görüşmede" olarak değişir.
Görüşmeye katılan kullanıcıların resimlerini görebiliriz.

Kimsenin toplantıya katılıp katılmadığını öğrenmek istersek, bu değişikliklerin her ikisi de işimize yarayacaktır. Ancak, son toplantının, daha önce katılan kullanıcılar hakkında bilgi edinmek için bazı olasılıkları vardır. Biz de bunu kullanmaya çalışalım.

"Öğe İnceleyici"yi açın Chrome'da kısayol tuşuyla ( Mac: Cmd + Opt + C / Win: Ctrl + Shift + C) tıklayın, ardından katılan kullanıcının resmini tıklayın.

Birkaç sınıf dizesi içeren bir resim olduğunu ve resmin başlık özelliğinin toplantıya katılan kullanıcının adını içerdiğini fark ettik. Ayrıca, bu resim etiketi U04fid sınıfını içeren bir div içine yerleştirilmiş. Test toplantımıza katılanlar eklediğimizde bu üst div'in birden çok resim barındırdığını(farklı kullanıcılara karşılık gelen) görebiliriz.

Dolayısıyla, aklımızda kısmi bir stratejimiz var:

U04fid sınıfına sahip div öğesi herhangi bir öğe içerdiğinde bunu algılar.
Çıkıyorsa toplantımıza katılanlar var demektir.
Kullanıcıyı bilgilendirin.

Şimdi Gemini'a geri dönelim ve bu işlemi adım adım nasıl başarabileceğimizi soralım.

İstem:

How to detect for element changes in the HTML page?

Bize MutationObserver ile ilgili bir çözüm sunuyor ancak şartlarımıza özel bir şey değil. İstemi değiştirmeyi deneyelim.

İstem:

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

Bu kez, MutationObserver öğesini içermeyen, ancak üst div öğesini kullanarak katılanları kontrol eden bir çözüm elde ediyoruz.

Şu bilgileri aldık:

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

Yaklaşımımızı daha da fazla değiştirmeye çalışalım:

İstem:

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.

Aşağıdaki kod snippet'iyle döndürülür:

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
});

Bu kodu content.js dosyasına kopyalayın, uzantıyı yeniden yükleyin(ardından toplantı sayfasını yeniden yükleyin).

Artık biri toplantımıza katıldığında günlük bildirimini konsolda görebiliyoruz.

5. Kullanıcıya bildirim gönderme

Artık bir katılımcının toplantıya ne zaman katıldığını algılayabildiğimize göre, bildirim bölümünü Chrome uzantımıza eklemeyi deneyelim. Chrome uzantısının dokümanlarına göz atabilir, hatta ne aradığımızı anlamak için istemlerde ince ayar yapabiliriz, ancak aslında chrome.notifications.create API'yi kullanmamız gerekiyor ve bu yönteme yapılan çağrı bir arka plan hizmet çalışanından gelmelidir.

İstem:

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

Başlıca öne çıkan noktaların şunlardır:

Manifest dosyasına notifications iznini ekleyin.
chrome.notifications.create çağrısı yapın
Görüşme arka plan komut dosyasında olmalıdır.

manifest version 3 ürününde bir Chrome uzantısına arka plan komut dosyası eklemek için manifest.json dosyamızdaki background.service_worker bildirimine ihtiyacımız vardır.

Sonra, background.js adında bir dosya oluşturur ve aşağıdakini manifest.json dosyamıza ekleriz.

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

Yukarıdaki eklemelerle birlikte manifest dosyamız şu hale gelir:

{
    "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"
    ]
}

İstem:

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

Bu resmi, klasörünüzün kök dizinine kaydedin ve success.png olarak yeniden adlandırın.

Ardından, aşağıdaki kod snippet'ini background.js sayfanıza ekleyin.

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");

Şimdi, uzantılar sayfasından uzantıyı yeniden yüklediğinizde hemen bir bildirim pop-up'ı göreceksiniz.

6. Chrome uzantınıza iletilen mesajı ekleyin

Şimdi, yapmamız gereken son önemli adım, içerik komut dosyasının bir katılımcıyı algılaması ile arka plan komut dosyasında sendNotification yöntemi arasında bağlantı kurmak. Chrome uzantıları söz konusu olduğunda bunu message passing adlı bir teknik kullanarak yapabilirsiniz.

Bu, bizim örneğimizde içerik komut dosyasından arka plan hizmet çalışanına kadar, bir Chrome uzantısının farklı bölümleri arasındaki iletişimi sağlar. Arkadaşımıza Gemini'a bunu nasıl başaracağını soralım.

İstem:

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

Gemini, chrome.runtime.sendMessage ve chrome.runtime.onMessage.addListener kullanıcılarına alakalı çağrılarla yanıt verir.

Esas olarak, içerik komut dosyasından bir kullanıcının Meet görüşmesine katıldığını belirten bir mesaj göndermek için sendMessage ve içerik komut dosyası tarafından gönderilen mesaja tepki vermek için etkinlik işleyici olarak onMessage.addListener kullanılır. Bu durumda, bu etkinlik işleyiciden sendNotification yöntemine yapılan çağrıyı tetikleriz.

Bildirim mesajını ve bir action özelliği, arka plan hizmet çalışanına iletilecek. action özelliği, arka plan komut dosyasının neye yanıt verdiğini açıklar.

content.js kodumuz şu şekilde:

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"
    });
}

Bu da background.js kodumuz:

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"
    });
}

Bildirim mesajını özelleştirmeyi deneyip benzersiz bir bildirim kimliği elde edelim. Bildirim mesajında kullanıcının adını da ekleyebiliriz. Önceki bir adımdan hatırladığımızda kullanıcının adını resmin başlık özelliğinde görebiliriz. Bu şekilde, document.querySelector('div.U04fid > img').getAttribute('title'). kullanarak katılımcının adını getirebiliriz.

Bildirim kimliğiyle ilgili olarak, içerik komut dosyasının sekme kimliğini getirip bildirim kimliği olarak kullanabiliriz. Bunu, etkinlik dinleyicimizde (chrome.runtime.onMessage.addListener) sender.tab.id. kullanarak yapabilirsiniz.

Son olarak, dosyalarımız aşağıdaki gibi görünmelidir:

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. Tebrikler

Kısa süre içinde Gemini'ın yardımıyla bir Chrome uzantısı oluşturabildik. Deneyimli bir Chrome uzantı geliştiricisi veya uzantı dünyasına yeni adım atan bir kullanıcı olmanız fark etmez. Gemini, başarmak istediğiniz her konuda size yardımcı olabilir.

Bir Chrome uzantısıyla yapabileceğiniz farklı şeyleri sormanızı öneririm. chrome.storage, alarms gibi göz atmaya değer pek çok API vardır. Sıkıştığınız her yerde, neyi yanlış yaptığınızı öğrenmek veya sorunu çözmek için farklı yollar toplamak amacıyla Gemini'ı veya dokümanları kullanın.

Gereken yardımı almak için genellikle istemin değiştirilmesi gerekir ancak bunu, bağlamsal yolculuğumuzun ait olduğu tek bir sekmeden yapabiliriz.