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

Sekmeleri yönet

İlk sekme yöneticinizi oluşturun.

Genel bakış

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

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

Action API'yi kullanarak bir uzantı pop-up'ı oluşturun.
Tabs API'yi kullanarak belirli sekmeleri sorgulayın.
Dar ana makine izinleriyle kullanıcı gizliliğini koruyun.
Sekmenin odağını değiştirin.
Sekmeleri aynı pencereye taşıyın ve gruplandırın.
TabGroups API kullanarak sekme gruplarını yeniden adlandırın.

Başlamadan önce

Bu kılavuzda, temel web geliştirme deneyiminiz olduğu varsayılmaktadır. Uzantı geliştirme iş akışına giriş için Hello World sayfasına göz atmanızı öneririz.

Uzantıyı oluşturun

Uzantının dosyalarını barındıracak tabs-manager adında yeni bir dizin oluşturarak başlayın. Dilerseniz kaynak kodun tamamını 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 ayrıntılı olarak açıklayan Okuma süresi eğiticisine göz atın.

Bir images klasörü oluşturun, ardından simgeleri indirin.

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

İşlem API'si, uzantı işlemini (araç çubuğu simgesi) kontrol eder. Kullanıcı, uzantı işlemini tıkladığında bir kod çalıştırır veya bu örnekte olduğu gibi bir pop-up açar. manifest.json içindeki pop-up'ı bildirerek başlayın:

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

Pop-up, bir web sayfasına benzer. Ancak bu pop-up'lar satır içi JavaScript'i çalıştıramaz. Bir popup.html dosyası oluşturun ve 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>

İpucu: Komut dosyası etiketine type="module" ekleyerek üst düzey bekleme özelliğini kullanabilirsiniz.

Ardından, pop-up'ın stilini belirleyin. Bir popup.css dosyası oluşturun ve 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ıda sekmeleri oluşturmasına, sorgulamasına, değiştirmesine ve yeniden düzenlemesine olanak tanır.

İzin isteyin

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

Dar ana makine izinleri, belirli sitelere üst düzey izin vererek kullanıcı gizliliğini korumamıza olanak tanır. Bu işlem, title ve URL mülklerinin yanı sıra ek özelliklere erişim izni verir. Vurgulanan kodu manifest.json dosyasına ekleyin:

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

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

"tabs" ve ana makine izinlerinin dezavantajları vardır.

"tabs" izni, bir uzantının tüm sekmelerdeki hassas verileri okumasına olanak tanır. Bu bilgiler zaman içinde kullanıcıları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örüntüler:

Sekme izni uyarısı iletişim kutusu

Ana makine izinleri, bir uzantının eşleşen sekmenin hassas özelliklerini okuyup sorgulamasına ve bu sekmelere komut dosyası 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ısı iletişim kutusu

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

Sekmeleri sorgulama

tabs.query() yöntemini kullanarak sekmeleri belirli URL'lerden alabilirsiniz. Bir popup.js dosyası oluşturun ve 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?

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

Bir sekmeye odaklanma

Uzantı ilk olarak sekme adlarını (içerilen HTML sayfalarının başlıkları) alfabetik olarak sıralar. Daha sonra, bir liste öğesi tıklandığında tabs.update() kullanarak bu sekmeye odaklanır ve windows.update() kullanarak pencere öne 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 ilginç JavaScript kullanıldı

Sekme dizisini kullanıcının tercih ettiği dile göre sıralamak için kullanılan Collator
Her bir öğ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.
append() çağrısında öğe grubunu bağımsız değişkenlere dönüştürmek için kullanılan Spread sözdizimi.

Sekmeleri gruplandırın

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

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js ürününde, tabs.group() kullanan tüm sekmeleri gruplandırıp 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ışıp çalışmadığını test edin

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

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

Birkaç doküman sayfası aç

Şu dokümanları farklı pencerelerde açın:

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

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

🎯 Olası iyileştirmeler

Bugün öğrendiklerinizi temel alarak aşağıdakilerden herhangi birini uygulamayı deneyin:

Pop-up stil sayfasını özelleştirin.
Sekme grubunun rengini ve başlığını değiştirin.
Başka bir belgeleme sitesinin sekmelerini yönetin.
Gruplandırılmış sekmelerin gruplandırmasını iptal etmek için destek ekleyin.

Geliştirmeye devam edin!

Tebrikler, bu eğitimi tamamladınız 🎉. Bu serideki diğer eğiticileri tamamlayarak becerilerinizi geliştirmeye devam edin:

Uzantı	Öğrenecekleriniz
Okuma süresi	Bir öğeyi her sayfaya otomatik olarak eklemek için.
Konsantrasyon Modu	Uzantı işlemini tıkladı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'u geliştirmeyle ilgili öğrenme yolculuğunuza devam etmek için sabırsızlandığınızı umuyoruz. Aşağıdaki öğrenme rotasını izlemenizi öneririz:

Geliştirici kılavuzunda, gelişmiş uzantı oluşturmayla ilgili belgelere ait düzinelerce ek bağlantı bulunmaktadır.
Uzantıların, açık web'de bulunanların ötesinde güçlü API'lere erişimi vardır. Her API için Chrome API'leri dokümanlarında adım adım yol gösterilir.