Uzantı araç çubuğu simgesini tıklayarak geçerli sayfanın stilini basitleştirin.
Genel bakış
Bu eğitim, Chrome uzantısının ve Chrome Web Mağazası doküman sayfalarının stilini daha kolay okunacak şekilde basitleştiren bir uzantı oluşturmaktadır.
Bu kılavuzda, aşağıdakilerin nasıl yapılacağını açıklayacağız:
- Etkinlik koordinatörü olarak uzantı hizmeti çalışanını kullanın.
"activeTab"izniyle kullanıcı gizliliğini koruyun.- Kullanıcı, uzantı araç çubuğu simgesini tıkladığında kodu çalıştırın.
- Scripting API'sini kullanarak bir stil sayfası ekleyin ve kaldırın.
- Kodu yürütmek için klavye kısayolu kullanı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
Başlamak için uzantının dosyalarını barındıracak focus-mode adında yeni bir dizin oluşturun. 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": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"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 "Komut dosyalarını her sekmede çalıştırma" eğiticisine göz atın.
Bir images klasörü oluşturun, ardından simgeleri indirin.
2. Adım: Uzantıyı başlatın
Uzantılar, uzantının hizmet çalışanını kullanarak tarayıcı etkinliklerini arka planda izleyebilir. Service Worker'lar, etkinlikleri işleyen ve gerekli olmadığında sona eren özel JavaScript ortamlarıdır.
Hizmet çalışanını manifest.json dosyasına kaydederek başlayın:
{
...
"background": {
"service_worker": "background.js"
},
...
}
background.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Hizmet çalışanımızın dinleyeceği ilk etkinlik runtime.onInstalled() olur. Bu yöntem, uzantının bir başlangıç durumu belirlemesine veya yükleme sırasında bazı görevleri tamamlamasına olanak tanır. Uzantılar, uygulama durumunu depolamak için Storage API ve IndexedDB'yi kullanabilir. Ancak bu durumda, yalnızca iki durumu ele aldığımızdan uzantının "AÇIK" mı yoksa "KAPALI" mı olduğunu izlemek için işlem rozeti metnini kullanırız.
3. Adım: Uzantı işlemini etkinleştirin
Uzantı işlemi, uzantının araç çubuğu simgesini kontrol eder. Dolayısıyla, kullanıcı uzantı simgesini tıkladığında bir kod çalıştırır (bu örnekte olduğu gibi) veya bir pop-up görüntüler. manifest.json dosyasında uzantı işlemini bildirmek için aşağıdaki kodu ekleyin:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Kullanıcı gizliliğini korumak için ActiveTab iznini kullanın
activeTab izni, uzantıya etkin sekmede geçici kod yürütme yetkisi verir. Ayrıca, geçerli sekmenin hassas özelliklerine erişim sağlar.
Bu izin, kullanıcı uzantıyı çağırdığında etkinleştirilir. Bu durumda, kullanıcı, uzantı işlemini tıklayarak uzantıyı çağırır.
💡 Kendi uzantımda ActiveTab iznini etkinleştiren diğer kullanıcı etkileşimleri hangileri?
- Bir klavye kısayolu kombinasyonuna basma.
- İçerik menüsü öğesi seçme.
- Çok amaçlı adres çubuğundan gelen öneriler kabul ediliyor.
- Uzantı pop-up'ı açılıyor.
"activeTab" izni, kullanıcıların uzantıyı odaklanan sekmede kasıtlı olarak çalıştırmasını sağlar. Bu şekilde, kullanıcının gizliliğini korur. Bu özelliğin bir diğer avantajı da izin uyarısı tetiklememesidir.
"activeTab" iznini kullanmak için manifest dosyasının izin dizisine ekleyin:
{
...
"permissions": ["activeTab"],
...
}
4. Adım: Mevcut sekmenin durumunu izleyin
Kullanıcı, uzantı işlemini tıkladıktan sonra uzantı, URL'nin bir belge sayfasıyla eşleşip eşleşmediğini kontrol eder. Daha sonra, mevcut sekmenin durumunu kontrol eder ve bir sonraki durumu ayarlar. background.js içine aşağıdaki kodu ekleyin:
const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON'
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
5. Adım: Stil sayfasını ekleyin veya kaldırın
Şimdi sayfanın düzenini değiştirme zamanı geldi. focus-mode.css adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:
body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
display: none;
}
main > :last-child {
margin-top: min(10vmax, 10rem);
margin-bottom: min(10vmax, 10rem);
}
Stil sayfasını Scripting API'sini kullanarak ekleyin veya kaldırın. Manifest'te "scripting" iznini bildirerek başlayın:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Son olarak, background.js dilinde sayfanın düzenini değiştirmek için aşağıdaki kodu ekleyin:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 Kod eklemek için stil sayfası yerine Scripting API'yi kullanabilir miyim?
Evet. JavaScript yerleştirmek için scripting.executeScript() kullanabilirsiniz.
İsteğe bağlı: Klavye kısayolu atama
Yalnızca eğlence olsun diye bir kısayol ekleyerek odak modunu daha kolay etkinleştirip devre dışı bırakabilirsiniz. "commands" anahtarını manifest dosyasına ekleyin.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
"_execute_action" anahtarı, action.onClicked() etkinliğiyle aynı kodu çalıştırır. Bu nedenle ek kod gerekmez.
Çalışıp çalışmadığını test edin
Projenizin dosya yapısının aşağıdaki gibi olduğunu 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.
Uzantıyı bir doküman sayfasında test edin
İlk olarak aşağıdaki sayfalardan herhangi birini açın:
Ardından, uzantı işlemini tıklayın. Bir klavye kısayolu oluşturduysanız Ctrl + B veya Cmd + B tuşlarına basarak test edebilirsiniz.
Şuradan alınmalıdır:
Şu işleme:
🎯 Olası iyileştirmeler
Bugün öğrendiklerinizi temel alarak aşağıdakilerden herhangi birini yapmaya çalışın:
- CSS stil sayfasını iyileştirin.
- Farklı bir klavye kısayolu atayın.
- Favori blog veya doküman sitenizin düzenini değiştirin.
Kanalınızı geliştirin.
Tebrikler, bu eğitimi tamamladınız 🎉. Bu serideki diğer eğiticileri tamamlayarak becerilerinizi geliştirmeye devam edin:
| Uzantı | Öğrenecekleriniz |
|---|---|
| Okuma süresi | Öğeleri belirli bir sayfa grubuna otomatik olarak eklemek için. |
| Sekme Yöneticisi | Tarayıcı sekmelerini yöneten bir pop-up oluşturmak için |
Keşfetmeye devam edin
Bu Chrome uzantısını oluşturmaktan keyif aldığınızı ve uzantı geliştirme ile ilgili öğrenme yolculuğunuza devam etmek için sabırsızlandığınızı umuyoruz. Aşağıdaki öğrenme yollarını ö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.