Cómo hacer una extensión para Chrome

Publicada en Publicada en blog

Una de las ventajas de los navegadores actuales frente a los antiguos es la capacidad para soportar extensiones, que son pequeños fragmentos de código que pueden ampliar las capacidades de nuestro navegador web, desde Vivarsoft creamos una pequeña extensión para chrome de Antiqua Clío, ahora os voy a enseñar a hacer una.

Primeramente deberemos crear una carpeta, a la que llamaremos “prueba”, cuyo arbol será este:
Prueba
|-manifest.json
|-popup.html
|-popup.js
|-images
||–icon16
||–icon48
||–icon 128

Primeramente tenemos que ajustar el archivo “manifest.json”, este archivo se encargará de construir esa extensión y por supuesto de dar la información necesaria para la instalación, a nosotros nos quedará así:

{
“manifest_version” : 2,

“name” : “Prueba de xtensión”,
“description” : “Esta es una extensión de extensión”,
“version” : “1.0”,
“icons”: {
“16”: “images/icon16.png”,
“48”: “images/icon48.png”,
“128”: “images/icon128.png”
},

“browser_action” : {
“default_icon” : “images/icon.png”,
“default_popup” : “popup.html”
},

“permissions” : []
}

lo primero que nos encontramos es el nombre de la aplicación y una pequeña descripción de lo que hace, lo siguiente es el número de versión y los iconos en diferente tamaño, y por último los permisos.

Lo siguiente a modificar es el archivo html y el archivo js, estos dos archivos lo que harán es proporcionar funcionalidad a nuestra extensión, en el caso de la de Antiqua clío el html quedó así:

<!doctype html>
<!–
This page is shown when the extension button is clicked, because the
“browser_action” field in manifest.json contains the “default_popup” key with
value “popup.html”.
–>
<html>
<head>
<meta charset=”utf-8″ />
<title>Vivarsoft</title>
<style>
body {
font-family: “Segoe UI”, “Lucida Grande”, Tahoma, sans-serif;
font-size: 100%;
width: 600px;
}
</style>

<!–
– JavaScript and HTML must be in separate files: see our Content Security
– Policy documentation[1] for details and explanation.

– [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
–>
<script src=”popup.js”></script>
</head>
<body>
<center><h2><ins>Asociación cultural y experimental Antiqva Clío</ins></h2><p></center>
<center>
<h4>Últimas fotos</h4>
<iframe src=”http://widget.websta.me/in/antiqva_clio/?s=100&w=3&h=2&b=1&p=5″ allowtransparency=”true” frameborder=”0″ scrolling=”no” style=”border:none;overflow:hidden;width:345px; height: 230px” ></iframe>
</center>
<center>
<h4>Contacto</h4>
<a href=”https://www.facebook.com/culturalexperimentalantiquaclio?fref=ts” target=”_blank”><img src=”images/facebook.png”></a>
<a href=”https://twitter.com/AntiqvaClio” target=”_blank”><img src=”images/twitter.png”></a>
<a href=”https://instagram.com/antiqva_clio” target=”_blank”><img src=”images/instagram.jpg”></a>
<a href=”https://antiquaclio.wordpress.com/” target=”_blank”><img src=”images/web.png”></a>
<h4>Acerca de</h4>
<a href=”https://vivarsoft.es/” target=”_blank”><h5>Desarrollador: Vivarsoft</h5></a><p>
<h5>Versión: 1.0</h5>
</center>
</body>
</html>

Una cosa a tener en cuenta para hacer estar extensiones para el navegador chorme es que para comprimirlas tenemos que habilitar las opciones de desarrollo y usar la opción “empaquetar extensión”

DESCARGA EL CÓDIGO FUENTE

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *