Cómo diseñar la interfaz de usuario

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.

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>