La Página de Opciones en las extensiones de Chrome

Sebastian Gomez

Jul 19, 2024

Updated: Jun 24, 2026

La Página de Opciones en las extensiones de Chrome

Al igual que las extensiones permiten a los usuarios personalizar el navegador Chrome, la página de opciones permite la personalización de la extensión. Usa la página de opciones para habilitar funciones y permitir que los usuarios elijan qué características son relevantes para sus necesidades.

Acceder a la página de opciones

Los usuarios pueden acceder a la página de opciones mediante un enlace directo o haciendo clic derecho en el ícono de la extensión en la barra de herramientas y seleccionando "Opciones". También pueden navegar a la página de opciones abriendo chrome://extensions, ubicando la extensión deseada, haciendo clic en "Detalles" y seleccionando el enlace de opciones. A continuación, te mostraré cómo crear y configurar una página de opciones.

Crear el archivo options.html

En la carpeta de tu proyecto, crea un archivo llamado options.html y añade el siguiente código:

<!DOCTYPE html>
<html>

<head>
    <title>Mi color favorito</title>
</head>

<body>
    <select id="color">
        <option value="red">rojo</option>
        <option value="green">verde</option>
        <option value="blue">azul</option>
        <option value="yellow">amarillo</option>
    </select>

    <label>
        <input type="checkbox" id="like" />
        Me gustan los colores
    </label>

    <div id="status"></div>
    <button id="save">Guardar</button>

    <script src="options.js"></script>
</body>

</html>

Actualizar el Manifiesto

Abre tu archivo manifest.json y añade la referencia a la página de opciones:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    }
  },
  "options_page": "options.html"
}

CSS y JavaScript

Al igual que popup.html, la página de opciones te permite usar HTML, CSS y JavaScript. Ten en cuenta que la página de opciones no tiene vínculo directo con el popup ni con otras partes de la aplicación, así que la interacción con ella es limitada y solo a través del storage de Chrome podemos comunicarnos. Por ejemplo, añadamos JavaScript en options.js para que se guarde el color elegido por el usuario.

Desde Chrome 88, las APIs de chrome.storage devuelven Promesas, así que podemos escribirlas con async/await, que hoy es el estilo idiomático. Este es el options.js modernizado:

// Guarda las opciones en chrome.storage
const saveOptions = async () => {
  // Obtiene el valor del color seleccionado y el estado del checkbox
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  // Guarda los valores en chrome.storage.sync
  await chrome.storage.sync.set({ favoriteColor: color, likesColor });

  // Actualiza el estado para informar al usuario que las opciones fueron guardadas
  const status = document.getElementById('status');
  status.textContent = 'Opciones guardadas.';
  setTimeout(() => {
    status.textContent = '';
  }, 750);
};

// Restaura el estado del select y el checkbox usando las preferencias
// almacenadas en chrome.storage
const restoreOptions = async () => {
  const items = await chrome.storage.sync.get({ favoriteColor: 'red', likesColor: true });

  // Establece los valores obtenidos en los elementos del formulario
  document.getElementById('color').value = items.favoriteColor;
  document.getElementById('like').checked = items.likesColor;
};

// Restaura las opciones cuando el contenido del documento se ha cargado
document.addEventListener('DOMContentLoaded', restoreOptions);

// Guarda las opciones cuando se hace clic en el botón de guardar
document.getElementById('save').addEventListener('click', saveOptions);

Nota: si prefieres mantener compatibilidad con código antiguo, estas mismas APIs también aceptan un callback como último argumento, por ejemplo chrome.storage.sync.get({ favoriteColor: 'red' }, (items) => {... }). Funciona, pero la forma con async/await es más limpia y es la recomendada hoy.

Antes de usar el storage debes añadir el permiso correspondiente en el manifest.json:

"permissions": [
  "storage"
]

Nota sobre permisos: si vienes siguiendo esta serie, quizá ya tengas activeTab y scripting en tu lista de permisos de capítulos anteriores. Para la página de opciones de este capítulo el único permiso necesario es storage; los otros dos no los usa el código que vemos aquí.

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

Al desarrollar una extensión de Chrome, es esencial definir cómo se presentarán las opciones de configuración al usuario. Hay dos tipos principales de páginas de opciones para extensiones: página completa e incorporada. El tipo se determina según cómo se declare en el archivo manifest.json.

Opciones de página completa

Las opciones de página completa se muestran en una nueva pestaña del navegador. Este enfoque es útil si tu extensión requiere una interfaz más extensa para configuraciones complejas. Para registrar una página de opciones de página completa, debes incluir el archivo HTML correspondiente en el campo options_page del manifiesto.

