Hay varios puntos que debemos seguir para crear estas extensiones, tratare de ser breve y que podamos lograr nuestro objetivo, el ejemplo que plateo es crear una barra de búsqueda, que al escribir algo, abra una pestaña nueva con la búsqueda en nuestro glorioso blog de C# AL EXTREMO. Es algo muy simple a nuestro parecer pero sentara las bases para que puedas hacer lo que quieras con estas extensiones.
Cabe mencionar que puedes usar el editor de código que quieras, desde notepad hasta visual estudio si te apetece. Ahora sin mas chachara y sin mas cuento, comencemos:
- Comenzaremos creando una carpeta en la que guardaremos los archivos de nuestra extensión y el primer archivo que guardaremos sera uno llamado manifest.json, el cual crearemos y le agregaremos el siguiente código:
{ "manifest_version": 2, "name": "Búsqueda en C# AL EXTREMO", "short_name": "Busquedacsharpalextremo", "description": "Most", "version": "0.0.1", "minimum_chrome_version": "38", "permissions": ["topSites"], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["<all_urls>"], "css": ["assets/bootstrap.min.css"], "js": ["assets/jquery.js", "main.js"], "run_at": "document_start" } ] }
Vale recalcar que la información que se ingresa aquí es muy sencilla, tales como el nombre, la versión de la extensión y la mínima versión del chrome. En nuestra carpeta también debemos agregar el icono que usara nuestra extensión, este debe ser de 19px X 19px y es el que llamaremos icon.png. El resto de información agréguenla tal cual esta en el ejemplo y luego iremos desenmarañando el archivo. - POPUP: Ahora explicaremos esta session del manifest, y es la que se encarga de que salga una ventana emergente al presionar click sobre la extension:
"browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" },
Crearemos un archivo llamado popup.html y pegaremos el siguiente fragmento de código:
<!doctype html> <html> <head> <title>Buscar en c sharp al extremo</title> <link rel="stylesheet" href="assets/bootstrap.min.css"> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <script src="assets/jquery.js"></script> <script src="main.js"></script> <style> body { overflow: hidden; margin: 0px; padding: 0px; width: 400px; height: 35px; } .body { padding: 15px; } .footer { background-color: #f0f0f0; color: #636363; font-size: 13px; margin-top: 9px; padding: 10px; text-align: center; } .footer img { margin-right: 20px; width: 90px; text-align: left; } </style> </head> <body> <div class="row body"> <div class="col-lg-12"> <div class="input-group"> <input type="text" id="txtbuscar" class="form-control" placeholder="Buscar"> <span class="input-group-btn"> <button id="btnbuscar" class="btn btn-primary" type="button">Buscar</button> </span> </div> </div> </div> <div class="row"> <div class="col-lg-12 footer"> <img src="logo.png" /> <small><a href="http://csharpalextremo.blogspot.com.co" target"_blank">http://csharpalextremo.blogspot.com.co</a></small> </div> </div> </body> </html> - Crearemos una carpeta llamada assets en la que estaran nuestros archivos js y css, dentro de esta carpeta guardaremos el archivo css de bootstrap y el js de jquery, los cuales encontraran dentro de los archivos de ejemplo de este proyecto.
En la carpeta raiz, crearemos un archivo llamda main.js y pegaremos el siguiente fragmento de codigo
$(document).ready(function(){ $("#txtbuscar").focus(); $('#txtbuscar').keyup(function(e){ if(e.keyCode == 13) { $("#btnbuscar").click(); } }); $("#btnbuscar").click(function(){ var search = $("#txtbuscar").val(); chrome.tabs.create({ url: "http://csharpalextremo.blogspot.com.co/search?q="+search }); }); });
Instalemos la extensión en tu computador para verificar que todo va bien. Escribe en la barra de navegación chrome://extensions y si está inactivo, activa el modo programador del lado derecho de la página. Aparecerán inmediatamente abajo tres botones, haz clic en el primero Cargar extensión sin empaquetar y navega hasta seleccionar la carpeta donde tienes la extensión que estás desarrollando. Si lo has hecho bien, aparecerá en la parte superior de tu navegador el icono de tu extensión, el cual en estos momentos no hace función alguna. -
Publicar en la tienda de chrome store:
Ahora que tenemos las bases de la aplicacion, seguramente quieres montarlo en la chrome store para que todos puedan descargarla, pues hagamoslo:
Primero, escoge todos los archivos y comprímelos en un zip. Después, ingresa al Dashboard de Google Chrome y sigue los pasos para publicarla, si no te has registrado antes, te pedirá en este momento que lo hagas. Te pedirá información y unos screenshots de tu extensión para una mejor visualización a los usuario, es recomendable llenar toda la información y adjuntar todos los screenshot posibles, esto ayudara a raquear tu app y a que mas usuarios la descarguen.
Ahora que has hecho esta sencilla aplicación para google chrome, puedes comenzar a explorar agregándole mas código al jquery o al html, puedes agregar los estilos que quieras y disfrutar las maravillas que te ofrece internet.
Recomiendo que recibes la documentación oficial de chrome store y que no le pongas limites a tu imaginación ;).
A continuación les dejo el videotutorial, suscribanse al canal para recibir mas contenido como este:
Si quieres consultar el codigo, puedes descargar todo el html, css, js y todo el fuente usado en este proyecto desde aqui:
Espero que lo disfruten, compartan y comenten. ;)
"Si se puede imaginar... se puede programar."
No hay comentarios:
Publicar un comentario