Sebastian Gomez
La Página de Opciones en las extensiones de Chrome
Añadiendo una Página de Opciones a tu Extensión
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 el popup.html la pagina de opciones te permite usar html, css y Javascript, la pagina de opciones no tiene vinculo directo con el popup ni con otras partes de la aplicación, entonces la interacción con ella es limitada y solo a través del storage de Chrome podemos interactuar. Por ejemplo añadamos javascript para que se guarde el color elegido por el usuario en options.js.
// Guarda las opciones en chrome.storage
const saveOptions = () => {
// 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
chrome.storage.sync.set(
{ favoriteColor: color, likesColor: 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 de la caja de selección y el checkbox usando las preferencias
// almacenadas en chrome.storage
const restoreOptions = () => {
chrome.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
// Establece los valores obtenidos en los elementos del formulario
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
}
);
};
// Añade un evento para restaurar las opciones cuando el contenido del documento se ha cargado
document.addEventListener('DOMContentLoaded', restoreOptions);
// Añade un evento para guardar las opciones cuando se hace clic en el botón de guardar
document.getElementById('save').addEventListener('click', saveOptions);Antes de usarlo debes primero añadir el permiso en el manifesto.
"permissions": [
"activeTab",
"scripting",
"storage"
]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.
Además, la comunicación desde nuestro popup principal se realiza de manera similar, utilizando la API de Storage para obtener los datos y aplicarlos según sea necesario. Por ejemplo, en nuestro caso, podemos cambiar el `backgroundColor` del formulario. Modifiquemos el archivo `popup.js` para lograr esto.
const restoreOptions = () => {
chrome.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
console.log(items.favoriteColor);
document.querySelector(".login-container").style.backgroundColor = items.favoriteColor;
}
);
};
document.addEventListener('DOMContentLoaded', restoreOptions);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 una ventana emergente para dirigir al usuario a la página de opciones.
Código en popup.html:
<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>Código en popup.js:
document.querySelector('#go-to-options').addEventListener('click', function() {
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage(); // Abre la página de opciones si es compatible
} else {
window.open(chrome.runtime.getURL('options.html')); // Fallback para versiones anteriores de Chrome
}
});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.
Además, la comunicación desde nuestro popup principal se realiza de manera similar, utilizando la API de Storage para obtener los datos y aplicarlos según sea necesario. Por ejemplo, en nuestro caso, podemos cambiar el backgroundColor del formulario. Modifiquemos el archivo popup.js para lograr esto.
Código en popup.js modificado para cambiar el backgroundColor:
document.addEventListener('DOMContentLoaded', function() {
// Cambiar el backgroundColor del formulario basado en la configuración guardada
chrome.storage.sync.get('favoriteColor', function(data) {
document.body.style.backgroundColor = data.favoriteColor || 'white';
});
// Evento para abrir la página de opciones
document.querySelector('#go-to-options').addEventListener('click', function() {
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
});
Este código se asegura de que el fondo del formulario cambie al color preferido del usuario almacenado en chrome.storage y proporciona un vínculo directo a la página de opciones desde el popup.
Conclusión
Este post te ha mostrado cómo añadir una página de opciones a tu extensión. Elegir el tipo adecuado de página de opciones depende de la complejidad y la cantidad de configuraciones que necesita tu extensión. Las opciones incorporadas son ideales para configuraciones rápidas y sencillas, mientras que las opciones de página completa son mejores para configuraciones más detalladas y complejas. Siguiendo estos pasos, estarás mejor preparado para crear tu proyecto.
Espero que hayas encontrado útil esta guía. ¡No olvides suscribirte para más contenido y seguir mejorando tus habilidades de desarrollo!
Sebastian Gomez
Creador de contenido principalmente acerca de tecnología.