Kullanıcılara seçenekler sunma

Seçenekler sayfası sunarak kullanıcıların bir uzantının davranışını özelleştirmelerine olanak tanıyın. Kullanıcılar, araç çubuğundaki uzantı simgesini sağ tıklayıp seçenekleri belirleyerek veya chrome://extensions adresindeki uzantı yönetim sayfasına gidip istenen uzantıyı bulup Ayrıntılar'ı tıklayıp seçenekler bağlantısını seçerek uzantı seçeneklerini görüntüleyebilir.

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ıların tercih ettiği seçenekleri farklı cihazlarda 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ı bildir

İki tür uzantı seçenekleri sayfası vardır: tam sayfa ve yerleşik. Seçeneklerin türü, manifestte nasıl tanımlandığına göre belirlenir.

Tam sayfa seçenekleri

Bir uzantının seçenekler sayfası yeni bir sekmede görüntülenir. Seçenekler HTML dosyası options_page alanının altında listelenir.

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

Tam sayfa seçenekleri

Yerleştirilmiş seçenekler

Yerleştirilmiş seçenekler, kullanıcıların yerleştirilmiş bir kutunun içindeki uzantı yönetimi sayfasından çıkmadan uzantı seçeneklerini ayarlamasına olanak tanır. Yerleştirilmiş seçenekler bildirmek için HTML dosyasını, uzantı manifestindeki options_ui alanının altına ve open_in_tab anahtarı false (yanlış) değerine ayarlanmış olarak kaydedin.

{
  "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 (boolean)

    Yerleştirilmiş seçenekler sayfası tanımlamak için false olarak belirtin. true değerine ayarlanırsa uzantının seçenekler sayfası chrome://extensions içine yerleştirilmek yerine yeni bir sekmede açılır.

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

chrome://extensions içine yerleştirilmiş seçenek sayfalarının, kendi sekmelerinde barındırılmamaları ile ilgili bazı küçük davranış farklılıkları vardır.

Seçenekler sayfasına bağlantı verme

Bir uzantı, chrome.runtime.openOptionsPage() numaralı telefonu arayarak doğrudan seçenekler sayfasına bağlantı verebilir .

<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'sı

Uzantı yerleştirilmiş seçenekler sayfası kodu bir sekmede barındırılmıyor ve bu durum Tabs API'nin nasıl kullanılabileceğini etkiliyor:

Seçenekler sayfasının kapsayıcı sekmesini değiştirmesi gerekiyorsa runtime.connect ve runtime.sendMessage ile bu kısıtlamaların üzerinden geçebilirsiniz.

Mesajlaşma API'leri

Bir uzantının seçenekler sayfası runtime.connect veya runtime.sendMessage kullanarak mesaj gönderirse Gönderenin sekmesi ayarlanmaz ve Gönderenin URL'si, seçenekler sayfasının URL'si olur.

Boyutlandırma

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

Bu bir sorunsa yerleştirilmiş sayfanın uygun bir boyut bulacağından emin olmak için seçenekler sayfasına yönelik sabit minimum boyutlar sağlayın.