Berikan opsi kepada pengguna

Izinkan pengguna menyesuaikan perilaku ekstensi dengan menyediakan halaman opsi. Pengguna dapat melihat opsi ekstensi dengan mengklik kanan ikon ekstensi di toolbar, lalu memilih opsi tersebut 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 dengan 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 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

Dengan opsi sematan, pengguna dapat menyesuaikan opsi ekstensi tanpa keluar dari halaman pengelolaan ekstensi di dalam kotak sematan. Untuk mendeklarasikan opsi sematan, daftarkan file HTML pada kolom options_ui dalam manifes ekstensi, dengan kunci open_in_tab ditetapkan 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)

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

Mempertimbangkan perbedaan

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

Menautkan ke halaman opsi

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

API Tab

Kode halaman opsi sematan ekstensi tidak dihosting di dalam tab, yang memengaruhi cara Tabs API dapat digunakan:

Menggunakan runtime.connect dan runtime.sendMessage adalah solusi untuk pembatasan ini, jika halaman opsi memang 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.

Ukuran

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

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