Brindar opciones a los usuarios

Proporciona una página de opciones para permitir que los usuarios personalicen el comportamiento de una extensión. El usuario puede ver las opciones de una extensión si hace clic con el botón derecho en el ícono de la extensión de la barra de herramientas y, luego, selecciona las opciones o navega a la página de administración de extensiones en chrome://extensions, busca la extensión deseada, haz clic en Detalles y selecciona 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 del usuario en distintos dispositivos mediante 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);

Cómo declarar el comportamiento de la página de opciones

Hay dos tipos disponibles de páginas de opciones de extensión: página completa e incorporada. El tipo de opciones está determinado por la forma en que 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

Con las opciones incorporadas, los usuarios pueden ajustar las opciones de las extensiones sin tener que salir de la página de administración de extensiones dentro de un cuadro incorporado. Para declarar una opción incorporada, registra el archivo HTML en el campo options_ui del manifiesto de la extensión con la clave open_in_tab establecida como falsa.

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

Opciones incorporadas

  • page (cadena)

    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 como false para declarar una página de opciones incorporadas. 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.

Considera las diferencias

Las páginas de opciones incorporadas en chrome://extensions tienen algunas diferencias de comportamiento sutiles por no estar alojadas en 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 pestañas

El código de la página de opciones incorporadas de las extensiones no se aloja en una pestaña, lo que afecta la forma en que se puede usar la API de pestañas:

  • tabs.query nunca encontrará una pestaña en 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.
  • No se puede usar tabs.connect ni tabs.sendMessage para comunicarse con la página de opciones.

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

APIs de Messaging

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 de la página de opciones.

Tamaño

Las opciones incorporadas deberían 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 su forma de contenido según el tamaño de la ventana.

Si se trata de un problema, proporciona dimensiones mínimas fijas para la página de opciones a fin de asegurarte de que la página incorporada encontrará un tamaño adecuado.