Uzantı araç çubuğu simgesini tıklayarak geçerli sayfanın stilini basitleştirin.
Genel Bakış
Bu eğitimde, Chrome uzantısının ve Chrome Web Mağazası doküman sayfalarının stilini basitleştirerek daha kolay okunmasını sağlayan bir uzantı oluşturulur.
Bu kılavuzda aşağıdakilerin nasıl yapılacağı açıklanmaktadır:
- Etkinlik koordinatörü olarak uzantı hizmet işçisini 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'yi kullanarak stil sayfası ekleyin ve kaldırın.
- Kod yürütmek için klavye kısayolu kullanın.
Başlamadan önce
Bu kılavuzda, temel düzeyde web geliştirme deneyiminiz olduğu varsayılmaktadır. Uzantı geliştirme iş akışına giriş için Merhaba Dünya başlıklı makaleyi incelemenizi öneririz.
Uzantıyı derleme
Başlamak için uzantının dosyalarını barındıracak focus-mode adlı yeni bir dizin oluşturun. Dilerseniz kaynak kodunun tamamını GitHub'dan indirebilirsiniz.
1. adım: Uzatma 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 metadata ve simgelerini daha ayrıntılı olarak açıklayan "Her sekmede komut dosyası çalıştırma" eğitim videosuna göz atın.
images klasörü oluşturun ve simgeleri bu klasöre indirin.
2. Adım: Uzantıyı başlatın
Uzantılar, uzantının hizmet işleyicisini kullanarak arka planda tarayıcı etkinliklerini izleyebilir. Hizmet çalışanları, etkinlikleri işleyen ve ihtiyaç duyulmadığında sonlandırılan ö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 işleyicimizin dinleyeceği ilk etkinlik runtime.onInstalled(). Bu yöntem, uzantının ilk durumu ayarlamasına 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'i kullanabilir. Ancak bu durumda, yalnızca iki durumla ilgilendiğimiz için uzantının "AÇIK" veya "KAPALI" olup olmadığını izlemek üzere işlemin rozetini kullanacağız.
3. Adım: Uzantı işlemini etkinleştirin
Uzantı işlemi, uzantının araç çubuğu simgesini kontrol eder. Bu nedenle, kullanıcı uzantı simgesini her tıkladığında ya bir kod çalıştırılır (bu örnekte olduğu gibi) ya da pop-up gösterilir. manifest.json dosyasında uzantı işlemini beyan etmek 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 kullanma
activeTab izni, uzantıya etkin sekmede kod yürütme geçici yetkisi verir. Ayrıca, geçerli sekmenin hassas özelliklerine erişime de izin verir.
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 nelerdir?
- Klavye kısayolu kombinasyonuna basılması.
- İçerik menüsü öğesi seçme.
- Her şey bir arada kutusundaki bir öneriyi kabul etme.
- Uzatma pop-up'ını açma.
"activeTab" izni, kullanıcıların uzantıyı odaklanan sekmede çalıştırmayı kasıtlı olarak seçmesine olanak tanır. Bu sayede kullanıcının gizliliği korunur. Bir diğer avantajı da izin uyarısı tetiklememesidir.
"activeTab" iznini kullanmak için manifest'in izin dizisine ekleyin:
{
...
"permissions": ["activeTab"],
...
}
4. Adım: Mevcut sekmenin durumunu takip edin
Kullanıcı uzantı işlemini tıkladıktan sonra uzantı, URL'nin bir doküman sayfasıyla eşleşip eşleşmediğini kontrol eder. Ardından, mevcut sekmenin durumunu kontrol eder ve sonraki durumu ayarlar. Aşağıdaki kodu background.js dosyasına 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
Artık sayfanın düzenini değiştirme zamanı. focus-mode.css adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Scripting API'yi kullanarak stil sayfasını ekleyin veya kaldırın. Manifest dosyasında "scripting" iznini beyan ederek başlayın:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Son olarak, sayfanın düzenini değiştirmek için background.js bölümüne 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 },
});
}
}
});
💡 Stiller sayfası yerine kod eklemek için Scripting API'yi kullanabilir miyim?
Evet. JavaScript eklemek için scripting.executeScript() kullanabilirsiniz.
İsteğe bağlı: Klavye kısayolu atama
Konsantrasyon modunu etkinleştirmeyi veya devre dışı bırakmayı kolaylaştırmak için eğlenceli bir kısayol ekleyin. "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.
İşlevini test edin
Projenizin dosya yapısının aşağıdaki gibi göründüğünü doğrulayın:
Uzantınızı yerel olarak yükleme
Paketlenmemiş bir uzantıyı geliştirici modunda yüklemek için Merhaba Dünya bölümündeki adımları uygulayın.
Uzantı testini doküman sayfasında yapma
Öncelikle aşağıdaki sayfalardan birini açın:
Ardından uzantı işlemini tıklayın. Klavye kısayolu oluşturursanız Ctrl + B veya Cmd + B tuşuna basarak kısayolu test edebilirsiniz.
Şu şekilde görünmelidir:
Şuna:
🎯 Olası geliştirmeler
Bugün öğrendiklerinizi kullanarak aşağıdakilerden birini yapmayı deneyin:
- CSS stil sayfasını iyileştirin.
- Farklı bir klavye kısayolu atayın.
- Favori blogunuzun veya doküman sitenizin düzenini değiştirebilirsiniz.
Kanalınızı geliştirin.
Bu eğitim serisini tamamladığınız için tebrikler 🎉. Bu serideki diğer eğitimleri tamamlayarak becerilerinizi geliştirmeye devam edin:
| Uzantı | Öğrenecekleriniz |
|---|---|
| Okuma süresi | Belirli bir sayfa grubuna otomatik olarak öğe eklemek için. |
| Sekme Yöneticisi | Tarayıcı sekmelerini yöneten bir pop-up oluşturmak için. |
Keşfetmeye devam et
Bu Chrome uzantısını oluşturmaktan memnun kaldığınızı umuyoruz. Uzantı geliştirmeyle ilgili öğrenme yolculuğunuza devam etmeyi heyecanla bekliyoruz. Aşağıdaki öğrenme yollarını öneririz:
- Geliştirici kılavuzunda, gelişmiş uzantı oluşturmayla ilgili dokümanlara ait düzinelerce ek bağlantı bulunur.
- Uzantılar, açık web'de bulunanların ötesinde güçlü API'lere erişebilir. Chrome API'leri dokümanlarında her API'nin işleyişine dair bilgiler verilmektedir.