Davdomin - David Dominguez Rojas

¡Descubre el mundo de la tecnología y el desarrollo de software con nuestras fascinantes entradas! Desde las últimas actualizaciones de software hasta guías prácticas y análisis en profundidad de temas candentes en la industria, nuestro blog te mantendrá al día con lo último en tecnología. Explora artículos sobre programación, novedades en software, consejos útiles y mucho más. ¡Acompáñanos en este viaje tecnológico y mantente informado en el mundo digital!

Mostrando las entradas con la etiqueta Google Chrome. Mostrar todas las entradas

viernes, 10 de noviembre de 2023

Cómo Crear una Extensión de Google Chrome para Abrir WhatsApp Web con un Solo Clic

¿Te gustaría tener la capacidad de abrir WhatsApp Web con un solo clic desde tu navegador? ¡Buenas noticias! Puedes lograrlo fácilmente creando tu propia extensión personalizada para Google Chrome. En esta guía paso a paso, te mostraré cómo hacerlo. Puedes visitar nuestro articulo sobre como crear una extension en chrome

Paso 1: Configuración Inicial

Antes de comenzar, asegúrate de tener un directorio para tu proyecto. En este ejemplo, llamaremos al directorio "WhatsAppWebLauncher".

Paso 2: Archivo manifest.json

Crea un archivo llamado manifest.json en tu directorio y agrega el siguiente contenido:

{
    "name": "WhatsApp Web Launcher",
    "description": "Open WhatsApp Web for a given phone number.",
    "version": "0.1.0",
    "manifest_version": 3,
    "icons": {
        "16": "/images/icon16.png",
        "32": "/images/icon32.png",
        "48": "/images/icon48.png",
        "128": "/images/icon128.png"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/images/icon16.png",
            "32": "/images/icon32.png",
            "48": "/images/icon48.png",
            "128": "/images/icon128.png"
        }
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self';"
    }
}

Asegúrate de reemplazar "WhatsApp Web Launcher" con el nombre que desees para tu extensión.

Paso 3: Archivo popup.html

Crea un archivo llamado popup.html y agrega el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
  <title>WhatsApp Web Launcher</title>
</head>
<body>
  <h3>Phone number:</h3>
  <input type="text" id="phoneNumber" placeholder="Ej. +51-1234567" value="">
  <button id="openButton">Open in WhatsApp Web</button>
  <script src="popup.js"></script>
</body>
</html>

Paso 4: Archivo popup.js

Crea un archivo llamado popup.js y agrega el siguiente contenido:

document.addEventListener('DOMContentLoaded', function () {
  var phoneNumberInput = document.getElementById('phoneNumber');

  phoneNumberInput.focus();
  document.getElementById('openButton').addEventListener('click', function() {
    openWhatsApp();
  });
  function openWhatsApp() {
    var phoneNumber = phoneNumberInput.value;
    if (phoneNumber) {
      phoneNumber = phoneNumber.replace(/[^\d]/g, '');
      var whatsappWebUrl = 'https://web.whatsapp.com/send?phone=' + phoneNumber;
      chrome.tabs.create({ url: whatsappWebUrl });
    } else {
      alert('Por favor, ingresa un número de teléfono.');
    }
  }
});

Paso 5: Cargar la Extensión

Abre Google Chrome y ve a chrome://extensions/.
Habilita "Modo de desarrollador" en la esquina superior derecha.
Haz clic en "Cargar descomprimida" y selecciona la carpeta de tu proyecto.

¡Listo! Ahora deberías ver el ícono de tu extensión en la barra de herramientas de Chrome.

Beneficios de Crear Extensiones Personalizadas

Crear tus propias extensiones de navegador personalizadas no solo es divertido, sino que también puede mejorar tu productividad. Puedes adaptar tu navegador exactamente a tus necesidades y automatizar tareas comunes.

Contribuye y Mejora

Este proyecto está en GitHub. Si encuentras problemas o tienes sugerencias de mejora, ¡contribuye al desarrollo! https://github.com/davdomin/chrome_whatsapp

¡Espero que encuentres útil esta extensión personalizada! ¡Háganos saber si tienes alguna pregunta o sugerencia!

viernes, 20 de octubre de 2023

Cómo Crear una Extensión para Chrome en 10 Sencillos Pasos

Las extensiones de Chrome son pequeños programas que amplían las funcionalidades del navegador Google Chrome. En esta guía, aprenderás a crear una extensión básica desde cero. No se requiere experiencia previa en programación.

Las 10 extensiones que mejoran la navegación en Google Chrome - Infobae

Configuración del Entorno de Desarrollo

Instalar Google Chrome: Si aún no tienes Google Chrome instalado, descárgalo e instálalo en tu computadora. Debes utilizar Chrome como navegador principal para probar tus extensiones.

Editor de Código: Utiliza un editor de código de tu elección. Recomiendo Visual Studio Code, que es gratuito y fácil de usar.

