¿Cómo puedo modificar este código para que al hacer clic en cancelar en el popup el enlace no se abra?

Resumen y Solución del Problema en el Código JavaScript

En este artículo, se abordará un problema común que surge al implementar una ventana emergente de confirmación en una extensión de Chrome. El objetivo es evitar que un enlace se abra si el usuario elige la opción "Cancelar" en el cuadro de diálogo de confirmación.

Código Actual

El código proporcionado está diseñado para detectar clics en enlaces y mostrar un mensaje de confirmación. Sin embargo, actualmente, el enlace se abre independientemente de la respuesta del usuario. A continuación, se presenta el código original:

document.addEventListener("click", function(event) {
    const target = event.target.closest("a");
    if (target) {
        event.preventDefault();
        if (confirm("You clicked on a link!" + "\nAre you confident you want to proceed?\n\n\n" + target.href)) {
            window.location.href = target.href;
        }
    }
}, true);

Problema

El problema radica en que el enlace se abre sin tener en cuenta la elección de "Cancelar". Esto se debe a que la redirección a la URL del enlace se realiza solamente si el usuario confirma.

Solución Propuesta

Para solucionar este problema, es importante asegurarse de que el evento de clic en el enlace no solo se "prevenga", sino que también se maneje de acuerdo a la respuesta del usuario. El código ya está utilizando event.preventDefault(); para evitar que el enlace se abra por defecto. Sin embargo, es necesario asegurarse de que la función de confirmación determine correctamente si se debe abrir el enlace o no.

Aquí está la versión corregida del código:

document.addEventListener("click", function(event) {
    const target = event.target.closest("a");
    if (target) {
        event.preventDefault(); // Previene la acción por defecto del enlace
        // Muestra la ventana de confirmación
        if (confirm("You clicked on a link!" + "\nAre you confident you want to proceed?\n\n\n" + target.href)) {
            window.location.href = target.href; // Solo redirige si se confirma
        }
        // Si el usuario cancela, no se hace nada más y el enlace no se abre
    }
}, true);

Explicación de los Cambios

1. event.preventDefault();: Detiene la acción predeterminada del enlace, lo cual es necesario y ya está presente en el código original.

2. if (confirm(...)): Este bloque controlará si el enlace se abrirá o no. Si el usuario selecciona "Cancelar", nada más sucederá y el enlace no se abrirá.

Con estas modificaciones, el comportamiento de la extensión será el esperado: si el usuario hace clic en "Cancelar", el enlace no se abrirá.