Sayfaya yeni bir öğe ekleyen ilk uzantınızı oluşturun.
Genel Bakış
Bu eğitim, herhangi bir Chrome uzantısına beklenen okuma süresini ekleyen ve Chrome Web Mağazası dokümanlar sayfası.
![Uzantının Karşılama sayfasında okuma süresi uzantısı](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-extension-the-e-0070620f12665.png?authuser=19&hl=tr)
Bu kılavuzda aşağıdaki kavramları açıklayacağız:
- Uzantı manifesti.
- Uzantının kullandığı simge boyutları.
- İçerik komut dosyaları kullanarak sayfalara kod yerleştirme.
- 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ılır. Şu bölüme göz atmanızı öneririz: Uzantı geliştirme iş akışına giriş niteliğindeki Merhaba dünya eğitici içeriği.
Uzantıyı oluşturma
Başlamak için, uzantının dosyalarını barındırmak üzere reading-time
adında yeni bir dizin oluşturun. Şu durumda:
isterseniz kaynak kodun tamamını GitHub'dan indirebilirsiniz.
1. Adım: Uzantıyla ilgili bilgi ekleyin
Manifest JSON dosyası, gerekli tek dosyadır. E-posta, YouTube'da
uzantısına sahip olur. Projenin kök dizininde bir manifest.json
dosyası oluşturun ve şu kodu ekleyin:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Bu anahtarlar, uzantının temel meta verilerini 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
"name"
, "version"
ve "description"
tuşlarını kullanarak
Manifest genel bakış sayfası.
💡 Uzantı manifesti ile ilgili diğer bilgiler
- Projenin kök dizininde bulunmalıdır.
- Yalnızca
"manifest_version"
,"name"
ve"version"
anahtarları zorunludur. - 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, neden simgelere ihtiyacınız var? Simgeler geliştirme sırasında isteğe bağlı olsa da, isteğe bağlı olarak Uzantınızı Chrome Web Mağazası'nda dağıtmayı planlıyorsanız gereklidir. Ayrıca gibi site bağlantılarını da kullanabilirsiniz.
Bir images
klasörü oluşturun ve simgeleri içine yerleştirin. Simgeleri şuradan indirebilirsiniz:
GitHub'a gidin. 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.
💡 Bu farklı boyutlardaki simgeler nerede gösterilir?
Simge boyutu | Simge kullanımı |
---|---|
16x16 | Uzantının sayfaları ve içerik menüsündeki site simgesi. |
32x32 | Windows bilgisayarlar için genellikle bu boyut gerekir. |
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, bir sayfanın içeriğini okuyan ve değiştiren komut dosyaları çalıştırabilir. Bunlara içerik adı verilir komut dosyaları'nı tıklayın. Yalnız bir dünyada yaşarlar; yani, ana makine sayfaları veya diğer uzantılarla çakışmadan JavaScript ortamlarında değişiklik yapabilirler. içerik komut dosyaları.
Bir içerik komut dosyasını kaydetmek için manifest.json
bölümüne şu kodu ekleyin:
content.js
.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
"matches"
alanı, bir veya daha fazla eşleşme kalıbı içerebilir. Bunlar, tarayıcının
içerik komut dosyalarının yerleştirileceği siteleri tanımlamak Eşleşme kalıpları üç bölümden oluşur:
<scheme>://<host><path>
"*
" içerebilirler karakteri ekleyin.
💡 Bu uzantı, izin uyarısı gösteriyor mu?
Kullanıcı bir uzantı yüklediğinde, tarayıcı uzantının neler yapabileceğini bildirir. İçerik komut dosyaları, eşleşme kalıbı ölçütlerini karşılayan sitelerde çalışma izni ister.
Bu örnekte, kullanıcı aşağıdaki izin uyarısını görür:
![Okuma süresi uzantısını yüklerken kullanıcıya gösterilen izin uyarısı](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/permission-warning-user-af0cb023a0128.png?authuser=19&hl=tr)
Uzantı izinleri hakkında daha ayrıntılı bilgi edinmek için İzinleri beyan etme ve kullanıcıları uyarma başlıklı makaleyi inceleyin.
4. Adım: Okuma süresini hesaplayın ve ekleyin
İçerik komut dosyaları, standart Belge Nesne Modeli'ni (DOM) kullanarak
hakkında konuşacağız. Uzantı önce sayfanın <article>
öğesini içerip içermediğini kontrol eder.
Ardından, bu öğedeki tüm sözcükleri sayar ve toplam
okuma süresi sağlar.
scripts
adlı klasörün içinde content.js
adlı bir dosya oluşturun ve şu 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 kullanılan ilgi çekici JavaScript
- Normal
ifadeleri (yalnızca
<article>
öğesinin içindeki kelimeleri saymak için kullanılır). - Okuma zamanı 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>
boş veya tanımlanmamış ise Nullish birleştirme,<heading>
değerini döndürür.
Ç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 Geliştirme Temel Bilgiler.
Bir uzantıyı veya Chrome Web Mağazası dokümanlarını aç
Her bir 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:
![Karşılama sayfasında okuma süresi](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-running-the-wel-1d750346edcea.png?authuser=19&hl=tr)
🎯 Olası geliştirmeler
Bugün öğrendiklerinizi temel alarak aşağıdakilerden birini uygulamaya çalışın:
- Diğer Chrome geliştiricilerini desteklemek için manifest.json dosyasına başka bir eşleşme kalıbı ekleyin Chrome Geliştirici Araçları veya Workbox gibi belirli sayfalar yer alır.
- Favori bloglarınızdan herhangi birinin okuma süresini hesaplayan yeni bir içerik komut dosyası ekleyin veya belgeleme siteleridir.
Geliştirmeye devam edin
Tebrikler! Bu eğitimi tamamladınız 🎉. Becerilerinizi geliştirmeye devam etmek için daha fazla bilgi edinin:
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 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.