Sekmeleri yönetme

İlk sekmeler yöneticinizi oluşturun.

Genel Bakış

Bu eğitimde, Chrome uzantınızın ve Chrome Web Mağazası dokümanı sekmelerinizi düzenlemek için bir sekme yöneticisi oluşturulur.

Sekme Yöneticisi uzantısı pop-up'ı
Tabs Manager uzantısı

Bu kılavuzda, aşağıdakilerin nasıl yapılacağını açıklayacağız:

  • Action API'yi kullanarak uzantı pop-upu oluşturun.
  • Tabs API'yi kullanarak belirli sekmeler için sorgu oluşturun.
  • Dar kapsamlı ana makine izinleriyle kullanıcı gizliliğini koruyun.
  • Sekmenin odağını değiştirin.
  • Sekmeleri aynı pencereye taşıyıp gruplandırın.
  • TabGroups API'yi kullanarak sekme gruplarını yeniden adlandırın.

Başlamadan önce

Bu rehberde, temel web geliştirme deneyimine sahip olduğunuz varsayılmaktadır. Uzantı geliştirme iş akışına giriş yapmak için Hello World'e göz atmanızı öneririz.

Uzantıyı oluşturma

Başlamak için uzantının dosyalarını barındıracak tabs-manager adlı yeni bir dizin oluşturun. İsterseniz tam kaynak kodunu GitHub'dan indirebilirsiniz.

1. adım: Uzantı verilerini ve simgelerini ekleyin

manifest.json adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Bu manifest anahtarları hakkında daha fazla bilgi edinmek için uzantının meta verilerini ve simgelerini daha ayrıntılı bir şekilde açıklayan Okuma Süresi eğitimine göz atın.

images klasörü oluşturun ve simgeleri bu klasöre indirin.

2. adım: Pop-up oluşturun ve stilini belirleyin

Action API, uzantı işlemini (araç çubuğu simgesi) kontrol eder. Kullanıcı, uzantı işlemine tıkladığında bazı kodlar çalıştırılır veya bu örnekte olduğu gibi bir pop-up açılır. manifest.json içinde pop-up'ı bildirerek başlayın:

{
  "action": {
    "default_popup": "popup.html"
  }
}

Pop-up'lar, bir istisna dışında web sayfalarına benzer: Satır içi JavaScript çalıştıramazlar. Bir popup.html dosyası oluşturup aşağıdaki kodu ekleyin:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

Ardından, pop-up'a stil vereceksiniz. Bir popup.css dosyası oluşturup aşağıdaki kodu ekleyin:

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

3. adım: Sekmeleri yönetin

Tabs API, bir uzantının tarayıcıdaki sekmeleri oluşturmasına, sorgulamasına, değiştirmesine ve yeniden düzenlemesine olanak tanır.

İzin isteğinde bulun

Tabs API'deki birçok yöntem, herhangi bir izin istenmeden kullanılabilir. Ancak sekmelerin title ve URL özelliklerine erişmemiz gerekiyor. Bu hassas özellikler için izin gerekir. "tabs" izni isteyebiliriz ancak bu, tüm sekmelerin hassas özelliklerine erişim izni verir. Yalnızca belirli bir sitenin sekmelerini yönettiğimiz için dar kapsamlı ana makine izinleri isteyeceğiz.

Dar kapsamlı ana makine izinleri, belirli sitelere daha yüksek izin vererek kullanıcı gizliliğini korumamıza olanak tanır. Bu işlemle title ve URL özelliklerinin yanı sıra ek özelliklere erişim izni verilir. Vurgulanan kodu manifest.json dosyasına ekleyin:

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 Sekmeler izni ile ana makine izinleri arasındaki temel farklar nelerdir?

Hem "tabs" izninin hem de ana makine izinlerinin dezavantajları vardır.

"tabs" izni, uzantıya tüm sekmelerdeki hassas verileri okuma olanağı tanır. Bu bilgiler zaman içinde kullanıcının tarama geçmişini toplamak için kullanılabilir. Bu nedenle, bu izni isterseniz Chrome, yükleme sırasında aşağıdaki uyarı mesajını gösterir:

Sekmeler izni uyarı iletişim kutusu

Ana makine izinleri, bir uzantının eşleşen bir sekmenin hassas özelliklerini okuyup sorgulamasına ve bu sekmelere komut dosyaları yerleştirmesine olanak tanır. Kullanıcılar, yükleme sırasında aşağıdaki uyarı mesajını görür:

