Tutorial desarrollo de extensiones Chrome (2ª parte)

Tutorial desarrollo de extensiones Chrome (2ª parte)

Después de la primera parte del tutorial de extensiones Chrome voy a continuar añadiendo un poco más de funcionalidad a la extensión de la entrega anterior para mostrar más cosas que podemos hacer con la API de extensiones de chrome. El código completo de la extensión se puede consultar en mi github. Y también se puede instalar la extensión desde la Chrome Store.   En la entrega anterior expliqué cómo hacer una extensión para añadir un contador de letras en el Gmail. Ahora vamos a guardar estadísticas de las letras escritas cada dia y mostraremos en un popup una gráfica con esa información. Para guardar las estadísticas usaremos la API chrome.storage y para acceder a ella no podemos hacerlo desde código inyectado en gmail.com por lo que habrá que hacerlo desde un proceso asociado a la extensión. Para ello usaremos el “background” que es un proceso que se arranca con el navegador y se ejecuta en segundo plano controlando los eventos de la extensión. Para ello definiremos en el manifest el script que vamos a usar como background que será el background.js En el manifest también definiremos el popup de la extensión con “browser action”, aquí se declara el icono que aparecerá en la barra y el html que se ejecutará al hacer click en el icono.   manifest.json { "name": "Gmail Letter Counter", "manifest_version": 2, "version": "2.0.6", "short_name": "Gmail Letter Counter", "icons": { "48": "img/gmail.png", "128": "img/gmail128.png" }, "background": { "scripts": ["js/background.js"] }, "description": "Gmail Letter Counter by Oscapps", "content_scripts": [ { "matches": ["https://mail.google.com/*"], "js": ["jquery/jquery-2.0.3.min.js","js/inject.js"], "css": ["css/inject.css"] } ], "permissions": [ "storage" ], "browser_action": { "default_title": "Tutorial Chrome", "default_icon": "img/gmail.png",...
Nueva Extensión Chrome “New Tab Manager”

Nueva Extensión Chrome “New Tab Manager”

Recientemente publiqué una nueva extensión de Chrome que aprovecho para anunciar aquí junto a su código y una pequeña explicación por si a alguien le interesa. El código está en mi Github. Y la extensión se puede instalar desde la Chrome Store.   La extensión sirve para administrar extensiones de tipo “Nueva Página”. Al abrir una nueva pestaña en Chrome se muestra por defecto la siguiente página con accesos directos a las webs más visitadas y el buscador de google. Además se puede acceder a las aplicaciones de Chrome instaladas.   Hay muchas extensiones para modificar esta pestaña y usar otra con otras funcionalidades que nos guste más. Algunas son muy populares como Speed Dial o Earth View from Google Maps. El problema es que lógicamente sólo puedes usar una de estas extensiones a la vez y si quieres probar varias tienes que ir desactivando y activando extensiones con el administrador de extensiones. Y si estás atado a una extensión en concreto (como me pasa a mi con speed dial) no puedes usar ninguna más. La extensión New Tab Manager soluciona todo esto ya que en su página de configuración sirve para administrar extensiones de nueva pestaña, facilitando la prueba de este tipo de extensiones y además se puede asignar una de ellas al icono de la extensión para usar dos al mismo tiempo. En la página de configuración se muestran 128 extensiones (actualmente, se irán añadiendo más) permitiendo realizar las siguientes acciones: Se pueden instalar y desinstalar extensiones y activar y desactivar las instaladas. La nueva pestaña por defecto será una de las que esté activa mostrándose en color verde. Las...
Tutorial desarrollo de extensiones Chrome (1ª parte)

Tutorial desarrollo de extensiones Chrome (1ª parte)

En los últimos años las extensiones de navegador han ganado mucha popularidad, y  algunas incluso se han hecho imprescindibles en nuestro uso diario de internet. De echo a menudo nos hacen ser más fieles a un navegador por ser el que tiene las extensiones que más usamos. Aunque todos los navegadores modernos tienen extensiones, el navegador que a mi parecer tiene más y mejores es Chrome.  De cara al desarrollo de extensiones no tengo ninguna duda que el mejor es Chrome, tiene la mejor API y el mejor sistema de permisos y de publicación en la Store. El desarrollo para Firefox puede llegar a ser bastante más complicado  y la publicación en su store es una auténtica pesadilla de varias semanas sólo comparable a la de publicar una app de iOs en Itunes.   Comienzo pues una serie de tutoriales para introducirse en el apasionante mundo del desarrollo de extensiones de Chrome. Quizás más adelante haga la misma extensión de ejemplo para Firefox y también alguna app de chrome que tienen bastantes similitudes con las extensiones. Para hacer extensiones se usa la misma tecnologia que el frontend de cualquier web: HTML, CSS y javascript. Además tiene una gran ventaja que a mi personalmente me encanta: te olvidas totalmente del crossbrowsing, o sea que puedes concentrarte en programar para webkit  (además actualizado), y sobre todo ¡olvidarte del p%$& Explorer!. Olvidate de polyfills, modernizr y demás historias, aquí puedes usar todo lo que se te ocurra que te va a funcionar  (bueno o casi todo).   Y sobre todo, tienes la potente API de chrome que permite interactuar con el navegador para todo lo...