La interfaz de usuario de la extensión debe ser mínima y útil. Al igual que las extensiones en sí, La IU debe personalizar o mejorar la experiencia de navegación sin distracciones.
En esta guía, se exploran las funciones obligatorias y opcionales de la interfaz de usuario. Úsala para comprender cómo y cuándo para implementar diferentes elementos de la IU dentro de una extensión.
Activar la extensión en todas las páginas
Usa browser_action cuando las funciones de una extensión son funcionales en la mayoría de las situaciones.
Acción del navegador de registro
El campo "browser_action" está registrado en el manifiesto.
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
Si declaras "browser_action", se mantendrá el ícono coloreado, lo que indica que la extensión está disponible para
usuarios.
Agrega una insignia
Las insignias muestran un banner de color con hasta cuatro caracteres en la parte superior del ícono del navegador. Solo pueden
lo usarán las extensiones que declaren "browser_action" en su manifiesto.
Usa insignias para indicar el estado de la extensión. El ejemplo Evento de agua para beber muestra una la insignia con la palabra “ACTIVADA” para mostrarle al usuario que estableció una alarma correctamente y no muestra nada cuando la la extensión está inactiva.
Para establecer el texto de la insignia, llama a chrome.browserAction.setBadgeText y el color del banner.
llamando a chrome.browserAction.setBadgeBackgroundColor
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
Activar la extensión en páginas seleccionadas
Usa page_action cuando las funciones de una extensión solo estén disponibles en circunstancias definidas.
Cómo declarar una acción de la página
El campo "page_action" está registrado en el manifiesto.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
Si declaras "page_action", el ícono solo se coloreará cuando la extensión esté disponible para los usuarios.
De lo contrario, se mostrará en escala de grises.
Define reglas para activar la extensión
Define reglas para determinar cuándo se puede usar la extensión llamando a chrome.declarativeContent en el
Objeto de escucha de runtime.onInstalled en una secuencia de comandos en segundo plano. Ejemplo de Acción de la página por URL
La extensión establece una condición según la cual la URL debe incluir una "g". Si se cumple la condición, la extensión
llama a declarativeContent.ShowPageAction().
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains a 'g' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'g' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
Habilitar o inhabilitar la extensión
Las extensiones que usan "page_action" se pueden activar e inhabilitar de forma dinámica llamando a
pageAction.show y pageAction.hide.
La extensión de muestra Mappy analiza una página web en busca de una dirección y muestra su ubicación en un archivo
mapa de la ventana emergente. Como la extensión depende del contenido de la página, no puede declarar reglas
para predecir qué páginas serán relevantes. En cambio, si se encuentra una dirección en una página a la que llama
pageAction.show para colorear el ícono y señalar que la extensión se puede usar en esa pestaña
chrome.runtime.onMessage.addListener(function(req, sender) {
chrome.storage.local.set({'address': req.address})
chrome.pageAction.show(sender.tab.id);
chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});
Proporciona los íconos de extensión
Las extensiones requieren al menos un ícono para representarla. Proporciona los iconos en formato PNG de la mejor manera resultados visuales, aunque cualquier formato compatible con WebKit, incluidos BMP, GIF, ICO y JPEG, es aceptada.
Designa íconos de la barra de herramientas
Los íconos específicos de la barra de herramientas se registran en el campo "default_icon" en
browser_action o page_action en el manifiesto. Incluir varios tamaños es
y se animará a escalar
para el espacio de 16 dip. Como mínimo, se recomiendan los tamaños de 16 x 16 y 32 x 32.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
Todos los íconos deben ser cuadrados o pueden estar distorsionados. Si no se proporcionan íconos, Chrome agregará un una genérica a la barra de herramientas.
Cómo crear y registrar íconos adicionales
Incluye iconos adicionales en los siguientes tamaños para usos fuera de la barra de herramientas.
| Tamaño del ícono | Uso de íconos |
|---|---|
| 16x16 | ícono de página en las páginas de la extensión |
| 32 × 32 | Las computadoras con Windows suelen requerir este tamaño. Proporcionar esta opción evitará que la distorsión de tamaño reduzca la opción 48 x 48. |
| 48 × 48 | se muestra en la página de administración de extensiones. |
| 128 × 128 | muestra durante la instalación y en Chrome Web Store |
Registra los íconos del manifiesto en el campo "icons".
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
Funciones adicionales de la IU
Ventana emergente
Una ventana emergente es un archivo HTML que se muestra en una ventana especial cuando el usuario hace clic en el ícono de la barra de herramientas. Una ventana emergente funciona de forma muy similar a una página web: puede contener enlaces a hojas de estilo y etiquetas de script, pero no admite JavaScript intercalado.
La ventana emergente de ejemplo Drink Water Event muestra las opciones disponibles para el temporizador. Los usuarios establecieron una alarma antes de la(s) haciendo clic en uno de los botones proporcionados.
<html>
<head>
<title>Water Popup</title>
</head>
<body>
<img src='./stay_hydrated.png' id='hydrateImage'>
<button id='sampleSecond' value='0.1'>Sample Second</button>
<button id='15min' value='15'>15 Minutes</button>
<button id='30min' value='30'>30 Minutes</button>
<button id='cancelAlarm'>Cancel Alarm</button>
<script src="popup.js"></script>
</body>
</html>
La ventana emergente se puede registrar en el manifiesto, en la acción del navegador o la acción de la página.
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
Las ventanas emergentes también se pueden configurar de forma dinámica llamando a browserAction.setPopup.
pageAction.setPopup
chrome.storage.local.get('signed_in', function(data) {
if (data.signed_in) {
chrome.browserAction.setPopup({popup: 'popup.html'});
} else {
chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
}
});
Información sobre la herramienta
Utiliza los cuadros de información para brindar descripciones o instrucciones breves a los usuarios cuando coloquen el cursor sobre el navegador ícono.
La información sobre la herramienta se registra en el campo "default_title" browser_action o page_action
en el manifiesto.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
La información también se puede configurar o actualizar llamando a browserAction.setTitle.
pageAction.setTitle
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
Las cadenas de configuración regional especializadas se implementan con internacionalización. Crea directorios para
mensajes específicos de lenguaje interno dentro de una carpeta llamada _locales, de la siguiente manera:
_locales/en/messages.json_locales/es/messages.json
Da formato a los mensajes en el messages.json de cada idioma.
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
Incluye el nombre del mensaje en el campo de información en lugar del mensaje para habilitar la localización.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
Cuadro multifunción
Los usuarios pueden invocar la funcionalidad de las extensiones con el cuadro multifunción. Incluye el campo "omnibox" en
el manifiesto y designar una palabra clave. La extensión de muestra de la Búsqueda de pestaña nueva del cuadro multifunción usa "nt". como
la palabra clave.
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
Cuando el usuario escribe "nt" en el cuadro multifunción, activa la extensión. Para indicarlo al usuario, usa una escala de grises para el ícono de 16 x 16 proporcionado y lo incluye en el cuadro multifunción junto al nombre de la extensión.
La extensión detecta el evento omnibox.onInputEntered. Una vez activado,
abre una pestaña nueva con una Búsqueda de Google de la entrada del usuario.
chrome.omnibox.onInputEntered.addListener(function(text) {
// Encode user input for special characters , / ? : @ & = + $ #
var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
chrome.tabs.create({ url: newURL });
});
Menú contextual
Para agregar opciones nuevas del menú contextual, otorga el permiso "contextMenus" en el manifiesto.
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
El ícono de 16 x 16 se muestra junto a la nueva entrada del menú.
Crea un menú contextual llamando a contextMenus.create en la secuencia de comandos en segundo plano. Esta
se debe realizar en el evento de objeto de escucha runtime.onInstalled.
chrome.runtime.onInstalled.addListener(function() {
for (let key of Object.keys(kLocales)) {
chrome.contextMenus.create({
id: key,
title: kLocales[key],
type: 'normal',
contexts: ['selection'],
});
}
});
const kLocales = {
'com.au': 'Australia',
'com.br': 'Brazil',
'ca': 'Canada',
'cn': 'China',
'fr': 'France',
'it': 'Italy',
'co.in': 'India',
'co.jp': 'Japan',
'com.ms': 'Mexico',
'ru': 'Russia',
'co.za': 'South Africa',
'co.uk': 'United Kingdom'
};
El ejemplo del menú contextual de la Búsqueda de Google global crea varias opciones de la lista en locales.js . Cuando una extensión contiene más de un menú contextual, Google Chrome las contrae automáticamente en un único menú superior.
Comandos
Las extensiones pueden definir comandos específicos y vincularlos a una combinación de teclas. Registrar una o
más comandos en el manifiesto en el campo "commands".
{
"name": "Tab Flipper",
...
"commands": {
"flip-tabs-forward": {
"suggested_key": {
"default": "Ctrl+Shift+Right",
"mac": "Command+Shift+Right"
},
"description": "Flip tabs forward"
},
"flip-tabs-backwards": {
"suggested_key": {
"default": "Ctrl+Shift+Left",
"mac": "Command+Shift+Left"
},
"description": "Flip tabs backwards"
}
}
...
}
Los comandos se pueden usar para proporcionar combinaciones de teclas nuevas o alternativas del navegador. El ejemplo de Tabulador de pestaña
La extensión escucha el evento commands.onCommand en la secuencia de comandos en segundo plano y define
para cada combinación registrada.
chrome.commands.onCommand.addListener(function(command) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
// Sort tabs according to their index in the window.
tabs.sort((a, b) => { return a.index < b.index; });
let activeIndex = tabs.findIndex((tab) => { return tab.active; });
let lastTab = tabs.length - 1;
let newIndex = -1;
if (command === 'flip-tabs-forward')
newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
else // 'flip-tabs-backwards'
newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
});
});
Los comandos también pueden crear una vinculación de claves que funcione de manera especial con su extensión. El ejemplo de Hello Extensions muestra un comando para abrir la ventana emergente.
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"manifest_version": 2,
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
Como la extensión define un browser_action, puede especificar "execute_browser_action" en
los comandos para abrir el archivo emergente sin incluir una secuencia de comandos en segundo plano. Si se utiliza
page_action. Se puede reemplazar por "execute_page_action". Navegador y extensión
se pueden usar en la misma extensión.
Anular páginas
Una extensión puede anular y reemplazar la página web Historial, Pestaña nueva o Favoritos con una archivo HTML personalizado. Al igual que una ventana emergente, puede incluir estilo y lógica especializadas, pero no permite JavaScript intercalado. Una sola extensión se limita a anular solo una de las tres páginas posibles.
Registra una página de anulación en el manifiesto en el campo "chrome_url_overrides".
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
El campo "newtab" debe reemplazarse por "bookmarks" o "history" cuando se anulan
páginas.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>