Hola! volvemos esta vez con un nuevo post que nos gustaría que te sea muy útil y solucione tus preguntas ¡Empezamos!
Hacer una extensión de Chrome es un proceso bastante sencillo. Cuando haya terminado, podrá usarlo en su computadora para mejorar el funcionamiento del navegador.
Hay algunos componentes básicos que el navegador requiere antes de que la extensión pueda estar completamente operativa. Repasaremos todo esto a continuación, incluido cómo hacer que su extensión personalizada funcione en Chrome sin la necesidad de cargarla o compartirla con nadie más.
La creación de una extensión de Chrome compleja es un proceso mucho más detallado de lo que verá a continuación, pero el proceso general es el mismo. Sigue leyendo para aprender cómo crear una extensión de Chrome que puedas comenzar a usar hoy.
Propina: Para ver lo increíble que podría ser su propia extensión, consulte estas increíbles extensiones de Chrome.
Cómo hacer una extensión de Chrome
Con esta guía, creará una extensión de Chrome simple que enumera algunos de sus sitios web favoritos. Es totalmente personalizable y muy fácil de actualizar.
Esto es lo que debe hacer:
- Crea una carpeta que contenga todos los archivos que componen la extensión.
- Crea los archivos base que requiere esta extensión: manifest.json, popup.html, background.html, styles.css.
- Abierto popup.html en un editor de texto y luego pegue todo lo siguiente allí, asegurándose de guardarlo cuando haya terminado.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Favorite Sites</title>
<link rel="stylesheet" type="text/css" href="https://helpdeskgeek.com/how-to/how-to-make-a-simple-chrome-extension/styles.css">
</head>
<body>
<ul id="myUL">
<li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
<li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
<li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
</ul>
</body>
</html>
Siéntase libre de editar los enlaces y el texto del enlace, o si desea que la extensión de Chrome sea exactamente como estamos, simplemente mantenga todo igual.
- Abierto manifest.json en el editor de texto y copie / pegue lo siguiente:
“Update_url”: “https://clients2.google.com/service/update2/crx”,
“Manifest_version”: 2,
“Nombre”: “Sitios favoritos”,
“Descripción”: “Todos mis sitios web favoritos”,
“Versión”: “1.0”,
“Iconos”:
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
,
“antecedentes”:
“Página”: “background.html”
,
“Browser_action”:
“Default_icon”: “icon.png”,
“Default_title”: “Sitios favoritos”,
“Default_popup”: “popup.html”
Las áreas comestibles de este código incluyen nombre, descripcióny título_predeterminado.
- Abierto styles.css y pega el siguiente código. Esto es lo que decora el menú emergente para que sea mucho más atractivo de ver e incluso más fácil de usar.
#myUL
tipo de estilo de lista: ninguno;
acolchado: 0;
margen: 0;
ancho: 300px;
#myUL li a
borde: 1px sólido #ddd;
margen superior: -1px;
color de fondo: # f6f6f6;
relleno: 12px;
decoración de texto: ninguna;
tamaño de fuente: 18px;
de color negro;
bloqueo de pantalla;
familia de fuentes: ‘Noto Sans’, sans-serif;
#myUL li a: hover: not (.header)
color de fondo: #eee;
Hay muchas cosas que puede cambiar en el archivo CSS. Juega con estas opciones después de crear tu extensión de Chrome para personalizarla a tu gusto.
- Cree un icono para la extensión y asígnele un nombre icon.png. Colóquelo en su carpeta de extensión de Chrome. Como puede ver en el código anterior, puede crear un ícono separado para esos tamaños: 16 × 16 píxeles, 32 × 32, etc.
Propina: Google tiene más información sobre la creación de extensiones de Chrome. Hay otros ejemplos y opciones avanzadas que van más allá de los simples pasos que mostramos aquí.
Cómo agregar una extensión personalizada a Chrome
Ahora que ha creado la extensión de Chrome, es hora de agregarla al navegador para que pueda usar todos los archivos que acaba de crear. La instalación de una extensión personalizada implica un procedimiento que es diferente a cómo instalaría una extensión normal de Chrome.
- Desde el menú de Chrome, vaya a Más herramientas > Extensiones. O escriba chrome: // extensiones / en la barra de direcciones.
- Seleccione el botón junto a modo desarrollador si aún no está seleccionado. Esto activará un modo especial que le permitirá importar sus propias extensiones de Chrome.
- Utilizar el Carga desembalada en la parte superior de esa página para seleccionar la carpeta que creó durante el paso 1 anterior.
- Acepte las indicaciones si las ve. De lo contrario, su extensión de Chrome personalizada se mostrará junto con cualquier otra que tenga en la esquina superior derecha del navegador.
Editar su extensión de Chrome
Ahora que puede utilizar su extensión de Chrome, puede realizar cambios para personalizarla.
El archivo styles.css controla cómo aparece la extensión, por lo que puede ajustar el estilo de la lista general y cambiar el color o el tipo de fuente. W3Schools es uno de los mejores recursos para aprender sobre las diferentes cosas que puede hacer con CSS.
Para cambiar el orden en el que se enumeran los sitios web, o para agregar o más sitios o eliminar los existentes, edite el archivo popup.html. Solo asegúrese de mantener sus ediciones solo en la URL y el nombre. Todos los otros personajes, como