Kullanıcılara seçenekler sunma

Seçenekler sayfası sunarak kullanıcıların, uzantının davranışını özelleştirmesine olanak tanıyın. Bir kullanıcı görüntüleyebilir bir uzantının seçeneklerini görmek için araç çubuğundaki uzantı simgesini sağ tıklayın, ardından seçenekleri belirleyin veya chrome://extensions adresindeki uzantı yönetimi sayfasına giderek istediğiniz uzantısına geçin, Ayrıntılar'ı tıklayın ve seçenekler bağlantısını belirleyin.

Seçenekler sayfasını yaz

Aşağıda örnek bir seçenekler sayfası verilmiştir.

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<label>
  <input type="checkbox" id="like">
  I like colors.
</label>

<div id="status"></div>
<button id="save">Save</button>

<script src="options.js"></script>
</body>
</html>

storage.sync API'sini kullanarak kullanıcının tercih ettiği seçenekleri farklı cihazlara kaydedin.

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

Seçenekler sayfası davranışını bildirme

Tam sayfa ve yerleştirilmiş olmak üzere iki tür uzantı seçeneği sayfası vardır. Tür manifestoda açıklanma şekline göre belirlenir.

Tam sayfa seçenekleri

Uzantının seçenekler sayfası yeni bir sekmede görüntülenir. Seçenekler HTML dosyası listelenir options_page alanının altında kayıtlı olmalıdır.

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

Tam sayfa seçenekleri

Yerleştirilmiş seçenekler

Yerleşik seçenekler, kullanıcıların uzantı yönetimi sayfasını ziyaret edin. Yerleştirilmiş seçenekleri bildirmek için HTML'yi kaydedin uzantı manifest'inde options_ui alanının altında open_in_tab anahtarı olarak ayarlanmış bir dosyayı false (yanlış) değerini alır.

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

Yerleştirilmiş seçenekler

  • page (dize)

    Uzantının köküne göre seçenekler sayfasının yolu.

  • open_in_tab (boole)

    Yerleştirilmiş seçenekler sayfasını bildirmek için false olarak belirtin. true ise uzantının seçenekler sayfası chrome://extensions yerine yeni bir sekmede açılır.

Farklılıkları göz önünde bulundurun

chrome://extensions içine yerleştirilmiş seçenek sayfalarında, uzantıyla ilgili bazı ince davranış farklılıkları kendi sekmelerinde barındırılmamaktadır.

Seçenekler sayfasına bağlantı verme

Uzantılar, şu numarayı arayarak doğrudan seçenekler sayfasına bağlantı verebilir: chrome.runtime.openOptionsPage()

<button id="go-to-options">Go to options</button>

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

Sekmeler API'si

Yerleşik uzantı seçenekleri sayfası kodu, bir sekme içinde barındırılmaz. Bu durum, Tabs API'nin kullanılmalıdır:

  • tabs.query, hiçbir zaman uzantının seçenekler sayfası URL'sinde herhangi bir sekme bulmaz.
  • Seçenekler sayfası açıldığında tabs.onCreated tetiklenmez.
  • tabs.onUpdated, seçenekler sayfası yükleme durumu değiştiğinde etkinleşmez.
  • tabs.connect veya tabs.sendMessage, seçenekler sayfasıyla iletişim kurmak için kullanılamaz.

runtime.connect ve runtime.sendMessage'ı kullanmak, bu kısıtlamaları çözmek için seçenekleri sayfasının kapsayıcı sekmeyi değiştirmesi gerekir.

Mesajlaşma API'leri

Bir uzantının seçenekler sayfası, runtime.connect veya runtime.sendMessage ise Gönderenin sekmesi ayarlanmaz ve Gönderenin URL'si seçenekler sayfasının URL'si olmalıdır.

Boyutlandırma

Yerleştirilmiş seçenekler, sayfa içeriğine göre kendi boyutunu otomatik olarak belirler. Ancak, yerleştirilmiş kutu, bazı içerik türleri için iyi bir boyut bulmayabilir. Bu sorun en çok içerik şeklini pencere boyutuna göre ayarlayan seçenek sayfaları

Bu bir sorunsa seçenekler sayfası için sabit minimum boyutlar sağlayın. Böylece, uygun bir boyut bulur.