Ejemplo en el archivo manifest.json:

{
  "name": "Mi extensión",
  "options_page": "options.html"
}

Cuando el usuario accede a las opciones de la extensión, se abrirá una nueva pestaña mostrando el contenido de options.html.

Opciones incorporadas

Las opciones incorporadas permiten a los usuarios ajustar la configuración de la extensión sin salir de la página de administración de extensiones de Chrome. Este tipo de página de opciones aparece dentro de un cuadro incorporado en la misma página. Para declarar opciones incorporadas, debes registrar el archivo HTML en el campo options_ui del manifiesto de la extensión y establecer la clave open_in_tab en false.

Ejemplo en el archivo manifest.json:

{
  "name": "Mi extensión",
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  }
}

Con esta configuración, los usuarios pueden acceder y ajustar las opciones de la extensión directamente desde la página de administración de extensiones de Chrome, sin necesidad de abrir una nueva pestaña.

Usar las opciones guardadas desde el popup

La comunicación desde nuestro popup principal se realiza de manera similar, usando la API de Storage para obtener los datos y aplicarlos según sea necesario. Por ejemplo, en nuestro caso podemos cambiar el backgroundColor del contenedor .login-container con el color que el usuario eligió en las opciones. Modifiquemos el archivo popup.js para lograrlo:

const restoreOptions = async () => {
  const items = await chrome.storage.sync.get({ favoriteColor: 'red', likesColor: true });
  document.querySelector('.login-container').style.backgroundColor = items.favoriteColor;
};

document.addEventListener('DOMContentLoaded', restoreOptions);

Fíjate en que aquí leemos el storage con el mismo patrón que en options.js: pasamos un objeto con valores por defecto a chrome.storage.sync.get y usamos await. Así, tanto la página de opciones como el popup comparten exactamente la misma forma de leer y recolorear, sin mezclar estilos.

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(). Por ejemplo, puedes agregar un botón en el popup para llevar al usuario a la página de opciones.

Código en popup.html:

<button id="go-to-options">Ir a opciones</button>
<script src="popup.js"></script>

Código en popup.js:

document.querySelector('#go-to-options').addEventListener('click', () => {
  chrome.runtime.openOptionsPage();
});

Nota: chrome.runtime.openOptionsPage() existe desde Chrome 42, así que en cualquier navegador compatible con Manifest V3 siempre está disponible. Por eso ya no hace falta el viejo fallback con window.open(chrome.runtime.getURL('options.html')): era código defensivo que nunca llegaba a ejecutarse.

Si quieres juntar ambas piezas, recolorear el contenedor al abrir el popup y abrir las opciones desde el botón, basta con combinarlas dentro del mismo popup.js:

document.addEventListener('DOMContentLoaded', async () => {
  // Recolorea el contenedor según la configuración guardada
  const items = await chrome.storage.sync.get({ favoriteColor: 'red', likesColor: true });
  document.querySelector('.login-container').style.backgroundColor = items.favoriteColor;

  // Abre la página de opciones desde el botón
  document.querySelector('#go-to-options').addEventListener('click', () => {
    chrome.runtime.openOptionsPage();
  });
});

Este código se asegura de que el fondo del contenedor cambie al color preferido del usuario, almacenado en chrome.storage, y ofrece un vínculo directo a la página de opciones desde el popup.

Ejercicios propuestos

Añade un tercer control a options.html (por ejemplo, un campo de texto para un nombre de usuario), guárdalo en chrome.storage.sync y léelo desde el popup.
Convierte tu extensión a opciones incorporadas usando options_ui con open_in_tab: false y compara la experiencia con la de página completa.
Reemplaza el patrón con valores por defecto en cada get por una constante compartida de valores por defecto y reúsala tanto en options.js como en popup.js.

Resumen en 3 puntos

La página de opciones permite personalizar tu extensión y solo se comunica con el resto de la aplicación a través de chrome.storage.
Puedes declararla como página completa (options_page) o incorporada (options_ui con open_in_tab: false), según lo compleja que sea tu configuración.
Desde Chrome 88 las APIs de storage devuelven Promesas, así que usa async/await y un único patrón de lectura tanto en las opciones como en el popup.

Espero que hayas encontrado útil esta guía y la puedas aplicar a algún proyecto que tengas en mente. No olvides dejar un comentario si te sirvió, suscribirte para más contenido y compartir el post usando los enlaces a las redes sociales aquí abajo. Buena suerte y a seguir construyendo.