Blog > Vue > Creación de extensiones para Google Chrome con Vue.js (SFC)
11/Dic/2017

CREACIÓN DE EXTENSIONES PARA GOOGLE CHROME CON VUE.JS (SFC)

Saludos coders en este artículo les mostraré una forma de hacer que su código Vue.Js funcione como una extensión para Google Chrome, programaremos utilizando los Single File Components de Vue, empaquetaremos el proyecto con WebPack Simple. Para realizar este tutorial necesitas tener instalado el vue-cli npm install -g vue-cli, si quieres saber más respecto al vue-cli y los Single File Components puedes leer mi artículo titulado “DESARROLLO WEB UTILIZANDO SINGLE FILE COMPONENTS”.

Paso 1. Creación de proyecto Vue.js que tendrá una estructura de archivos SFC

Ejecutamos el comando:
vue init webpack-simple extension_chrome_vue
Instalamos las dependencias definidas en nuestro archivo package.json que se encuentran dentro del directorio. npm install

el proceso de instalación de las librerías tardara dependiendo de nuestro ancho de banda.
Para ejecutar el proyecto nos colocamos dentro del directorio de la extensión "extension_chrome_vue" y escribimos el comando npm run dev, se abrirá una pestaña en el navegador con la dirección http://localhost:8080/ que nos mostrará el logo de Vue.
Abrir el directorio del proyecto “extension_chrome_vue” con nuestro IDE o Editor de texto favorito en mi caso utilizare Sublime Text 3.

Paso2. Creación del manifest.json
Tenemos que crear un archivo llamado “manifest.json” uno de los más importantes para nuestra extensión en el cual definimos detalles generales como nombre de la extensión, descripción, nombre del archivo con el que arranca la extensión (index.html), icono de la extensión, permisos entre muchas otras funcionalidades; nuestro caso es básico por lo cual el número de propiedades definidas es limitado si deseas profundizar más respecto a las características de este archivo dirígete a google developer donde encontrarás información detallada.
```
          
//manifest.json
{
  "manifest_version":2,
  "name":"Ejemplo extension",
  "description":"Extensión básica con Vue.js",
  "version":"0.1",
  "browser_action":{
    "default_popup":"index.html",
    "default_title":"Extensión con Vue.js"
  }
}
          
        
```

Paso3. Transpilar el código de la extensión y generar el directorio “dist”
Vamos a transpilar el código para poder cargarlo como una extensión de chrome y ejecutamos: npm run build

el resultado de este comando nos genera un directorio en la raiz del proyecto llamado “dist” que contiene el código transpilado, mapeado, minificado, etc. listo para cargarlo como extensión de chrome.

Paso 4. Actualización al código de la extensión

Vamos a realizar una pequeña modificación al código de nuestra extensión en el archivo “App.vue”, donde modificaremos el código css y agregaremos el método saludo() que invocaremos desde un evento click

Reemplazare el logo de Vue.js por el de Radarez, ojo con la ruta de nuestra imagen, estoy agregando un directorio “img” dentro de “dist”.

          
<template>
  <div id="app">
    <img src="dist/img/desarrollo-de-software-radarez.png">
    <h1>{{ msg }}
    <a href="#" v-on:click="saludo()">SALUDAR
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Software a Medida '
    }
  },
  methods:{
    saludo: function(){
      this.msg = "Hola ¿Cómo estas?";
    }
  }
}
</script>

<style>
body{
  background-color: #001835;
  width: 400px;
  height: 250px;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color:#98cd48;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

a {
  color: #fff;
}
</style>

Paso 5. Cargar extensión
1. Vamos a hacer un directorio en la raiz del proyecto llamado “extension” dentro del cual colocaremos el directorio “dist”, el archivo “manifest.json” e “index.html” quedando la estructura de archivos la siguiente forma
2. Ahora tenemos que hacer una modificación al archivo webpack.config.js en la línea 7 donde cambiaremos el directorio destino de nuestro código transpilado, la línea queda de la siguiente forma:
  path: path.resolve(__dirname, './extension/dist'),
3. En nuestra consola ejecutamos npm run build para transpilar nuevamente el código.
4. Ya transpilado el código nos dirigimos al menú “Window/Extensions” del navegador y activamos la casilla “Developer mode”
  
  la casilla “Developer mode” nos mostrará nuevas funcionalidades para los desarrolladores y la que vamos a utilizar en esta ocasión es “Load unpacked extension...” que nos permite hacer la carga de nuestra extensión, para esto nos dirigimos al directorio “extension”
  
  seleccionamos el contenido y listo…
  
  nuestro código se ha cargado como una extensión en chrome. Cuando realicemos modificaciones a nuestro código transpilamos (npm run build) y recargamos el código de la extensión.
  
  Si queremos seguir mirando los resultado de nuestros cambios en http://localhost:8080 mantenemos una copia del archivo index.html en la raiz del proyecto.
  
  Ya que nuestra extensión es prácticamente una página Web podemos agregar scripts como el de google analytics para monitorear la utilización de la misma, también podremos consumir datos que provengan desde alguna API REST en lo personal he integrado axios a mis extensiones y funciona muy bien.
  
  Gracias.
  Diviertanse codeando.

Autor: Adrián Miranda A.
E-Mail: ama@radarez.com
Twitter: @heyAparicio
Linkedin: heyaparicio