JQuery y JSON en extensiones Chrome

Conocimientos previos

• Saber crear extensiones en Chrome, si no sabes te recomiendo leer mi anterior post
• Tener algún conocimiento sobre JQuery y JSON

JQuery se ha convertido en una herramienta indispensable a la hora de programar JavaScript en paginas web, esto no ajeno a las extensiones en chorme, así como el uso de JSON. en este tutorial les mostrare comousar JQuery en nuestras extensiones y también a cargar recursos.  para poder usar JQuery debemos incluir el script en el archivo manifiest.json, se debe agregar la ruta en la opción backgraund y en el content_scripts si queremos usarlo en el código inyectado.

{
 "manifest_version": 2,
 "name": "Robot Sigmin Paso 1",
 "version": "1.0",
 "description": "descripcion de mi extencion",

 "author": "Jose Luis Garcia Hernandez",  

 "browser_action": {
  "default_icon": "icon.png" 
 },

 "background": {
  "scripts": ["jquery-1.11.1.min.js", "background.js"],
  "persistent": false
 },

 "content_scripts": [
  {  
   "matches": [ "http://*/*", "https://*/*"],
   "js": ["jquery-1.11.1.min.js"]
  }
 ],

 "permissions": [
  "storage",
  "notifications",
  "activeTab",
  "tabs",
                "http://*/*",
  "contentSettings"
 ],
 
 "web_accessible_resources": [    
  "formularios.json"
 ] 
}

como vemos en la opción background, agregamos el archivo del JQuery y después el  backgraund.js donde queremos ejecutar el script.

"background": {
 "scripts": ["jquery-1.11.1.min.js", "background.js"],
 "persistent": false
},
...

Es necesario que los script vallan en ese orden, ya que primero se cargara el JQuery y después el js que queremos utilizar en nuestro brackgraund. si queremos utilizar JQuery en nuestros script de inyección es necesario agregarlo en el tag content_scripts

"content_scripts": [
 {  
  "matches": [ "http://*/*", "https://*/*"],
  "js": ["jquery-1.11.1.min.js"]
 }
],
...

la opción matches es necesaria de lo contrario no la podrás usar el script, ahí especificamos en que paginas queremos usar el script. Ahora si queremos acceder a recursos dentro de nuestra extension debemos usar el tag web_accessible_resources y ingresar la ruta de nuestros recursos, en este caso ponemos el archivo JSON que deseamos usar.

 "web_accessible_resources": [    
  "formularios.json"
 ]
...

ahora veamos nuestro archivo backgraund.js, en este ejemplo el backgraund inyectara código javascript en paginas que abra nuestro navegador (debes especificar la dirección), también tiene un evento onclick para ejecutar un determinado script. Aquí no usaremos JQuery pero lo puedes usar, por ejemplo para cargar el archivo JSON como lo haremos en el código que se inyectara

chrome.tabs.onUpdated.addListener(function(tabId , info, tab) {
    

 if(info.status == "complete"){
   if (tab.url == "https://www.urlPagina.com/") {
    
   chrome.tabs.executeScript({file: 'inject.js'});
 
  }else if(tab.url == "https://www.urlPagina2.com/"){
   chrome.tabs.executeScript({file: 'inject2.js'});
  }
 }
 
 
});

chrome.browserAction.onClicked.addListener(function() {
 
 chrome.tabs.executeScript({file: 'inject.js'});
});

como muestra el código se inyectaran varios javascript, sin embargo solo les mostrare un ejemplo donde usaremos JQuery y cargaremos el JSON, veamos el archivo inject2.js

var datos;
$.getJSON(chrome.extension.getURL('formularios.json'), function(formulario) {

 datos = formulario;
});

usamos una función JQuery para cargar el archivo JSON, al terminar el objecto es convertido y guardado en la variable datos. aquí es importante precisar que se una la función nativa de chrome, la cual permite obtener el recurso de la extensión.: chrome.extension.getURL('formularios.json'). Luego ejecutamos una función click de un botón y agregamos un timer que ejecutara la función fillFieldForm

document.getElementById('btn').click(); 
setTimeout(function(){
  
  fillFieldsForm(2);  
},1500);

function fillFieldsForm(form){
 
 switch(form){
    
  case 2:   

   $('#id_tag').val(datos.form1.codigo);
  break;
 }
}

la función accede a un elemento del DOM y le asigna un valor declarada en el archivo formularios.json:

{
 "login":{
  "j_password":"12201404253908",
  "numeroDocumento":"123546",
  "tipoDocumento":"9"
 },
 "form2":{
  "codigo":"14251",
  "recursoPropioAno1":"43.834.610"
 }
}

Por razones de seguridad :) no les puedo compartir el código original y completo, espero que con esta explicación puedan usar JQuery y JSON en sus extensiones, cualquier inquietud no duden en preguntar.