Así como las extensiones permiten a los usuarios personalizar el navegador Chrome, la página de opciones permite personalizar la extensión. Usa opciones para habilitar funciones y permitir que los usuarios elijan qué funcionalidad es relevante para sus necesidades.
Cómo ubicar la página de opciones
Los usuarios pueden acceder a la página de opciones a través de un vínculo directo o haciendo clic con el botón derecho en el ícono de la extensión en la barra de herramientas y, luego, seleccionando opciones. Además, los usuarios pueden navegar a la página de opciones. Para ello, primero deben abrir chrome://extensions, buscar 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 un ejemplo de una página de opciones:
options.html:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
<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>
A continuación, se muestra un ejemplo de secuencia de comandos de opciones. Guárdalo en la misma carpeta que options.html.
Esto guarda las opciones preferidas del usuario en todos los dispositivos con la API de storage.sync.
options.js:
// Saves options to browser.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
browser.storage.sync.set(
{ favoriteColor: color, likesColor: likesColor },
() => {
// Update status to let user know options were saved.
const status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(() => {
status.textContent = '';
}, 750);
}
);
};
// Restores select box and checkbox state using the preferences
// stored in browser.storage.
const restoreOptions = () => {
browser.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
}
);
};
document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);
Por último, agrega el permiso "storage" al archivo de manifiesto de la extensión:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
Cómo declarar el comportamiento de la página de opciones
Hay dos tipos de páginas de opciones de extensiones: página completa y incorporada. El tipo de página de opciones se determina según cómo se declara en el manifiesto.
Opciones de página completa
Se muestra una página de opciones de página completa en una pestaña nueva. Registra el archivo HTML de opciones en el manifiesto en el campo "options_page".
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Opciones de incorporación
Una página de opciones incorporadas permite que los usuarios ajusten las opciones de la 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 false.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(string)- Especifica la ruta de acceso a la página de opciones, relativa a la raíz de la extensión.
open_in_tab(booleano)- Indica si la página de opciones de la extensión se abrirá en una pestaña nueva. Si se configura como
false, la página de opciones de la extensión se incorpora enchrome://extensionsen lugar de abrirse en una pestaña nueva.
Considera las diferencias
Las páginas de opciones incorporadas dentro de chrome://extensions tienen diferencias sutiles de comportamiento con respecto a las páginas de opciones en pestañas.
Vínculo a la página de opciones
Una extensión puede vincularse directamente a la página de opciones llamando a browser.runtime.openOptionsPage(). Por ejemplo, se puede agregar a una ventana emergente:
popup.html:
<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>
popup.js:
document.querySelector('#go-to-options').addEventListener('click', function() {
if (browser.runtime.openOptionsPage) {
browser.runtime.openOptionsPage();
} else {
window.open(browser.runtime.getURL('options.html'));
}
});
API de Tabs
Como el código de las opciones incorporadas no se aloja en una pestaña, no se puede usar la API de Tabs.
En su lugar, usa runtime.connect() y runtime.sendMessage() 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 en función del contenido de la página. Sin embargo, es posible que la caja incorporada no encuentre un buen tamaño 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 y asegúrate de que la página incorporada encuentre un tamaño adecuado.