Ana makine izni uyarı iletişim kutusu

Bu uyarılar kullanıcılar için endişe verici olabilir. Daha iyi bir ilk katılım deneyimi için isteğe bağlı izinleri uygulamanızı öneririz.

Sekmeleri sorgulama

tabs.query() yöntemini kullanarak belirli URL'lerdeki sekmeleri alabilirsiniz. popup.js dosyası oluşturup aşağıdaki kodu ekleyin:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Chrome API'lerini doğrudan pop-up'ta kullanabilir miyim?

Pop-up'lar ve diğer uzantı sayfaları, chrome şemasından sunuldukları için herhangi bir Chrome API'sini çağırabilir. Örneğin chrome-extension://EXTENSION_ID/popup.html.

Bir sekmeye odaklanma

Öncelikle uzantı, sekme adlarını (içerilen HTML sayfalarının başlıkları) alfabetik olarak sıralar. Ardından, bir liste öğesi tıklandığında tabs.update() kullanılarak ilgili sekmeye odaklanılır ve windows.update() kullanılarak pencere ön plana getirilir. popup.js dosyasına aşağıdaki kodu ekleyin:

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 Bu kodda kullanılan ilginç JavaScript

  • Sekmeler dizisini kullanıcının tercih ettiği dile göre sıralamak için kullanılan Collator.
  • Her öğeyi oluşturmak için document.createElement() kullanmak yerine, klonlanabilen bir HTML öğesini tanımlamak için kullanılan şablon etiketi.
  • URL'leri oluşturmak ve ayrıştırmak için kullanılan URL oluşturucu.
  • Öğe kümesini append() çağrısında bağımsız değişkenlere dönüştürmek için kullanılan yayma söz dizimi.

Sekmeleri gruplandırma

TabGroups API, uzantının grubu adlandırmasına ve arka plan rengi seçmesine olanak tanır. Vurgulanan kodu ekleyerek manifest dosyasına "tabGroups" iznini ekleyin:

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js içinde, tabs.group() kullanarak tüm sekmeleri gruplandıracak ve bunları geçerli pencereye taşıyacak bir düğme oluşturmak için aşağıdaki kodu ekleyin.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

Çalıştığını test etme

Projenizin dosya yapısının aşağıdaki dizin ağacıyla eşleştiğini doğrulayın:

Sekme yöneticisi klasörünün içeriği: manifest.json, popup.js, popup.css, popup.html ve images klasörü.

Uzantınızı yerel olarak yükleme

Paketlenmemiş bir uzantıyı geliştirici modunda yüklemek için Hello World'deki adımları uygulayın.

Birkaç doküman sayfasını açın.

Aşağıdaki dokümanları farklı pencerelerde açın:

Pop-up'ı tıklayın. Aşağıdaki gibi görünmelidir:

Sekme Yöneticisi uzantısı pop-up&#39;ı
Tabs Manager uzantısı pop-up'ı

"Sekmeleri gruplandır" düğmesini tıklayın. Aşağıdaki gibi görünmelidir:

Sekme Yöneticisi Gruplandırılmış sekmeler
Sekme Yöneticisi uzantısı kullanılarak gruplandırılmış sekmeler

🎯 Olası geliştirmeler

Bugün öğrendiklerinize dayanarak aşağıdakilerden herhangi birini uygulamayı deneyin:

  • Pop-up stil sayfasını özelleştirin.
  • Sekme grubunun rengini ve başlığını değiştirme
  • Başka bir doküman sitesinin sekmelerini yönetme
  • Gruplandırılmış sekmelerin gruplandırılmasını kaldırma desteği eklendi.

Gelişmeye devam edin.

Bu eğitimi tamamladığınız için tebrikler 🎉. Bu serideki diğer eğitimleri tamamlayarak becerilerinizi geliştirmeye devam edin:

Uzantı Öğrenecekleriniz
Okuma süresi Her sayfaya otomatik olarak bir öğe eklemek için.
Konsantrasyon Modu Uzantı işlemi tıklandıktan sonra geçerli sayfada kod çalıştırmak için.

Keşfetmeye devam edin

Bu Chrome uzantısını oluşturmaktan keyif aldığınızı ve Chrome geliştirme öğrenme yolculuğunuza devam etmek için heyecanlandığınızı umuyoruz. Aşağıdaki öğrenme rotasını öneririz: