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",...