Averigua cómo hacer una extensión simple de Chrome. Hacer una extensión simple de Chrome es un proceso bastante sencillo. Cuando haya terminado, podrá usarlo en su ordenador 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.
Contenidos de la página
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 para hacer la extensión en Chrome
1.Crea una carpeta que contenga todos los archivos que componen la extensión.
2.Cree los archivos base que requiere esta extensión: manifest.json , popup.html , background.html , styles.css .
3.Abra 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> Sitios favoritos </title>
<link rel = "stylesheet" type = "text / css" href = "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"> Consejos técnicos en línea </a> </li>
<li> <a href="https://thebackroomtech.com/" target="_blank">La tecnología de la trastienda </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.
Abra 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”
},
«Background»: {
«page»: «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ón y título_predeterminado .
- Abra styles.css y pegue 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) {
background-color: #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 el 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.
Sugerencia: Google tiene más información sobre cómo crear 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 .
- En el menú de Chrome, vaya a Más herramientas > Extensiones . O escriba chrome: // extensions / en la barra de direcciones.
- Seleccione el botón junto al modo de desarrollador si aún no está seleccionado. Esto activará un modo especial que le permitirá importar sus propias extensiones de Chrome.
- Use el botón Cargar desempaquetado 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 demás caracteres, como <li> y <html> , son obligatorios y no deben cambiarse.
Además de cómo hacer una extensión simple de Chrome, a continuación puedes ver más temas relacionados de tunavegador.com relacionado con este artículo:
