Kullanıcılara seçenekler sunma

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

Seçenekler sayfasını yazma

Aşağıda bir seçenekler sayfası örneği 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 cihazlar genelinde 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

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

Tam sayfa seçenekleri

Uzantıların seçenekler sayfası yeni bir sekmede gösterilir. Seçenekler HTML dosyası, options_page alanı 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 kutudaki uzantı yönetimi sayfasından ayrılmadan uzantı seçeneklerini ayarlamasına olanak tanır. Yerleşik seçenekleri tanımlamak için uzantı manifestindeki options_ui alanı altında HTML dosyasını kaydedin. open_in_tab anahtarı false olarak ayarlanmalıdır.

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

Yerleştirilmiş seçenekler

  • page (dize)

    Seçenekler sayfasına giden yol, uzantının köküne göre.

  • open_in_tab (boolean)

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

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

chrome://extensions içine yerleştirilmiş seçenekler sayfaları, kendi sekmelerinde barındırılmamalarıyla ilgili bazı küçük davranış farklılıklarına sahiptir.

Seçenekler sayfasına bağlantı verme

Bir uzantı, chrome.runtime.openOptionsPage() işlevini çağırarak doğrudan seçenekler sayfasına bağlanabilir .

<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'));
  }
});

Tabs API

Uzantıya yerleştirilmiş seçenekler sayfası kodu bir sekmede barındırılmadığından Tabs API'nin kullanım şekli etkileniyor:

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

Seçenekler sayfasının kapsayan sekmeyi değiştirmesi gerekiyorsa runtime.connect ve runtime.sendMessage kullanmak bu kısıtlamaları aşmanın bir yoludur.

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ı 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 uygun bir boyut bulamayabilir. Bu sorun, içerik şeklini pencere boyutuna göre ayarlayan seçenekler sayfalarında daha sık görülür.

Bu bir sorunsa yerleştirilmiş sayfanın uygun bir boyut bulmasını sağlamak için seçenekler sayfası için sabit minimum boyutlar sağlayın.