Her sayfada komut dosyası çalıştırın

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ı
Uzantının Karşılama sayfasında okuma süresi uzantısı.

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ı
Okuma süresi izni uyarısı.

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:

Okuma süresi klasörünün içeriği: manifest.json, komut dosyaları klasöründeki content.js ve görüntüler klasörü.

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
Okuma süresi uzantısı içeren Uzantı Karşılama sayfası

🎯 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.
ziyaret edin.

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.