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