Uzantı araç çubuğu simgesini tıklayarak geçerli sayfanın stilini basitleştirin.
Genel Bakış
Bu eğitim, Chrome uzantısının stilini basitleştiren ve Chrome Web Mağazası doküman sayfaları.
Bu kılavuzda, aşağıdakileri nasıl yapacağınız açıklanmaktadır:
- Uzantı hizmeti çalışanını etkinlik koordinatörü olarak kullanın.
"activeTab"izni ile kullanıcı gizliliğini koruyabilirsiniz.- Kullanıcı, uzantı araç çubuğu simgesini tıkladığında kod çalıştırın.
- Komut Dosyası API'sını 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ı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ı içerecek focus-mode adında yeni bir dizin oluşturun. Şu durumda:
isterseniz kaynak kodun tamamını GitHub'dan 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": "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 "Run Komut dosyalarını her sekmede çalıştırma" konusuna bakın. uzantının meta verilerini ve simgelerini daha ayrıntılı açıklayan bir eğiticidir.
Bir images klasörü oluşturup simgeleri bu klasöre indirin.
2. Adım: Uzantıyı başlatın
Uzantılar, uzantının hizmetini kullanarak tarayıcı etkinliklerini arka planda izleyebilir çalışan ekleyin. Service Worker'lar, DMAIC ve PDCA gibi gerekli olmayan etkinlikler de sonlandırılır.
Hizmet çalışanını manifest.json dosyasına kaydederek başlayın:
{
...
"background": {
"service_worker": "background.js"
},
...
}
background.js adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Service Worker'ımızın ilk etkinliği şu şekildedir:
runtime.onInstalled(). Bu yöntem, uzantının bir başlangıç noktası ayarlamasına olanak tanır
veya yükleme sırasında bazı görevleri
tamamlamanıza yardımcı olur. Uzantılar, Storage API'yi ve
Uygulama durumunu depolamak için IndexedDB. Ancak bu örnekte yalnızca iki durumu ele aldığımızdan uzantının "AÇIK" olup olmadığını izlemek için işlemin rozet metnini kullanacağız. veya "KAPALI" olarak ayarlayın.
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 görürseniz bir kod çalıştırır (bu örnekte olduğu gibi) veya bir pop-up görüntüler. URL'yi
manifest.json dosyasında uzantı işlemini tanımlamak için aşağıdaki kodu kullanın:
{
...
"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
activeTab izni, uzantıya geçici kod yürütme izni verir
tıklayın. Ayrıca verilerin hassas özelliklerine
.
Bu izin, kullanıcı uzantıyı çağırdığında etkinleştirilir. Bu durumda, kullanıcı uzantı işlemini tıklayarak uzantınızı değiştirebilirsiniz.
💡 Kendi uzantımda ActiveTab izni bulunan diğer kullanıcı etkileşimleri nelerdir?
- Bir klavye kısayolu kombinasyonuna basma.
- İçerik menüsü öğesi seçme.
- Çok amaçlı adres çubuğundan bir öneriyi kabul etme.
- Bir uzantı pop-up'ı açılıyor.
"activeTab" izni, kullanıcıların kasıtlı olarak uzantıyı
odaklanmış sekme Böylece kullanıcının gizliliğini korur. Başka bir faydası da
izin uyarısı tetiklemek.
"activeTab" iznini kullanmak için manifestin izin dizisine ekleyin:
{
...
"permissions": ["activeTab"],
...
}
4. Adım: Mevcut sekmenin durumunu izleyin
Kullanıcı uzantı işlemini tıkladıktan sonra uzantı, URL'nin
belgeler sayfasını ziyaret edin. Ardından, mevcut sekmenin durumunu kontrol eder ve bir sonraki durumu ayarlar. URL'yi
background.js adresine şu 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 sıra sayfanın düzenini değiştirmeye geldi. focus-mode.css adında bir dosya oluşturun ve
şu kodu kullanabilirsiniz:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Komut Dosyası API'sını kullanarak stil sayfasını ekleyin veya kaldırın. Başlangıç tarihi
manifestte "scripting" iznini beyan etmek:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Son olarak, sayfa düzenini değiştirmek için background.js içine 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 eklemek için scripting.executeScript() kullanabilirsiniz.
İsteğe bağlı: Klavye kısayolu atayın
Sadece eğlence amaçlı olarak, odak modunu etkinleştirmeyi veya devre dışı bırakmayı kolaylaştıracak bir kısayol ekleyin. URL'yi
Manifest dosyasının "commands" anahtarını 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
kodunu girmeniz gerekir.
Çalışıp çalışmadığını test etme
Projenizin dosya yapısının şu şekilde 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 Hello World bölümündeki adımları uygulayın.
Uzantıyı bir dokümanlar sayfasında test etme
İlk olarak aşağıdaki sayfalardan birini açın:
Ardından uzantı işlemini tıklayın. Klavye kısayolu oluşturduysanız Ctrl + B veya Cmd + B tuşuna basarak bu kısayolu test edebilirsiniz.
URL şu şekilde görünmelidir:
Buna:
🎯 Olası geliştirmeler
Bugün öğrendiklerinizi temel alarak aşağıdakilerden birini yapmaya çalışın:
- CSS stil sayfasını iyileştirin.
- Farklı bir klavye kısayolu atayın.
- Favori blogunuzun veya doküman sitenizin düzenini değiştirin.
Kanalınızı geliştirin.
Tebrikler! Bu eğitimi tamamladınız 🎉. Diğer görevleri tamamlayarak becerilerinizi geliştirmeye devam edin daha fazla bilgi edinin:
| Uzantı | Öğrenecekleriniz |
|---|---|
| Okuma süresi | Belirli bir sayfa grubuna otomatik olarak öğe eklemek için kullanılır. |
| 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 keyif aldığınızı ve uzantınızı kullanmaya devam etmekten keyif aldığınızı umuyoruz öğrenme yolculuğunuzu anlatabilirsiniz. Aşağıdaki öğrenme rotaları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.