İ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.
![Sekme Yöneticisi uzantı pop-up'ı](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=5&hl=tr)
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>
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:
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:
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:
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:
- Kullanıcı arayüzünü tasarlama
- Chrome Web Mağazası'nda keşif
- Uzantı geliştirmeye genel bakış
- Manifest dosya biçimi
- Chrome Web Mağazası'nda yayınla
Pop-up'ı tıklayın. Aşağıdaki gibi görünmelidir:
![Sekme Yöneticisi uzantı pop-up'ı](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=5&hl=tr)
"Sekmeleri gruplandır" düğmesini tıklayın. Aşağıdaki gibi görünmelidir:
![Sekme Yöneticisi Gruplandırılmış sekmeler](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=5&hl=tr)
🎯 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.