Mini Chrome-Extension Manda-Reportes

Hola!

Hace rato que no escribía nada porque no encontraba nada “nuevo” que hacer… hasta ayer, que nació una idea en la oficina:

Que los usuarios puedan mandar un reporte de error, simple, desde la misma página web.

Y paff, nació Chocapic. Leyendo en la información de Google, hice una mini-extension que hace justamente eso, enviar reportes.

Todas las extensiones (al menos para Chrome) cuentan con 4 partes:

  1. Ícono que muestra la extensión.
  2. Archivo popup.html que sirve se “ve” cuando le das click a la extensión.
  3. Archivo(s) auxiliares
  4. Un manifest que describe la extensión

Estas 4 partes se guardan en una carpeta. No es necesario comprimirla.

manifest.json

Tiene que llamarse así. El archivo “base” es algo así.

{
  "manifest_version": 2,
  "name": "EL NOMBRE DEL PLUGIN",
  "description": "LA DESCRIPCIÓN DEL PLUGIN",
  "version": "1.0",
  "browser_action": {
    "default_title": "LO QUE LEO CUANDO DEJO EL PUNTERO SOBRE EL ÍCONO",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "permissions": [
    "tabs",
    "<all_urls>",
    "http://EN_CASO_DE_MANDAR_PETICION_A_SERVIDOR_EXTERNO"
  ]
}

Se explica sólo, pero mironeemos mejor el permissions:

  • Aquí le digo a Chrome que mi extensión utilizará la API relacionada con las pestañas (chrome.tabs) y ventana en si (chrome.window).
  • Además, le digo que funcionará bajo cualquier protocolo (http://, file://, ftp://, etc), en cualquier dominio, y con cualquier ruta auxiliar.
  • Por último le digo voy a ser “bienvenido” en el servidor X. Esto para, por ejemplo, enviar peticiones AJAX desde mi extensión.

Icons

Definimos los íconos a usar. Son 3, cada uno con su tamaño establecido (16×16, 48×48, 128×128). Se utilizan para el favicon, ícono “clickeable” y pestaña “extensiones” en Chrome.

popup.html

Es una página simple. Que se “muestra” al darle click a la extensión. En mi caso, es así: CapturaEl código es igual de simplesito.

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button id="btn_get_screenshot">Tomar Screenshot</button>
    <img id="img_screenshot" width="300" height="300"/>
    <form id="form">
      <input type="hidden" name="base64_imagen" id="base64_imagen" />
      <input type="text" name="txt_titulo" placeholder="Título"/>
      Descripción:
      <textarea name="txt_descripcion"></textarea>
      <input type="button" value="Enviar" id="btn_enviar_reporte"/>
    </form>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html> 

Como ven, una imagen, un formulario y un link a un .js .

Obviamente, va a depender de qué quieran hacer ustedes😉

popup.js

Por último, el código que hace todo posible. En mi caso, 2 eventos: click para tomar screenshot y click para enviar formulario. El código sería así.

function getScreenshot(){
  chrome.windows.getCurrent(function (win){
    chrome.tabs.captureVisibleTab(win.id,{"format":"png"}, function(imgUrl){
      document.getElementById('img_screenshot').src = imgUrl;
      document.getElementById('base64_imagen').value = imgUrl;
    });
  });
};

function sendForm(){
  var form = document.getElementById('form');
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){
    alert(xhr.responseText);
  };
  xhr.open('post', 'http://LA_MISMA_DEL_PERMISSIONS', true);
  xhr.send(new FormData(form));
  return false;
}

document.getElementById('btn_get_screenshot').addEventListener('click', getScreenshot);
document.getElementById('btn_enviar_reporte').addEventListener('click', sendForm);

Como ven, al tomar la screenshot, lo que obtenemos es el base64 de la misma. Entonces, si queremos “convertirla” a imagen, lo podemos hacer así al recibir el formulario en el servidor:

list($type, $data) = explode(';', $_POST["base64_imagen"]);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
file_put_contents('temporal/img.png', $data);

El Cielo es el límite !

Links de Interés:

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en JavaScript. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s