Berikan opsi kepada pengguna

Sama seperti ekstensi yang memungkinkan pengguna menyesuaikan browser Chrome, halaman opsi memungkinkan penyesuaian ekstensi. Gunakan opsi untuk mengaktifkan fitur dan mengizinkan pengguna memilih fungsi yang relevan dengan kebutuhan mereka.

Menemukan halaman opsi

Pengguna dapat mengakses halaman opsi melalui link langsung atau dengan mengklik kanan ikon ekstensi di toolbar, lalu memilih opsi. Selain itu, pengguna dapat membuka halaman opsi dengan membuka chrome://extensions terlebih dahulu, menemukan ekstensi yang diinginkan, mengklik Detail, lalu memilih link opsi.

Link halaman opsi di antarmuka pengguna
Link ke halaman Opsi.
Halaman Opsi Menu Konteks
Mengklik kanan ikon ekstensi.

Menulis halaman opsi

Berikut adalah contoh halaman opsi:

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>

Berikut adalah contoh skrip opsi. Simpan di folder yang sama dengan options.html. Hal ini menyimpan opsi pilihan pengguna di seluruh perangkat menggunakan storage.sync API.

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

Terakhir, tambahkan izin "storage" ke file manifest ekstensi:

manifest.json:

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

Mendeklarasikan perilaku halaman opsi

Ada dua jenis halaman opsi ekstensi, halaman penuh dan tersemat. Jenis halaman opsi ditentukan oleh cara halaman tersebut dideklarasikan dalam manifes.

Opsi halaman penuh

Halaman opsi layar penuh ditampilkan di tab baru. Daftarkan file HTML opsi dalam manifes di kolom "options_page".

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Opsi halaman penuh
Opsi halaman penuh di tab baru.

Opsi tersemat

Halaman opsi sematan memungkinkan pengguna menyesuaikan opsi ekstensi tanpa keluar dari halaman pengelolaan ekstensi di dalam kotak sematan. Untuk mendeklarasikan opsi sematan, daftarkan file HTML di kolom "options_ui" dalam manifes ekstensi, dengan kunci "open_in_tab" disetel ke false.

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Opsi tersemat
Opsi sematan.
page (string)
Menentukan jalur ke halaman opsi, relatif terhadap root ekstensi.
open_in_tab (boolean)
Menunjukkan apakah halaman opsi ekstensi akan dibuka di tab baru. Jika disetel ke false, halaman opsi ekstensi disematkan di chrome://extensions, bukan dibuka di tab baru.

Pertimbangkan perbedaannya

Halaman opsi yang disematkan di dalam chrome://extensions memiliki perbedaan perilaku yang halus dari halaman opsi di tab.

Link ke halaman opsi

Ekstensi dapat ditautkan langsung ke halaman opsi dengan memanggil browser.runtime.openOptionsPage(). Misalnya, dapat ditambahkan ke pop-up:

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

Karena kode opsi sematan tidak dihosting di tab, Tabs API tidak dapat digunakan. Sebagai gantinya, gunakan runtime.connect() dan runtime.sendMessage(), jika halaman opsi perlu memanipulasi tab yang memuatnya.

Messaging API

Jika halaman opsi ekstensi mengirim pesan menggunakan runtime.connect() atau runtime.sendMessage(), tab pengirim tidak akan ditetapkan, dan URL pengirim akan menjadi URL halaman opsi.

Pengaturan ukuran

Opsi sematan akan otomatis menentukan ukurannya sendiri berdasarkan konten halaman. Namun, kotak yang disematkan mungkin tidak menemukan ukuran yang sesuai untuk beberapa jenis konten. Masalah ini paling umum terjadi pada halaman opsi yang menyesuaikan bentuk kontennya berdasarkan ukuran jendela.

Jika ini adalah masalah, berikan dimensi minimum tetap untuk halaman opsi guna memastikan bahwa halaman yang disematkan akan menemukan ukuran yang sesuai.