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üzenleyebileceğiniz bir sekme yöneticisi oluşturur.

Bu kılavuzda, aşağıdakileri nasıl yapacağınız açıklanmaktadır:

Action API'yi kullanarak bir uzantı pop-up'ı oluşturun.
Sekmeler API'sini kullanarak belirli sekmeler için sorgulama yapı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.
Sekme gruplarını TabGroups API'si ile yeniden adlandırın.

Başlamadan önce

Bu kılavuzda, temel web geliştirme deneyiminiz olduğu varsayılır. Şu bölüme göz atmanızı öneririz: Uzantı geliştirme iş akışına giriş amaçlı bir Hello World sitesi.

Uzantıyı oluşturma

Başlamak için, uzantının dosyalarını barındırmak üzere tabs-manager adında yeni bir dizin oluşturun. Şu durumda: isterseniz kaynak kodun tamamını GitHub'da indirebilirsiniz.

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

manifest.json adında 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ğiticisine göz atın.

Bir images klasörü oluşturup 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şlemini tekrarlarsanız ya bir kod çalıştırır ya da bu örnekte olduğu gibi bir pop-up açılır. Başlangıç tarihi pop-up'ı manifest.json içinde beyan etme:

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

Pop-up, bir web sayfasına benzer ancak satır içi JavaScript ç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ına type="module" ekleyerek üst düzey bekleme süresini kullanabilirsiniz etiketine bakın.

Ardından, pop-up'ın stilini belirleyeceksiniz. 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 sekmelerde oluşturmasına, sorgulamasına, değiştirmesine ve yeniden düzenlemesine olanak tanır. emin olun.

İzin isteyin

Tabs API'deki birçok yöntem, herhangi bir izin istenmeden kullanılabilir. Ancak sekmelerin title ve URL bölümlerine ihtiyacımız var; bu hassas özellikler için izin gerekir. "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 sınırlı ana makine izinleri talep edeceğiz.

Dar ana makine izinleri, belirli sitelere yüksek düzeyli izin vererek kullanıcı gizliliğini korumamıza olanak tanır. Bu işlem, ek özelliklerin yanı sıra title ve URL özelliklerine 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?

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

"tabs" izni, bir uzantıya tüm sekmelerdeki hassas verileri okuma izni verir. 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örüntüler:

Sekme izni uyarısı iletişim kutusu

Ana makine izinleri, bir uzantının eşleşen bir 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ı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

Belirli URL'lerden sekmeleri, tabs.query() yöntemini kullanarak alabilirsiniz. Bir popup.js oluşturun dosyasını seçin ve şu 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 ve diğer uzantı sayfaları Chrome şeması. Örneğin: chrome-extension://EXTENSION_ID/popup.html.

Bir sekmeye odaklanma

İlk olarak, uzantı sekme adlarını (yer alan HTML sayfalarının başlıkları) alfabetik olarak sıralar. Böylece bir liste öğesi tıklandığında, tabs.update() kullanarak bu sekmeye odaklanın ve windows.update() ile pencereyi öne çıkarın. 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 ilgi çekici JavaScript

Sekme dizisini kullanıcının tercih ettiği dile göre sıralamak için kullanılan Collator.
Şablon etiketi her öğeyi oluşturmak için document.createElement() kullanmak yerine klonlanabilecek bir HTML öğesi tanımlayın.
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 yayılmış söz dizimi.

Sekmeleri gruplandırma

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

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js içinde, tabs.group() ve geçerli pencereye taşıyabilirsiniz.

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 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 görüntüler klasörü.

Uzantınızı yerel olarak yükleme

Paketlenmemiş bir uzantıyı geliştirici modunda yüklemek için Hello World bölümündeki adımları uygulayın.

Birkaç doküman sayfası açın

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

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

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

🎯 Olası geliştirmeler

Bugün öğrendiklerinizi temel alarak aşağıdakilerden birini uygulamaya çalışın:

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

Geliştirmeye devam edin.

Tebrikler! Bu eğitimi tamamladınız 🎉. Becerilerinizi geliştirmeye devam etmek için daha fazla bilgi edinin:

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

Keşfetmeye devam et

Bu Chrome uzantısını oluşturmaktan keyif aldığınızı ve Chrome'u kullanmaya devam etmekten keyif aldığınızı umuyoruz. öğrenme yolculuğunuzu anlatabilirsiniz. Aşağıdaki öğrenme rotasını öneririz:

Geliştirici kılavuzunda düzinelerce ek belge bağlantısı bulunmaktadır. gelişmiş uzantı oluşturma ile ilgili.
Uzantıların, açık web'de bulunanların ötesinde güçlü API'lere erişimi vardır. Chrome API'leri dokümanları her bir API'de adım adım açıklanmıştır.