Extensión web de Chrome: no se necesita experiencia previa en codificación: 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

Las extensiones de Chrome son pequeños programas creados para mejorar la experiencia de navegación de los usuarios. Para obtener más información sobre las extensiones de Chrome, visite

Para crear una extensión web de Chrome, se requiere codificación, por lo que es muy útil revisar HTML, JavaScript y CSS en el siguiente sitio web:

www.w3schools.com/default.asp (w3 schools es un buen sitio web para recursos de codificación)

¿No sabes cómo codificar? No se preocupe, este tutorial le ayudará a guiar el camino.

Lo mejor de las extensiones de Chrome es que se pueden personalizar. No es solo una cosa específica que se puede hacer, así que sea creativo.

Suministros

Los suministros que se necesitan son los siguientes:

• Una computadora con un editor de texto (estoy usando el Bloc de notas)
• Google Chrome

¡Y eso es todo!

Paso 1: crear el directorio

Primero, cree una carpeta para contener todos los archivos y asígnele el nombre 'extensión'. El nombre se puede cambiar más tarde si lo desea.

Paso 2: Cree el archivo de manifiesto y codifíquelo

El archivo de manifiesto es una parte muy importante de la extensión. Le dice a la extensión exactamente qué hacer y qué debe hacer. Los archivos de manifiesto están formateados en JSON. El primer paso es abrir un editor de texto y guardar un nuevo archivo como 'manifest.json'.

A continuación, escriba el siguiente script:

{

"nombre": "Primera extensión", "versión": "1.0", "descripción": "Puedo codificar una extensión", "manifest_version": 2, "browser_action": {"default_title": "Primera extensión"}}

¡Recuerda las comas después de los valores!

Después de escribir esto, guarde el archivo de manifiesto y vaya a chrome: // extensions (Chrome debe usarse como navegador para esto). Una vez en chrome: // extensions, active el modo de desarrollador. Después de eso, presione el botón 'Cargar descomprimido' y seleccione la carpeta 'extensión'.

redoble de tambores por favor…

¡Hurra! Eso es una extensión, excepto … es un poco aburrido. Literalmente no hace nada a partir de ahora, pero pronto será genial.

Paso 3: cree los iconos y actualice el manifiesto

Un sitio web que funciona bien para dibujar iconos es https://www.piskelapp.com/. También hay otros programas de dibujo disponibles para su uso. Los iconos deben ser cuadrados. Este proyecto utilizará iconos de 16 x 16, 32 x 32, 48 x 48 y 128 x 128. Una vez creado el icono, cree una carpeta llamada 'imágenes' en la carpeta de extensión y coloque el icono en esa carpeta. Puede ser una buena idea nombrar una imagen de acuerdo con su tamaño. Por ejemplo, 'icon32.png'. El nuevo código está a continuación:

{

"nombre": "Primera extensión", "versión": "1.0", "descripción": "Puedo codificar una extensión", "manifest_version": 2, "browser_action": {"default_title": "Primera extensión", " default_icon ": {" 16 ":" images / icon16-p.webp

Para obtener referencia sobre el código de manifiesto, vaya a

Paso 4: agregar una ventana emergente

Esta extensión tendrá una ventana emergente. La ventana emergente es un archivo HTML (lenguaje de marcado de hipertexto), por lo que es bueno aprender primero los conceptos básicos de HTML, CSS y JavaScript.

Primero, guarde un documento como archivo 'popup.html' en la carpeta de extensión.

A continuación, edite el archivo de manifiesto para que muestre 'popup.html' cuando se haga clic en él. El nuevo código está a continuación:

{

"nombre": "Primera extensión", "versión": "1.0", "descripción": "Puedo codificar una extensión", "manifest_version": 2, "browser_action": {"default_title": "Primera extensión", " default_icon ": {" 16 ":" images / icon16-p.webp

¡No olvide la coma!

Ahora, si se agrega el siguiente código HTML en popup.html, mostrará 'Hola mundo' cuando se haga clic en él.

Hola Mundo

Paso 5: haz que se vea bien y que sea interactivo

Si se escribe una línea HTML básica, se hace lo mínimo. Si se agrega CSS (hojas de estilo en cascada), se verá mejor, y si se agrega JavaScript, entonces puede ser más interactivo. Este tutorial no explicará en detalle HTML, JavaScript y CSS, pero hay muchos recursos en línea. A continuación se muestra el código para el programa simple 'Hello World', luego el programa más colorido, respectivamente:

Hola Mundo

Hola Mundo

# hola {color de fondo: # 000000; color: # ff0000; borde: 8px comienzo # 86a3b2; radio del borde: 50px; transformar: rotar (57 grados); relleno: 10px; selección de usuario: ninguno; cursor: cruz; transición: transforma 2s; } #hello: hover {transform: rotate (-417deg); }

Este segundo ejemplo puede resultar muy confuso para un principiante. Pero, esto fue para mostrarle lo importante que es CSS para un programa / extensión. Ahora sería un buen momento para tomar un descanso y aprender algo de codificación HTML5 y usar developer.chrome.com como referencia. Puede llevar algún tiempo, pero se puede hacer una gran extensión.

Paso 6: publicarlo en Chrome Web Store

Si alguien ha creado una gran extensión y quiere compartirla con el mundo, puede publicarla. Después de todo, ese es el punto de una extensión. Este tutorial solo trató de explicar el archivo de manifiesto y cómo puede usarlo, y solo tenía un programa 'Hello World'.

Lo primero que debe hacer para hacer pública una extensión es convertir la carpeta de la extensión en un archivo zip. Lo segundo que debe hacer es ir a https://chrome.google.com/webstore/category/extensions e iniciar sesión en una cuenta de Google. Luego, haga clic en el botón de engranaje de configuración y luego haga clic en 'Panel de control del desarrollador'. Presione el botón 'Nuevo artículo' para cargar el archivo zip. Una vez allí, es necesario editar la ficha de Play Store, la privacidad y los precios. Una extensión se puede publicar fácilmente si se envía para revisión.

Ahora que la extensión está terminada, ¡continúe codificando!