Berikan opsi kepada pengguna

Mengizinkan pengguna menyesuaikan perilaku ekstensi dengan menyediakan halaman opsi. Pengguna dapat melihat opsi ekstensi dengan mengklik kanan ikon ekstensi di toolbar, lalu memilih opsi atau dengan membuka halaman pengelolaan ekstensi di chrome://extensions, menemukan ekstensi yang diinginkan, mengklik Detail, lalu memilih link opsi.

Menulis halaman opsi

Berikut adalah contoh halaman opsi.

<!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>

Simpan opsi pilihan pengguna di seluruh perangkat menggunakan API storage.sync.

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

Mendeklarasikan perilaku halaman opsi

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

Opsi halaman penuh

Halaman opsi ekstensi akan ditampilkan di tab baru. File HTML opsi tercantum terdaftar di kolom options_page.

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

Opsi halaman penuh

Opsi sematan

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.

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

Opsi sematan

  • page (string)

    Jalur ke halaman opsi, relatif terhadap root ekstensi.

  • open_in_tab (boolean)

    Tentukan sebagai false untuk mendeklarasikan halaman opsi sematan. Jika true, halaman opsi ekstensi akan dibuka di tab baru, bukan disematkan di chrome://extensions.

Pertimbangkan perbedaannya

Halaman opsi yang disematkan di dalam chrome://extensions memiliki beberapa perbedaan perilaku halus yang terkait dengan tidak dihosting di dalam tabnya sendiri.

Menautkan ke halaman opsi

Ekstensi dapat ditautkan langsung ke halaman opsi dengan memanggil chrome.runtime.openOptionsPage() .

<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

Kode halaman opsi yang disematkan ekstensi tidak dihosting di dalam tab, sehingga memengaruhi cara penggunaan Tabs API:

Penggunaan runtime.connect dan runtime.sendMessage adalah solusi untuk mengatasi batasan ini, 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 disetel, 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.