Kullanıcılara seçenekler sunma

Uzantılar, kullanıcıların Chrome tarayıcıyı özelleştirmesine olanak tanırken seçenekler sayfası da uzantının özelleştirilmesini sağlar. Özellikleri etkinleştirmek ve kullanıcıların ihtiyaçlarına uygun işlevleri seçmesine izin vermek için seçenekleri kullanın.

Seçenekler sayfasını bulma

Kullanıcılar, doğrudan bağlantı ile veya araç çubuğundaki uzantı simgesini sağ tıklayıp seçenekleri belirleyerek seçenekler sayfasına erişebilir. Ayrıca kullanıcılar, önce chrome://extensions simgesini açıp istenen uzantıyı bulup Ayrıntılar'ı tıklayıp seçenekler bağlantısını seçerek de seçenekler sayfasına gidebilir.

Kullanıcı arayüzündeki Seçenekler sayfası bağlantısı
Seçenekler sayfasına bağlantı verin.
Bağlam Menüsü Seçenekleri sayfası
Uzantının simgesini sağ tıklayın.

Seçenekler sayfasını yazma

Aşağıda, seçenekler sayfasına dair bir örnek 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 bir örnek seçenekler komut dosyası verilmiştir. Dosyayı options.html ile aynı klasöre kaydedin. Bu sayede, storage.sync API'yi kullanan cihazlarda kullanıcının tercih ettiği seçenekler kaydedilir.

options.js:

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

  browser.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 browser.storage.
const restoreOptions = () => {
  browser.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ı bildirme

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

Tam sayfa seçenekleri

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

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Yerleştirilmiş seçenekler
Yerleştirilmiş seçenekler.
page (dize)
Seçenekler sayfasının uzantının köküne göre yolunu belirtir.
open_in_tab (boole)
Uzantının seçenekler sayfasının yeni sekmede açılıp açılmayacağını belirtir. false olarak ayarlanırsa uzantının seçenekler sayfası yeni 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çenekler sayfaları, sekmelerdeki seçenekler sayfalarından biraz farklı davranışlar gösterir.

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

Bir uzantı, browser.runtime.openOptionsPage() işlevini çağırarak doğrudan seçenekler sayfasına bağlanabilir. Ö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 (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Tabs API

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

Messaging API'leri

Bir uzantının seçenekler sayfası runtime.connect() veya runtime.sendMessage() kullanarak ileti 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 boyutlarını 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çenek 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.