Extensiones Chrome
Las extensiones son características y funcionalidades adicionales que puedes agregar fácilmente a Google Chrome. Usar extensiones te permite personalizar Google Chrome con las funciones que quieras y mantener el navegador libre de elementos que no vas a utilizar.
En este tutorial te enseñare como crear una extensión Chorme paso a paso. La extesion que vamos a crear permite injectar codigo JavaScritp en una pagina.
Paso 1
Vamos a crear una carpeta, ponle el nombre de tu extensión, luego dentro de ella creamos un archivo que llamaremos manifest.json. este archivo JSON contiene la configuracion de nuestra extension:
Paso 1
Vamos a crear una carpeta, ponle el nombre de tu extensión, luego dentro de ella creamos un archivo que llamaremos manifest.json. este archivo JSON contiene la configuracion de nuestra extension:
{
"manifest_version": 2,
"name": "Robot Sigmin",
"version": "1.0",
"description": "Robot Sigmin....blabalabla",
"author": "Jose Luis Garcia Hernandez",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"notifications",
"tabs",
"<all_urls>"
]
}
la opción manifest_version hace referencia a la versión del archivo manifest, las opciones name, version, descripcion y autor son todas especificaciones de la extensión.
La opcion browser_action contiene la ruta del icono de la aplicación, y el popup que muestra la aplicación al presionar el boton.
La opción backgroud contiene los elementos que se ejecutan por debajo de la extensión, en este caso un javascript, también tiene la opción de persistencia desactivada.
La opción permissions contiene la configuración de los permisos de la aplicación, en este caso tiene acceso a las notificaciones, acceder a los tab y ingresar a todas las url's.
La opcion browser_action contiene la ruta del icono de la aplicación, y el popup que muestra la aplicación al presionar el boton.
La opción backgroud contiene los elementos que se ejecutan por debajo de la extensión, en este caso un javascript, también tiene la opción de persistencia desactivada.
La opción permissions contiene la configuración de los permisos de la aplicación, en este caso tiene acceso a las notificaciones, acceder a los tab y ingresar a todas las url's.
Para ver todas las opciones de configuración del archivo visita: https://developer.chrome.com/extensions/manifest
Paso 2
Ahora crearemos un archivo popup.html donde estará la capa gráfica de nuestra extensión:
<html>
<head>
<script src="popup.js"></script>
</head>
<body> <table style="width: 300px;">
<tr>
<td><button id="login" type="button">Login</button></td>
<td><button id="todo" type="button">Todo</button></td>
<td><button id="form1" type="button">Form1</button></td>
<td><button id="form2" type="button">Form2</button></td>
<td><button id="form3" type="button">Form3</button></td>
<td><button id="config" type="button">Config</button></td>
</tr>
</table>
</body>
</html>
Paso 3
Ahora crearemos nuestro archivo popup.js, que se encargara de agregar los eventos de nuestra aplicación
function showConfig() {
chrome.tabs.create({'url': "http://www.sigmin.com.co"});
}
function llenarLogin(){
chrome.tabs.executeScript({file: 'inject.js'});
}
function llenarForm1(){
//code
}
function llenarForm2(){
//code
}
function llenarForm3(){
//code
}
function init() {
document.querySelector('#config').addEventListener('click', showConfig);
document.querySelector('#login').addEventListener('click', llenarLogin);
document.querySelector('#form1').addEventListener('click', llenarForm1);
document.querySelector('#form2').addEventListener('click', llenarForm2);
document.querySelector('#form3').addEventListener('click', llenarForm3);
}
document.addEventListener('DOMContentLoaded', init);
Para crear los eventos de nuestros controles se debe usar la función DOMContentLoaded, esta es una restriccion que exijen las extenciones, ademas no se permite interpretar codigo javascript directamente desde el archivo, para poder ejecutarlo se debe usar la funcion chrome.tabs.executeScript y incluir el codigo o el archivo javascript. para ver todas las limitaciones ingresa a: https://developer.chrome.com/extensions/content_scripts
Paso 3. creamos dos archivos inject.js donde esta el codigo javascript que deseamos ejecutar, veamos:
//inject.js
document.getElementById('id_var1').value = '9';
document.getElementById('id_var2').value = '9005153680';
document.getElementById('pwd').value = '12201404253908';document.getElementById('btn').click();Este codigo obtiene los elementos de la pagina les asigna un valor y a continuación presiona el un botón.
Paso 4
agregamos el archivo background.js, recordamos que este script se ejecutara por debajo del navegador, en este caso podemos dejarlo vació, pero también podemos agregarle un evento, veamos:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: 'inject2.js'});
});
En este caso se ejecutara el script cuando el usuario presione el boton de la extension.
Paso 5
Recuerda incluir el icono y todos los subscripts que vas a utilizar en la carpeta de la extensión. luego vamos a nuestro navegador Chrome>>Herramientes>>Extensiones>>Cargar Extensiones Descomprimidas y seleccionamos la carpeta de nuestra extensión. finalmente obtenemos algo así:
Descargar Extension con código adicional
Comentarios
Publicar un comentario