Tip: Creando nuestra propia barra de scroll para Chrome (Chrome extension)

Mmm,  ayer me acoste a las 4 de la mañana intentando crear una extension para Chrome que nos permitiera ajustar dinamicamente los valores del color utilizado y del ancho de la barra de scroll para crear nuestrar propia barra personalizada al estilo de Thin Scroll Bar. Avances tengo, no lo voy a negar, pero no acaba de funcionar como yo quisiera, asi que seguire depurando.

Como algun@ de vosotros si que me ha pedido que les enviara mi modificacion, aqui os voy a comentar brevemente como crear vuestra propia barra de scroll, con el tamaño que querais y color deseado.

Lo primero:

- crea una carpeta en tu escritorio y la llamas “MI SCROLLBAR” o el nombre que quieras, ahi es donde dejaremos los ficheros de Chrome para crear la extensión.

Ahora te metes en esa carpeta y creas un fichero llamado “manifest.json” con el siguiente contenido:

{
   "content_scripts": [ {
       "css":["mycss.css"],
      "matches": [ "http://*/*", "https://*/*" ]
   } ],
   "description": "My Scroll Bars",
    "name": "My Scroll Bars",
    "version": "1.0",
    "all_frames": "true",
    "run_at": "document_start"
}

Este es el fichero que contiene el manifiesto de nuestra extension, es bastante fácil de entender. En “name” y “description” estás colocando el nombre y la descripcion y tal cual es como aparecera en la ventana de extensiones de Chrome. Aqui la parte importante es “css” y “matches”. css indicara el fichero “.css” que quieres cargar y “matches” sobre que urls quieres aplicar esa carga. Si te fijas, en este caso serian todas aquellas que empiecen por http y https, lo que viene a significar “todas”.

Aparte de este fichero, deberas crear en el directorio un fichero llamado “mycss.css” con un contenido inicial al siguiente:


::-webkit-scrollbar
{
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track-piece
{
    background-color: #ffffff;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical
{
    height: 3px;
    background-color: #2ad;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal
{
    width: 3px;
    background-color: #2ad;
    -webkit-border-radius: 3px;
}

Este como habrás adivinado es la hoja de estilos que crea las barras de scroll bar.
Si las quieres de un tamaño de 6 pixeles y de color azulado Elementary. deja este fichero tal cual.
En caso de que quieras unas barras de scroll de mayor tamaño o de otro color, entonces editalo y modifica las entradas:

- width y height: Indicando el tamaño en pixeles (px) deseado.
– y el valor de background-color. Por ejemplo pon: background-color: #fea (soy un cachondo mental y siempre uso este color “fea” pero no me preguntes porque ^^)

Bien, resumimos. tenemos el directorio creado, y dentro ya hemos metido los ficheros “manifest.json” y “mycss.css”, tenemos por tanto ya todo lo necesario para generar la extensión.

Abrimos Chrome y en la barra de direcciones ponemos:


chrome://extensions/

Pulsamos entonces sobre el boton “Modo desarrollador” y se habran habilitado 3 opciones:

- Cargar extension descomprimida, Empaquetar extensión y Actualizar extensiones.

Si eliges la primera opción (Cargar extensión descomprimida) tienes que navegar hasta la carpeta donde has creado estos 2 ficheros y tras seleccionarla ya se te habrá habilitado la extensión. Enhorabuena, ya tienes tus scrollbars personalizadas.

Si en cambio quieres crear un fichero .crx para poder distribuir, por ejemplo, enviandoselo a tus amigotes. Entonces elige “Empaquetar extensión”, navegas hasta la carpeta donde has creado los 2 ficheros anteriores y al Aceptar, se crea un fichero con extensión crx que contiene tu extensión. Si ese fichero lo arrastras sobre una ventana con Chrome ya automaticamente (uy!! como me suena esta palabra) se instala la extensión y dispones de tus barras de scrollbars personalizadas.

Y poco más.

6 Responses to “Tip: Creando nuestra propia barra de scroll para Chrome (Chrome extension)”


  1. 1 Lobo mayo 26, 2011 en 9:29 pm

    La verdad que esta barra de scroll queda muy chula si usas Natty (es similar al Ayatana) y ahora ya le puedes poner el color que más te de la gana.

  2. 3 Cesar mayo 26, 2011 en 10:03 pm

    Juas muy buena tu información para crear la barra esta, porque no te creas un repositorio en github.com para que vayas creandola a tu gusto talvez alguien te echa una mano.

  3. 4 Josep junio 5, 2011 en 9:04 pm

    Está muy bien, pero a mí no me funciona con los marcos iframe o frameset que incluyen algunos sitios web. Sin ir más lejos, al cargar GMail me desaparece completamente la barra de scroll. :-(

  4. 5 Josep junio 7, 2011 en 11:06 pm

    Me autorrespondo, que creo que ya lo tengo:

    {
    “content_scripts”: [ {
    “css”:[“mycss.css”],
    “matches”: [“”],
    “all_frames”: true
    } ],
    “description”: “Scrollbar”,
    “name”: “Scrollbar”,
    “version”: “1.0”,
    “all_frames”: “true”,
    “run_at”: “document_start”
    }


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s





The next version of Ubuntu is coming soon


¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map
mayo 2011
L M X J V S D
« abr   jun »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Blog Stats

  • 27,095,954 hits

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.047 seguidores

A %d blogueros les gusta esto: