Cómo hacer una extensión de Chrome simple

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 necesidad de cargarla o compartirla con nadie más.

Crear una extensión de Chrome compleja es un proceso mucho más detallado que 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.

Sugerencia(Tip) : para ver lo increíble que podría ser su propia extensión, consulte estas increíbles extensiones de Chrome(these amazing Chrome extensions) .

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:

  • Cree una carpeta que contenga todos los archivos que componen la extensión.
  • Cree los archivos base que requiere esta extensión: manifest.json , popup.html , background.html , styles.css .
  • 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>Favorite Sites</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">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Siéntase(Feel) libre de editar los enlaces y el texto del enlace, o si desea que la extensión de Chrome sea exactamente como somos, simplemente mantenga todo igual.

  • Abra manifest.json en el editor de texto y copie y pegue lo siguiente:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Sitios favoritos”, ( “name”: “Favorite Sites”,)
“description”: “Todos mis sitios web favoritos”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icono.png”, ( “32”: “icon.png”,)
“48”: “icono.png”, ( “48”: “icon.png”,)
“128”: “icono.png” ( “128”: “icon.png”)
},

   “fondo”: {  (   “background”: { )
        “página”:”fondo.html” (        “page”:”background.html”)
},

    “browser_action”: {
        “default_icon”: “icon.png”,
        “default_title”: “Sitios favoritos”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Las áreas comestibles de este código incluyen nombre(name) , descripción(description) y título_predeterminado(default_title) .

  • Abra styles.css y pegue el siguiente código. Esto es lo que decora el menú emergente para hacerlo mucho más atractivo e incluso más fácil de usar.

#myUL {
tipo de estilo de lista: ninguno; (list-style-type: none;)
   relleno: 0; (   padding: 0;)
   margen: 0; (   margin: 0;)
   ancho: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margen superior: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  relleno: 12px; (  padding: 12px;)
  texto-decoración: ninguno; (  text-decoration: none;)
  tamaño de fuente: 18px; (  font-size: 18px;)
  de color negro; (  color: black;)
  bloqueo de pantalla; (  display: block;)
  familia tipográfica: 'Noto Sans', sans-serif; (  font-family: ‘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.(Chrome)

  • Cree(Create) un ícono para la extensión y asígnele el nombre icon.png . Colóquelo en su carpeta de extensiones 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.

Consejo: (Tip: )Google tiene más información(Google has more information) 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(Custom Extension) 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 de Chrome normal(how you’d install a normal Chrome extension) .

  • En el menú de Chrome, ve a Más herramientas(More tools ) > Extensiones(Extensions) . O escribe chrome://extensions/ en la barra de direcciones.
  • Seleccione el botón junto al modo Desarrollador(Developer mode) si aún no está seleccionado. Esto activará un modo especial que te permitirá importar tus propias extensiones de Chrome .

  • Use el botón Cargar desempaquetado(Load unpacked ) en la parte superior de esa página para seleccionar la carpeta que creó durante el Paso 1(Step 1) anterior.

  • Acepte(Accept) las indicaciones si las ve. De lo contrario, su extensión de Chrome personalizada aparecerá junto con cualquier otra que tenga en la esquina superior derecha del navegador.

Edición de su extensión de Chrome

Ahora que su extensión de Chrome se puede usar, puede hacer cambios para personalizarla. 

El archivo styles.css controla cómo aparece la extensión, por lo que puede ajustar el estilo general de la lista y cambiar el color o el tipo de fuente. W3Schools es uno de los mejores recursos para aprender sobre todas las cosas que puede hacer con CSS .

Para cambiar el orden en que aparecen 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. HTML Tutorial en W3Schools(HTML Tutorial on W3Schools) es un buen lugar para aprender más sobre ese idioma.



Maria Teresa Moya

About the author

Ingeniero audiófilo y especialista en productos de audio con más de 10 años de experiencia. Me especializo en la creación de altavoces y auriculares para música de calidad de principio a fin. Soy un experto en la solución de problemas de audio, así como en el diseño de nuevos sistemas de altavoces y auriculares. Mi experiencia va más allá de hacer buenos productos; También me apasiona ayudar a otros a ser lo mejor posible, ya sea a través de la educación o el servicio comunitario.


Related posts