Kullanıcılara seçenekler sunma

Uzantılar, kullanıcıların Chrome tarayıcıyı özelleştirmesine olanak tanıdığı gibi seçenekler sayfası da uzantının özelleştirilmesini sağlar. Özellikleri etkinleştirmek ve kullanıcıların ihtiyaçlarıyla alakalı işlevi seçmelerine olanak tanımak için seçenekleri kullanın.

Seçenekler sayfasını bulma

Kullanıcılar, seçenekler sayfasına doğrudan bağlantıyı kullanarak veya araç çubuğundaki uzantı simgesini sağ tıklayıp ardından seçenekleri belirleyerek erişebilir. Ayrıca kullanıcılar ilk olarak chrome://extensions uygulamasını açıp istenen uzantıyı bularak, Ayrıntılar'ı tıkladıktan sonra seçenekler bağlantısını tıklayarak seçenekler sayfasına gidebilir.

Kullanıcı arayüzündeki seçenekler sayfası bağlantısı
Seçenekler sayfasının bağlantısı.
İçerik Menüsü Seçenekleri sayfası
Uzantının simgesini sağ tıklayarak

Seçenekler sayfasını yaz

Aşağıda, bir seçenekler sayfası örneği verilmiştir:

options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <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>

Aşağıda, örnek bir seçenek komut dosyası verilmiştir. options.html ile aynı klasöre kaydedin. Bu işlem, kullanıcının cihazlarda storage.sync API'yi kullanan tercih ettiği seçenekleri kaydeder.

options.js:

// Saves options to chrome.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  chrome.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = () => {
  chrome.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

Son olarak, "storage" iznini uzantının manifest dosyasına ekleyin:

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

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

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

Tam sayfa seçenekleri

Yeni bir sekmede tam sayfa seçenekler sayfası görüntülenir. Seçenekler HTML dosyasını, "options_page" alanındaki manifest dosyasında kaydedin.

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Tam sayfa seçenekleri
Yeni sekmede tam sayfa seçenekleri.

Yerleştirilmiş seçenekler

Yerleştirilmiş seçenekler sayfası, 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çenekleri bildirmek için HTML dosyasını uzantı manifest'indeki "options_ui" alanının altına ("open_in_tab" anahtarı false olarak ayarlanmış şekilde) kaydedin.

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Yerleştirilmiş seçenekler
Yerleştirilmiş seçenekler.
page (dize)
Uzantının köküne göre seçenekler sayfasının yolunu belirtir.
open_in_tab (boolean)
Uzantının seçenekler sayfasının yeni bir sekmede açılıp açılmayacağını belirtir. false olarak ayarlanırsa uzantının seçenekler sayfası yeni bir sekmede açılmak yerine chrome://extensions içine yerleştirilir.

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

chrome://extensions içine yerleştirilmiş seçenek sayfalarının davranış açısından sekmelerdeki seçenek sayfalarına göre küçük farklılıkları vardır.

Seçenekler sayfasının bağlantısı

Bir uzantı, chrome.runtime.openOptionsPage() numaralı telefonu arayarak doğrudan seçenekler sayfasına bağlantı verebilir. Örneğin, bir pop-up'a eklenebilir:

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

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ı

Yerleştirilmiş seçenek kodu bir sekmede barındırılmadığı için Tabs API kullanılamaz. Seçenekler sayfasının kapsayıcı sekmesini değiştirmesi gerekiyorsa bunun yerine runtime.connect() ve runtime.sendMessage() öğelerini kullanın.

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

Katıştırılmış seçenekler, sayfa içeriğine göre kendi boyutlarını 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.