signo - ¿Cómo hacer una barra de herramientas en Google Chrome?
¿cómo hacer que aparezca la barra de herramientas en google chrome (3)
Estoy explorando las extensiones de Google Chrome por primera vez. Me gustaría crear lo que aparece como una barra de herramientas en la parte superior de la página cuando haces clic en el ícono de la extensión, muy parecido a la barra de herramientas de StumbleUpon.
No puedo ver cómo hacer esto. Los ejemplos muestran principalmente un popup.html, y no una barra de herramientas fija.
Aunque esta respuesta muestra dos formas de crear una barra de herramientas en Chrome, recomiendo usar la acción de página o las insignias de acción del navegador . Estos no ocupan tanto espacio como barras de herramientas, y también se pueden usar para mostrar un panel al hacer clic, e incluso obtener permisos de host temporales para interactuar con la página.
Y para aquellos que realmente no necesitan una barra de herramientas, sino una barra lateral, hay una propuesta activa para una API chrome.sidebar . Esta es solo una propuesta, si y cuándo se implementará aún no está escrito en piedra.
La API chrome.infobars
Esta sección solía mostrar una demostración usando la API chrome.infobars . Esta API nunca ha estado en el canal estable y se eliminará ; No lo uses.
Guiones de contenido
La creación de barras de herramientas utilizando secuencias de comandos de contenido es complicada. Debe insertar código en la página e incluso modificar la estructura del documento, lo que podría interrumpir algunas páginas en Internet.
Para crear una barra de herramientas utilizando secuencias de comandos de contenido, se deben seguir los siguientes pasos:
- Ejecute un script de contenido en la página que ejecuta los siguientes dos pasos.
- Inserta la barra de herramientas (
<iframe>- explicado más adelante). - Cambia el contenido de la página.
El paso 1 es fácil, mira mi ejemplo anterior o lee la documentación de las secuencias de comandos de contenido .
Paso 2: inserta la barra de herramientas
Para minimizar los conflictos de estilo y evitar que la página use su barra de herramientas, inserte un iframe. A diferencia del método anterior, no tiene acceso directo a la API de extensión (porque la página incrustada no es una secuencia de comandos de contenido ni una página que se ejecuta en el proceso de la extensión).
Insertar la barra de herramientas:
add-toolbar.js (script de contenido)
var height = ''40px'';
var iframe = document.createElement(''iframe'');
iframe.src = chrome.extension.getURL(''toolbar.html'');
iframe.style.height = height;
iframe.style.width = ''100%'';
iframe.style.position = ''fixed'';
iframe.style.top = ''0'';
iframe.style.left = ''0'';
iframe.style.zIndex = ''938089''; // Some high value
// Etc. Add your own styles if you want to
document.documentElement.appendChild(iframe);
Ahora crea un archivo llamado toolbar.html y toolbar.html a la sección "web_accessible_resources" de tu archivo de manifiesto. Este archivo se usará en el lugar de la barra de herramientas, siéntete libre de hacer cualquier cosa no maligna con él. Solo tenga en cuenta que actúa como una página web normal, literalmente no tiene acceso a ninguna de las API de Chrome.
Paso 3: Cambiando el contenido
Hasta ahora, solo ha agregado un marco a la página. Hay un problema: el contenido de la página está parcialmente oculto. Eso no es muy agradable. Hay varias formas de corregir esto, elijo usar las transformaciones de CSS porque es relativamente fácil de usar y la mayoría de las páginas no usan esta propiedad en el elemento de cuerpo.
// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = ''transform'' in bodyStyle ? ''transform'' : ''webkitTransform'';
bodyStyle[cssTransform] = ''translateY('' + height + '')'';
translateY hace que el cuerpo baje, incluidos los elementos secundarios con position:fixed . Debido a que hemos agregado el iframe al elemento raíz, fuera de la etiqueta <body> , el elemento no se ve afectado.
¡Quiero usar las API de extensión en la barra de herramientas!
Lamentablemente, Chrome trata la página html incrustada como una página de extensión no privilegiada. Solo puede usar algunas de las API de extensión (similar a las secuencias de comandos de contenido).
Otra opción es cargar una página de su servidor, luego ejecutar una secuencia de comandos de contenido en esa página específica. Configure un manifiesto de caché para asegurarse de que su barra de herramientas aún esté disponible si el usuario no está en una red.
Chrome API no tiene ningún widget de barra de herramientas para ayudarte. Debería crear y posicionar manualmente una div en la barra de herramientas en una página. Puede hacerlo utilizando scripts de contenido , que le permiten inyectar javascript y css a las páginas.
Esto le ofrece una extensión de navegador similar a la de una variedad de navegadores, aunque puede limitar la descarga a solo Chrome si lo desea.
Instaladores
Página de instalación general (proporciona un archivo ejecutable que se puede firmar si está en Windows para facilitar el proceso de instalación):
http://crossrider.com/apps/35180/install_page
Instalaciones específicas:
- Firefox: http://crossrider.com/download/ff/35180
- IE: http://crossrider.com/download/ie/35180
- Chrome: http://crossrider.com/download/chrome/35180
- Safari: (funcionará, pero necesita pasar por un proceso con Apple para eso)
Crossrider también facilita la publicación en la tienda Chrome y proporciona una forma fácil de firmar su extensión para descargas ejecutables en Windows.
Información
Aquí están los documentos para la API, es bastante extensa para una solución de navegador cruzado:
En el siguiente código, no estoy poniendo html & css porque hay límites para el número de caracteres para las respuestas. Sin embargo, si se ve bien, puede abrirlo (los de crx son zip, simplemente cambie el nombre de extensión a .zip) para obtener el css y el html en el interior o podemos encontrar la manera de enviárselo. Tenga en cuenta que estoy inyectando el HTML y CSS en la página.
Normalmente escribo css y html, luego minimizo ambos ( http://cssminifier.com/ y http://www.willpeavy.com/minifier/ ), luego tomo el resultado minificado y uso una herramienta de escape de cadenas como http://www.htmlescape.net/stringescape_tool.html para escapar de modo que pueda colocarse en el código de extensión, ya que quiere que sea lo más rápido posible, dado que es una extensión, no una página web, por supuesto.
Por lo tanto, si se ve bien, vaya a crossrider.com, configure una cuenta (es 100% gratis), y pegue estos archivos en los lugares apropiados y coloque el código HTML y CSS minified / escaped que necesita, reemplazando el material en el cssstr y htmlstr en la extensión .js a continuación.
Código
extension.js:
appAPI.ready(function($) {
// Place your code here (you can also define new functions above this scope)
// The $ object is the extension''s jQuery object
// Adds a listener that handle incoming messages
var lid = appAPI.message.addListener(function(msg) {
switch(msg.action) {
case ''SHOWEXAMPLEBAR'':
$(''#examplebar-toolbar'').show();
break;
case ''HIDEEXAMPLEBAR'':
$(''#examplebar-toolbar'').hide();
break;
default:
break;
}
});
// Add toolbar (not included here due to size - be sure it is escaped)
var cssstr = ''/* The CSS of your toolbar */'';
// Add toolbar HTML (not included here due to size - be sure it is escaped)
var htmlstr = ''/x3C!-- the html of your toolbar --/x3E'';
$(''/x3Cstyle/x3E''+cssstr+''/x3C/style/x3E'' + htmlstr).prependTo(''body'');
$(''#examplebar-close'').click(function() {
//Tell the background to change its buttonstate:
$(''#examplebar-toolbar'').hide();
appAPI.message.toBackground({action: "HIDEEXAMPLEBAR"});
});
});
background.js:
// Note: the $ variable that represents the jQuery object is not available
// in the background scope
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon(''button.png'');
// Sets the tooltip for the button
appAPI.browserAction.setTitle(''Bar'');
// Sets the text and background color for the button
if (appAPI.browser.name !== ''safari'') {
appAPI.browserAction.setBadgeText(''bar'');
appAPI.browserAction.setBadgeBackgroundColor([255,0,0,50]);
}else{
// Safari only supports numeric characters
// and has a fixed background color
appAPI.browserAction.setBadgeText(''1234'');
}
// Sets the initial onClick event handler for the button
appAPI.browserAction.onClick(function(){
if (buttonState) {
//Hide the toolbar by notifying the extension code:
appAPI.message.toAllTabs({action: "HIDEEXAMPLEBAR"});
if (appAPI.browser.name !== ''safari'') {
// Sets the text and background color for the button
// using the optional background parameter
appAPI.browserAction.setBadgeText(''helo'', [0,0,255,255]);
// Sets the icon to use for the button.
appAPI.browserAction.setResourceIcon(''button.png'');
} else {
// Safari only supports numeric characters,
// has a fixed background color,
// and can only use the extension''s icon
appAPI.browserAction.setBadgeText(''4321'');
}
} else {
appAPI.message.toAllTabs({action: "SHOWEXAMPLEBAR"});
// Remove the badge from the button
appAPI.browserAction.removeBadge();
if (appAPI.browser.name !== ''safari''){
// Reset the icon for the image
appAPI.browserAction.setResourceIcon(''button.png'');
}
}
// Toggle the state
buttonState = !buttonState;
});
// Adds a listener that handle incoming messages
var lid = appAPI.message.addListener(function(msg) {
switch (msg.action) {
case ''HIDEEXAMPLEBAR'':
buttonState = !buttonState;
break;
default:
break;
}
});
});
Notas
También tenga en cuenta que jQuery está disponible automáticamente en el alcance de la extensión, por lo que puede obtenerlo de forma gratuita junto con las API. Y, si desea inyectar en un iframe, asegúrese de no olvidar habilitar iframes en la configuración.
Para el sitio de asistencia de la comunidad: https://getsatisfaction.com/crossrider
Son muy receptivos y pueden ayudarte cuando tienes problemas.