Brindar opciones a los usuarios

Permite que los usuarios personalicen el comportamiento de una extensión proporcionando una página de opciones. Para ver las opciones de una extensión, un usuario puede hacer clic con el botón derecho en el ícono de la extensión en la barra de herramientas y, luego, seleccionar opciones o navegar a la página de administración de extensiones en chrome://extensions, ubicar la extensión deseada, hacer clic en Detalles y, luego, seleccionar el vínculo de opciones.

Escribe la página de opciones

A continuación, se muestra una página de opciones de ejemplo.

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

Guarda las opciones preferidas de un usuario en todos los dispositivos con la API de 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);

Declara el comportamiento de la página de opciones

Hay dos tipos de páginas de opciones de extensión disponibles: página completa y página incorporada. El tipo de opciones se determina según cómo se declara en el manifiesto.

Opciones de página completa

La página de opciones de una extensión se mostrará en una pestaña nueva. El archivo HTML de opciones aparece registrado en el campo options_page.

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

Opciones de página completa

Opciones incorporadas

Las opciones incorporadas permiten que los usuarios ajusten las opciones de extensión sin salir de la página de administración de extensiones dentro de un cuadro incorporado. Para declarar opciones incorporadas, registra el archivo HTML en el campo options_ui del manifiesto de la extensión, con la clave open_in_tab establecida en falso.

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

Opciones de incorporación

  • page (string)

    Es la ruta de acceso a la página de opciones, en relación con la raíz de la extensión.

  • open_in_tab (boolean)

    Especifica false para declarar una página de opciones incorporada. Si es true, la página de opciones de la extensión se abrirá en una pestaña nueva en lugar de incorporarse en chrome://extensions.

Ten en cuenta las diferencias

Las páginas de opciones incorporadas en chrome://extensions tienen algunas diferencias de comportamiento sutiles relacionadas con que no están alojadas dentro de sus propias pestañas.

Vínculo a la página de opciones

Una extensión puede vincularse directamente a la página de opciones llamando a 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 de Tabs

El código de la página de opciones incorporadas de la extensión no está alojado dentro de una pestaña, lo que afecta la forma en que se puede usar la API de Tabs:

  • tabs.query nunca encontrará una pestaña dentro de la URL de la página de opciones de una extensión.
  • tabs.onCreated no se activará cuando se abra la página de opciones.
  • tabs.onUpdated no se activará cuando cambie el estado de carga de la página de opciones.
  • tabs.connect o tabs.sendMessage no se pueden usar para comunicarse con la página de opciones.

El uso de runtime.connect y runtime.sendMessage es una solución alternativa a estas restricciones, si la página de opciones necesita manipular la pestaña que la contiene.

APIs de mensajería

Si la página de opciones de una extensión envía un mensaje con runtime.connect o runtime.sendMessage, no se establecerá la pestaña del remitente y la URL del remitente será la URL de la página de opciones.

Tamaño

Las opciones incorporadas deben determinar automáticamente su propio tamaño según el contenido de la página. Sin embargo, es posible que el cuadro incorporado no encuentre un tamaño adecuado para algunos tipos de contenido. Este problema es más común en las páginas de opciones que ajustan la forma de su contenido según el tamaño de la ventana.

Si esto es un problema, proporciona dimensiones mínimas fijas para la página de opciones para asegurarte de que la página incorporada encuentre un tamaño adecuado.