chrome-extension-nasil-olusturulur

Chrome Eklentisi Nasıl Oluşturulur?

Yazarı: 
Uzantılar farklı, ancak birbirine bağlı bileşenlerden oluşur. Bileşenler, arka plan komut dosyaları, içerik komut dosyaları, bir seçenekler sayfası, UI öğeleri ve çeşitli mantık dosyalarını içerebilir. Uzantı bileşenleri, web geliştirme teknolojileri ile oluşturulur: HTML, CSS ve JavaScript. Bir uzantının bileşenleri, işlevselliğine bağlıdır ve her seçeneği gerektirmeyebilir.

Bu yazı, kullanıcının o anda odaklanılan sayfanın arka plan rengini değiştirmesine olanak tanıyan bir uzantı oluşturacaktır. Aralarındaki ilişkilerin tanıtıcı bir gösterimini sağlamak için genişletme platformunun bileşenlerinin birçoğunu kullanacak.

Başlamak için, uzantının dosyalarını tutacak yeni bir dizin oluşturun.

"masterdarknet" adında bir dosya oluşturdum.

Manifest.json Dosyası Oluşturun

Uzantılar bildirimleriyle başlar. manifest.json adında bir dosya oluşturun ve aşağıdaki kodu ekleyin.
{
  "name": Örnek Bir Uygulama",
  "description": "Eklenti inşa et",
  "version": "1.0",
  "manifest_version": 3
}

Paketlenmemiş Uzantı Yükleyin

Tarayıcımızda chrome://extensions adresini görüntüleyiniz.
Geliştirici modunu aktif ediniz.
Paketlenmemiş uzantıyı ekle butonundan dosyanızı seçiniz.

Arka plan komut dosyasını bildirime kaydedin

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

Chrome artık uzantının bir hizmet çalışanı içerdiğini biliyor. Uzantıyı yeniden yüklediğinizde, Chrome, dinlemesi gereken önemli olaylar gibi ek talimatlar için belirtilen dosyayı tarar.

Arka plan komut dosyasını oluşturun

Bu uzantı, kurulur kurulmaz kalıcı bir değişkenden gelen bilgilere ihtiyaç duyacaktır. Arka plan komut dosyasına runtime.onInstalled için bir dinleme olayı ekleyerek başlayın. onInstalled dinleyicinin içinde uzantı, depolama API’sini kullanarak bir değer ayarlayacaktır. Bu, birden çok uzantı bileşeninin bu değere erişmesine ve onu güncellemesine izin verecektir. Uzantının dizini içinde background.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin.

// background.js

let color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

Depolama iznini ekleyin

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"]
}

Arka plan komut dosyasını inceleyin

Bir kullanıcı arayüzü tanıtın

Uzantılar, birçok kullanıcı arabirimi biçimine sahip olabilir; bu bir açılır pencere kullanacak. Uzantının dizinine popup.html adlı bir dosya oluşturun ve ekleyin. Bu uzantı, arka plan rengini değiştirmek için bir düğme kullanır.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

Arka plan komut dosyası gibi, Chrome’un uzantının açılır penceresinde sunabilmesi için bu dosyanın bildirimde bildirilmesi gerekir. Bunu yapmak için bildirime bir eylem nesnesi ekleyin ve popup.html’yi eylemin default_popup’ı olarak ayarlayın.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

Bu açılır pencerenin HTML’si button.css adlı harici bir CSS dosyasına başvuruyor. Uzantının dizinine başka bir dosya ekleyin, uygun şekilde adlandırın ve aşağıdaki kodu ekleyin.

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

Araç çubuğu simgelerinin ataması da default_icon alanında eylem altına dahil edilmiştir. Görüntüler klasörünü buradan indirin, sıkıştırmasını açın ve uzantının dizinine yerleştirin. Uzantının görüntüleri nasıl kullanacağını bilmesi için bildirimi güncelleyin.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  }
}

Uzantılar ayrıca uzantı yönetimi sayfasında, izin uyarısında ve favicon’da resimler görüntüler. Bu görüntüler, bildirimde simgelerin altında belirtilmiştir.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

Varsayılan olarak uzantılar, uzantılar menüsünde (bulmaca parçası) görünür. Uzantıyı sabitlemek, simgeyi araç çubuğunda görüntüler.

Uzantı bu aşamada yeniden yüklenirse, varsayılan yer tutucu yerine sağlanan simgeyi içerecek ve eylemin tıklanması, varsayılan rengi gösteren bir düğme görüntüleyen bir açılır pencere açacaktır.

Açılır kullanıcı arayüzünün son adımı, düğmeye renk eklemektir. Aşağıdaki kodla popup.js adlı bir dosya oluşturun ve uzantının dizinine ekleyin.

// Initialize button with user's preferred color
let changeColor = document.getElementById("changeColor");

chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

Bu kod, popup.html’den düğmeyi alır ve depolamadan renk değerini ister. Ardından rengi düğmenin arka planı olarak uygular. popup.html’de popup.js’ye bir komut dosyası etiketi ekleyin.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

Yeşil düğmeyi görüntülemek için uzantıyı yeniden yükleyin.

Daha fazla bilgi için Chrome extension 101 adresini inceleyiniz.

Yorum yapın