Sayfaya yeni bir öğe ekleyen ilk uzantınızı oluşturun.
Genel bakış
Bu eğitim, beklenen okuma süresini herhangi bir Chrome uzantısına ve Chrome Web Mağazası doküman sayfasına ekleyen bir uzantı oluşturur.
Bu kılavuzda, aşağıdaki kavramları açıklayacağız:
- Uzantı manifesti.
- Uzantının kullandığı simge boyutları.
- İçerik komut dosyaları kullanılarak sayfalara nasıl kod yerleştirilir?
- Eşleşme kalıpları nasıl kullanılır?
- Uzantı izinleri.
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 Merhaba dünya eğiticisine göz atmanızı öneririz.
Uzantıyı oluşturun
Uzantının dosyalarını barındıracak reading-time adında yeni bir dizin oluşturarak başlayın. Dilerseniz kaynak kodun tamamını GitHub'dan indirebilirsiniz.
1. Adım: Uzantıyla ilgili bilgileri ekleyin
Manifest JSON dosyası, gereken tek dosyadır. Uzantıyla ilgili önemli
bilgileri içerir. Projenin kök dizininde bir manifest.json dosyası oluşturun ve aşağıdaki kodu ekleyin:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Bu anahtarlar, uzantı için temel meta verileri içerir. Uzantının, uzantılar sayfasında ve yayınlandığında Chrome Web Mağazası'nda nasıl görüneceğini kontrol ederler. Daha ayrıntılı bilgi edinmek için Manifest genel bakış sayfasındaki "name", "version" ve "description" tuşlarına göz atın.
💡 Uzantı manifestiyle ilgili diğer bilgiler
- Bu dosya, projenin kök dizininde bulunmalıdır.
- Yalnızca
"manifest_version","name"ve"version"anahtarları gerekir. - Geliştirme sırasında yorumları (
//) destekler, ancak kodunuzu Chrome Web Mağazası'na yüklemeden önce bunların kaldırılması gerekir.
2. Adım: Simgeleri sağlayın
Peki, simgelere neden ihtiyacınız var? Simgeler geliştirme sırasında isteğe bağlı olsa da, uzantınızı Chrome Web Mağazası'nda dağıtmayı planlıyorsanız gereklidir. Uzantı Yönetimi sayfası gibi başka yerlerde de görünürler.
Bir images klasörü oluşturun ve simgeleri bu klasöre yerleştirin. Simgeleri GitHub'dan indirebilirsiniz. Daha sonra, simgeleri bildirmek için vurgulanan kodu manifest dosyanıza ekleyin:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
PNG dosyaları kullanmanızı öneririz ancak SVG dosyaları dışındaki diğer dosya biçimlerine izin verilir.
💡 Farklı boyutlardaki bu simgeler nerede gösteriliyor?
| Simge boyutu | Simge kullanımı |
|---|---|
| 16x16 | Uzantının sayfalarındaki ve içerik menüsündeki site simgesi. |
| 32x32 | Windows bilgisayarlar genellikle bu boyutu gerektirir. |
| 48x48 | Uzantılar sayfasında görüntülenir. |
| 128x128 | Yükleme sırasında ve Chrome Web Mağazası'nda görüntülenir. |
3. Adım: İçerik komut dosyasını tanımlayın
Uzantılar, sayfanın içeriğini okuyan ve değiştiren komut dosyaları çalıştırabilir. Bunlara içerik komut dosyaları denir. Yalın bir dünyada yaşarlar. Diğer bir deyişle, ana makine sayfaları veya diğer uzantıların içerik komut dosyalarıyla çakışmadan JavaScript ortamlarında değişiklik yapabilirler.
content.js adlı içerik komut dosyasını kaydetmek için manifest.json öğesine aşağıdaki kodu ekleyin.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
"matches" alanında bir veya daha fazla eşleşme kalıbı olabilir. Bunlar, tarayıcının içerik komut dosyalarını hangi sitelere yerleştireceğini belirlemesini sağlar. Eşleşme kalıpları üç bölümden oluşur:
<scheme>://<host><path>. "*" karakterlerini içerebilir.
💡 Bu uzantı izin uyarısı gösteriyor mu?
Kullanıcı bir uzantı yüklediğinde, tarayıcı bu uzantıyı onlara uzantının ne yapabileceğini bildirir. İçerik komut dosyaları, eşleşme kalıbı ölçütlerini karşılayan sitelerde çalıştırılma izni ister.
Bu örnekte, kullanıcı aşağıdaki izin uyarısını görür:
Uzantı izinleri hakkında daha ayrıntılı bilgi için İzinleri beyan ve kullanıcıları uyar başlıklı makaleye bakın.
4. Adım: Okuma süresini hesaplayın ve ekleyin
İçerik komut dosyaları, bir sayfanın içeriğini okumak ve değiştirmek için standart Belge Nesne Modeli'ni (DOM) kullanabilir. Uzantı öncelikle sayfanın <article> öğesini içerip içermediğini kontrol eder.
Ardından, bu öğedeki tüm kelimeleri sayarak toplam okuma süresini gösteren bir paragraf oluşturur.
scripts adlı klasörde content.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 Bu kodda ilginç JavaScript kullanıldı
- Yalnızca
<article>öğesi içindeki kelimeleri saymak için kullanılan normal ifadeler. - Okuma süresi düğümünü öğeden sonra eklemek için
insertAdjacentElement()kullanılır. - Öğe sınıfı özelliğine CSS sınıf adları eklemek için kullanılan classList özelliği.
- Tanımsız veya boş olabilecek bir nesne özelliğine erişmek için kullanılan isteğe bağlı zincirleme.
<date>null veya tanımsızsa Null birleştirme,<heading>değerini döndürür.
Ç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
Paketlenmemiş bir uzantıyı geliştirici modunda yüklemek için Geliştirmeyle İlgili Temel Bilgiler bölümündeki adımları uygulayın.
Bir uzantıyı veya Chrome Web Mağazası dokümanlarını açma
Her makalenin ne kadar sürede okunacağını görmek için açabileceğiniz birkaç sayfayı burada bulabilirsiniz.
Aşağıdaki gibi görünmelidir:
🎯 Olası iyileştirmeler
Bugün öğrendiklerinizi temel alarak aşağıdakilerden herhangi birini uygulamayı deneyin:
- Diğer Chrome geliştirici sayfalarını (ör. Chrome Geliştirici Araçları veya Çalışma Kutusu) desteklemek için manifest.json dosyasında başka bir eşleşme kalıbı ekleyin.
- Favori blog veya belge sitelerinizden herhangi birinin okuma süresini hesaplayan yeni bir içerik komut dosyası ekleyin.
Geliştirmeye devam et
Tebrikler, bu eğitimi tamamladınız 🎉. Bu serideki diğer eğiticileri tamamlayarak becerilerinizi geliştirmeye devam edin:
| Uzantı | Öğrenecekleriniz |
|---|---|
| Konsantrasyon Modu | Uzantı işlemini tıkladıktan sonra geçerli sayfada kod çalıştırmak 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 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.