Etkin sekmeye komut dosyası yerleştirme

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:

Odak modu klasörünün içeriği: manifest.json, background.js, focus-mode.css ve resimler klasörü.

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:

Odak modu uzantısı KAPALI
Odak modu uzantısı kapalı

Şuna:

Odak modu uzantısı AÇIK
Konsantrasyon modu uzantısı açık

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