Así como las extensiones permiten a los usuarios personalizar el navegador Chrome, la página de opciones habilita la personalización de la extensión. Usa opciones para habilitar funciones y permitir que los usuarios elijan qué funcionalidades son relevantes para sus necesidades.
Ubicar la página de opciones
Los usuarios pueden acceder a la página de opciones mediante un vínculo directo o haciendo clic con el botón derecho en el ícono de la extensión ubicado en la barra de herramientas y, luego, seleccionando las opciones. Además, para navegar a la página de opciones, los usuarios deben abrir 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
El siguiente es 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.
Se guardan las opciones preferidas del usuario en todos los dispositivos que usan la API de storage.sync.
options.js:
// Saves options to chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.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 chrome.storage.
const restoreOptions = () => {
chrome.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 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 extensión: página completa e incorporadas. El tipo de página de opciones está determinado por la forma en que se declara en el manifiesto.
Opciones de página completa
Se mostrará 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 incorporadas
La página de opciones incorporadas permite que los usuarios ajusten las opciones de extensiones 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, en relación con la raíz de la extensión.
open_in_tab(boolean)- Indica si la página de opciones de la extensión se abrirá en una pestaña nueva. Si la estableces como
false, la página de opciones de la extensión se incorporará enchrome://extensionsen lugar de abrirse en una pestaña nueva.
Considera las diferencias
Las páginas de opciones incorporadas en chrome://extensions tienen diferencias de comportamiento sutiles con respecto a las páginas de opciones en las 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(). 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 (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
API de pestañas
Debido a que el código de opciones incorporados no se aloja en una pestaña, no se puede usar la API de pestañas.
En su lugar, usa runtime.connect() y runtime.sendMessage() 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.