TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear una extensión de Google Chrome?

12

Google Chrome es actualmente el navegador web más popular en todo el mundo debido a sus numerosas funciones y seguridad. Además, las extensiones de Chrome permiten a los usuarios agregar más o modificar la funcionalidad en Chrome sin cambiar el código nativo del navegador. Puede descargar extensiones de Chrome Web Store para realizar casi todas las acciones en Chrome. Sin embargo, puede perderse una extensión que proporciona la funcionalidad específica que necesita de la biblioteca de extensiones en Web Store. Afortunadamente, Chrome permite a los usuarios crear sus propias extensiones que pueden distribuir a otros usuarios de Chrome. En este artículo, explicaremos cómo crear una extensión de Google Chrome y publicar en Web Store.

Relacionado: ¿Cómo instalar y desinstalar extensiones en Google Chrome?

Prerrequisitos

Estos son los requisitos básicos para crear una extensión de Chrome:

  • Conocimientos básicos de tecnología de desarrollo web: la extensión de Chrome es como una página web, por lo que necesita habilidades básicas de HTML, JavaScript y CSS para crear una extensión.
  • Editor de código: también necesitará un editor de código simple como Notepad ++ o Brackets.
  • Cuenta de desarrollador de Chrome Web Store: solo es necesaria si desea distribuir su extensión a otros usuarios de Chrome.

Elementos de una extensión de Chrome

Cualquier extensión del navegador Chrome debe tener los siguientes componentes básicos:

  • El archivo de manifiesto en formato JSON "manifest.json".
  • Guión de contenido.
  • Página emergente.
  • Página de eventos.

Crear un directorio para la extensión de Chrome

El primer paso es crear un nuevo directorio (carpeta) donde cargará y guardará todos los archivos de extensión. Por lo tanto, debe crear una nueva carpeta en su PC y darle su nombre preferido, en este caso, "My Sample Ext".

Crear y guardar el archivo de manifiesto

El archivo de manifiesto brinda a Chrome información detallada sobre la extensión, como el nombre, los permisos y el número de versión, entre otros detalles.

  • Para crear el archivo, abra un editor de código y cree un nuevo archivo llamado "manifest.json".
  • Ahora agregue el contenido del archivo de manifiesto como se muestra en la imagen y guarde el archivo en el directorio que creó anteriormente.

¿Cómo crear una extensión de Google Chrome?

Archivo de manifiesto

  • Puede agregar más detalles al archivo de manifiesto. Por ejemplo, podemos registrar la página emergente y el icono de la extensión.
  • El mejor enfoque es almacenar otros elementos de las extensiones, como los scripts, HTML y archivos de imagen en diferentes carpetas y usar una URL relativa para hacer referencia a ellos.
  • Agregue su icono y página emergente y guarde los cambios.

¿Cómo crear una extensión de Google Chrome?

Manifiesto detallado

  • También puede agregar permisos en el archivo de manifiesto.

Cómo crear una página emergente

Una página emergente es un archivo HTML que se cargará cuando el usuario haga clic en la acción del navegador. En nuestro caso, hemos denominado el archivo "sample.html".

  • Para crear un nuevo archivo en el editor de código y guardar el archivo en el directorio de extensión con una extensión de archivo .html.

¿Cómo crear una extensión de Google Chrome?

Página emergente

  • Al ser un archivo HTML estándar, puede agregar todo lo que desee, incluidos botones, textos, etc. en el archivo.
  • El archivo HTML incluye una referencia a la secuencia de comandos "sample.js", una página de fondo que contiene la lógica de la extensión de Chrome.

Aplicar estilo a la página emergente

Aquí usaremos un archivo .css para diseñar la página emergente de la extensión, puede especificar varios elementos como el tamaño y el color de la fuente, las dimensiones de la ventana emergente y la alineación del texto, entre otros.

  • Para hacerlo, cree un nuevo archivo y cámbiele el nombre con una extensión de archivo .css, "sample.css" para nuestro caso. Tenga en cuenta que este es el archivo .css al que se hace referencia en el archivo HTML anterior.
  • Agregue su código CSS como se muestra en la imagen y guarde los cambios.

¿Cómo crear una extensión de Google Chrome?

Extensión de estilo

Crear un guión de contenido / una página en segundo plano

Este es un archivo .js que define la lógica detrás de la extensión. Especifica la (s) tarea (s) / funcionalidad que realizará la extensión.

  • Agregue el archivo cuatro en el editor de código y guarde el archivo con una extensión .js "sample.js" en el directorio.
  • Agregue comandos que se ejecutarán una vez que el usuario haga clic en el botón o haga clic en el icono de extensión como se muestra.
  • También debe registrar el script de contenido en el archivo manifest.json.

Nota: puede agregar varias tareas para realizar una tarea importante en el archivo .js.

Agregar su extensión a Chrome

Al crear los 4 archivos y guardarlos en un directorio, ahora está listo para cargar su extensión en Chrome.

  • Abra el navegador Chrome, escriba la URL, "chrome: // extensiones /" para abrir la página de administración de extensiones.
  • Mueva el interruptor en la esquina superior derecha de la página para activar el "Modo de desarrollador".

¿Cómo crear una extensión de Google Chrome?

Modo de desarrollo

  • En el lado izquierdo, haga clic en el botón "Cargar desempaquetado" y busque entre sus archivos para seleccionar la carpeta donde guarda los archivos de extensión.
  • Se agregará una nueva extensión a la lista. También notará el icono de su extensión en la barra de herramientas ubicada a la derecha de la barra de direcciones.

¿Cómo crear una extensión de Google Chrome?

Nueva extensión

  • Para probar la extensión, haga clic en el icono para abrir la página emergente.

¿Cómo crear una extensión de Google Chrome?

Extensión de prueba

Terminando

Las extensiones de Chrome ayudan a los usuarios a agregar más funciones para realizar tareas específicas en Chrome. Si bien puede descargar una variedad de extensiones de Chrome listas para usar, puede seguir los pasos básicos anteriores para crear extensiones personalizadas para su sitio web. Además, puede compartir su extensión con otros usuarios de Chrome en todo el mundo a través de Chrome Web Store, pero deberá pagar una cuenta de desarrollador para lograrlo.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More