Etiquetas

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

  1. Abre Google Chrome y ve a chrome://extensions/.
  2. Habilita "Modo de desarrollador" en la esquina superior derecha.
  3. 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!


Etiquetas:

Comentarios

Publicar un comentario

Entradas populares