En este artículo, te enseñaré cómo hacer tu propia extensión de Chrome. Lo estoy basando en las lecciones aprendidas al crear TalkToMe, una extensión de Chrome que ayuda a las personas con discapacidad visual leyendo el contenido del sitio web y navegando a otras páginas web.
Voy a cubrir los conceptos básicos de la configuración de su extensión, que incluyen:
- Configurar los archivos para la instalación
- Preparándolo para ponerlo en la tienda de Chrome
Configurar los archivos para la instalación
Primero, vaya a chrome: // extensions en su navegador, o simplemente haga clic en "Más herramientas" y "Extensiones" en el menú de Chrome. Esto debería llevarlo a la página Administración de extensiones, donde puede activar el modo de desarrollador (debe estar en la esquina superior derecha).
Luego, deberá crear un manifest.jsonarchivo en un nuevo directorio para su extensión. Este archivo proporciona información importante para que funcione su extensión, como los permisos y los archivos de script a los que vinculará su proyecto. Así es como debería verse el contenido de su manifiesto:
{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}Para cargar su directorio en la página Administración de extensiones, haga clic en el botón “Cargar desempaquetado” y seleccione su directorio. Esto vinculará sus archivos a la interfaz de usuario basada en web.
Otro archivo importante que tendrás que configurar es background.js, que es el script de fondo de tu proyecto.
Un ejemplo de secuencia de comandos en segundo plano tiene este tipo de estructura:
chrome.runtime.onInstalled.addListener(function() { // add an action here});Siempre se ejecutará mientras su extensión esté encendida y es útil para escuchar diferentes eventos, como presionar el teclado o para navegar a diferentes páginas.
Incluso puede tener varios scripts en segundo plano. Solo necesita registrarlos todos en su archivo de manifiesto primero. Para hacer esto, simplemente estructura manifest.jsasí, que es el aspecto del archivo de manifiesto de nuestra extensión:
{ "name": "Chrome Extension Example", ... "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}Ahora, necesitará un archivo no solo para la función de su extensión, sino también para la interfaz de usuario. Para hacer esto, cree un archivo llamado popup.html. La ventana emergente es una pequeña ventana que aparece una vez que se hace clic en el icono de su extensión. Por ejemplo, aquí está la ventana emergente de la extensión Cookie Manager Firefox.
El popup.htmlarchivo puede ser bastante simple. A continuación se muestra un código para crear una ventana emergente con un solo botón. Es tan fácil como agregar etiquetas de botones de apertura y cierre en el cuerpo del documento y algunas reglas de estilo.
button { height: 30px; width: 30px; outline: none; } ; Por supuesto, el popup.htmlcódigo de nuestra extensión tiene muchos más componentes que este. Siéntase libre de agregar más botones, hojas de estilo y cualquier otra cosa que considere adecuada para su idea de extensión.
Es hora de configurar el código emergente y el icono. Sin embargo, para el icono, deberá agregar código en dos lugares, "default_icon" e "icons". La propiedad "default_icon" se utiliza para los iconos de la barra de herramientas, y "iconos" se utiliza para las imágenes que se muestran en la página Administración de extensiones.
Regrese manifest.jsony agregue las siguientes líneas de código, reemplazando las rutas de la imagen del icono predeterminado con sus propias imágenes. También puede poner las mismas imágenes tanto para "default_icon" como para "iconos". Y no es necesario que coloque imágenes de las mismas dimensiones que las que se especifican a continuación. Por ejemplo, si solo tiene imágenes de 16 x 16 y 48 x 48, no dude en eliminar las otras dos líneas que especifican 32 y 128 píxeles.
{ "name": "Chrome Extension Example", ... "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}Estos son los archivos que son esenciales para crear una extensión de Chrome:
- un archivo de manifiesto,
- guiones de fondo, y
- un archivo emergente
Algunos otros archivos que quizás desee configurar son:
options.htmlyoptions.js
options.jsbrindará a sus usuarios una variedad más amplia de opciones cuando se trata de usar su extensión. Se encargará de cómo se ve su página de opciones (es muy similar a popup.html), mientras options.jsque manejará la funcionalidad.
Estos archivos son opcionales, pero si decide agregarlos, no olvide configurar options.htmlen el manifiesto y vincular su options.jsarchivo agregando <; / script> justo antes de su etiqueta HTML final.
{ "name": "Chrome Extension Example", ... "options_page": "options.html"}Para ver su extensión en acción, guarde todos sus archivos y haga clic en "Recargar" mientras se encuentra en la página Administración de extensiones. Debería ver su icono en la barra de herramientas. Para ver su página de opciones, también puede hacer clic en "Detalles" debajo de su extensión y desplazarse hacia abajo hasta donde dice "Opciones de extensión".
Publicar su proyecto en la tienda web
Entonces ha desarrollado y probado su extensión. ¡Ahora necesitas distribuirlo!
Para comenzar a cargar su proyecto, primero conviértalo a un archivo .zip. El archivo debe contener, como mínimo, el manifest.jsonarchivo. Luego, asegúrese de tener una cuenta de desarrollador visitando el Panel de desarrollador de Chrome Webstore.
Haga clic en el botón "Agregar nuevo elemento" y debería permitirle cargar su .ziparchivo allí. A menos que desee registrar pagos para su aplicación, puede omitir el paso sobre la configuración de un sistema de pago. Sin embargo, tendrá que pagar una tarifa única de desarrollador de $ 5 cuando coloque su proyecto en la tienda web.
Además, no olvide incluir una descripción detallada e imágenes de su extensión para que los usuarios potenciales sepan exactamente lo que hace su proyecto.
Una vez que haya completado todo esto, recibirá un ID de aplicación y un token de OAuth. El ID de la aplicación se usa para realizar solicitudes a las API de Google, mientras que el token de OAuth se usa para realizar pagos en la Tienda Web.
¡Felicitaciones, ya ha publicado su extensión! ?
Si disfrutó de esta publicación, consulte el siguiente artículo. Profundizaremos en cómo configurar las funciones de audio en su extensión de Chrome, tal como lo hicimos con TalkToMe.