Crear la Estructura de Carpetas 3. Crea una Carpeta: En tu computadora, crea una carpeta para tu extensión. Nombremos esta carpeta "MiPrimeraExtension."

Archivo de Manifiesto 4. Crear el Archivo de Manifiesto: En la carpeta "MiPrimeraExtension," crea un archivo llamado "manifest.json". El manifiesto es un archivo importante que define la extensión y sus propiedades.

Editar el Manifiesto: Abre "manifest.json" en tu editor de código y agrega el siguiente código básico:

json

{
  "manifest_version": 3,
  "name": "Mi Primera Extensión",
  "version": "1.0",
  "description": "Una extensión simple de Chrome",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

Este código define información básica sobre la extensión, como su nombre y descripción, así como los íconos y la página emergente.

Archivo HTML para la Página Emergente 6. Crear la Página Emergente: En la misma carpeta, crea un archivo llamado "popup.html." Esta será la página que aparecerá cuando hagas clic en el ícono de la extensión.

Editar la Página Emergente: Abre "popup.html" y agrega el siguiente código HTML simple:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Extensión</title>
</head>
<body>
  <h1>Hola, esta es tu primera extensión de Chrome.</h1>
</body>
</html>

Íconos para la Extensión 8. Preparar Íconos: Crea tres imágenes PNG para los íconos de la extensión con tamaños de 16x16, 48x48 y 128x128 píxeles. Guárdalas en una carpeta llamada "images" dentro de tu carpeta "MiPrimeraExtension."

Cargar la Extensión 9. Acceder a Chrome: Abre Google Chrome y visita "chrome://extensions/". Asegúrate de que la casilla de "Modo de desarrollador" esté marcada en la esquina superior derecha.

Cargar la Extensión: Haz clic en "Cargar extensión no empaquetada" y selecciona la carpeta "MiPrimeraExtension."

¡Y eso es todo! Has creado y cargado tu primera extensión de Chrome. Ahora, deberías ver el ícono de tu extensión en la barra de herramientas de Chrome. Cuando hagas clic en él, se mostrará el mensaje que definiste en "popup.html."


 
Escribe en comentarios si quieres que hagamos una extension mas compelja en  nuestra proxima

entrada

domingo, 15 de octubre de 2023

Cuales son las novedades del nuevo Google Chrome 118

La evolución constante de los navegadores web es un aspecto crucial para mejorar la experiencia en línea. En este sentido, Google Chrome ha lanzado su versión 118 el 12 de octubre de 2023, con una serie de emocionantes novedades que van más allá de las funciones tradicionales de navegación.

Regla CSS @scope: Aplicando Estilos sin Fronteras: Una de las características destacadas es la introducción de la regla CSS @scope, proporcionando a los desarrolladores la capacidad de aplicar estilos a un elemento y a todos sus descendientes, independientemente de su posición en el árbol DOM. Esta funcionalidad abre nuevas posibilidades para el diseño web, especialmente útil al estilizar elementos dispersos en diferentes partes de una página.

css
@scope {
  /* Estilos para todos los descendientes del elemento actual */
}

Funciones de Medios Scripting y prefers-reduced-transparency: Controlando la Experiencia del Usuario: Las funciones de medios scripting y prefers-reduced-transparency permiten un control más preciso sobre el comportamiento de las páginas web. Los desarrolladores pueden ajustar dinámicamente la ejecución de scripts y la transparencia en función de las preferencias del usuario, mejorando la adaptabilidad de las aplicaciones web.

Mejoras en el Panel de Fuentes en DevTools: Una Visión Más Clara: El panel de Fuentes en DevTools ha experimentado mejoras significativas, facilitando la visualización y el manejo de las fuentes web. Ahora, las fuentes se presentan en un formato más legible, con detalles sobre la fuente, tamaño y familia. Además, la capacidad de buscar fuentes específicas agiliza el proceso de desarrollo.

Correcciones de Errores y Mejoras de Rendimiento: Un Chrome Más Robusto: Chrome 118 no solo trae nuevas características, sino que también aborda problemas existentes y mejora el rendimiento general. Entre las mejoras, se incluyen correcciones para páginas web que se cargaban lentamente, optimizaciones en la carga de imágenes y la resolución de problemas que podrían causar congelamientos.

Cómo Actualizar a Chrome 118: Sencillo y Rápido: Si eres un ávido usuario de Chrome, asegúrate de disfrutar de estas mejoras. Para actualizar a Chrome 118, simplemente abre el navegador, haz clic en Más (los tres puntos) en la esquina superior derecha, selecciona Ayuda > Acerca de Google Chrome, y el navegador se encargará del resto.

Con cada actualización, Google Chrome fortalece su posición como uno de los navegadores más avanzados y centrados en el usuario. La versión 118 no solo trae nuevas funciones emocionantes, sino que también refuerza la estabilidad y el rendimiento, ofreciendo a los usuarios una experiencia de navegación aún más agradable.