DNSSEC-check/popup.js

// DNSSEC Check - Popup Logic

const container    = document.getElementById('container');
const domainEl     = document.getElementById('domain');
const statusEl     = document.getElementById('status');
const descriptionEl = document.getElementById('description');
const shieldSymbol = document.getElementById('shield-symbol');
const recheckBtn   = document.getElementById('recheck-btn');

const SVG_CHECK = `
  <polyline points="20,30 28,40 44,24"
    fill="none" stroke="#fff" stroke-width="5"
    stroke-linecap="round" stroke-linejoin="round" />
`;

const SVG_X = `
  <line x1="22" y1="24" x2="42" y2="44" stroke="#fff" stroke-width="5" stroke-linecap="round" />
  <line x1="42" y1="24" x2="22" y2="44" stroke="#fff" stroke-width="5" stroke-linecap="round" />
`;

const SVG_QUESTION = `
  <text x="32" y="40" text-anchor="middle" fill="#fff"
    font-size="28" font-weight="bold" font-family="sans-serif">?</text>
`;

function setShield(state) {
  container.className = 'container';
  container.classList.add(`shield-${state}`);

  if (state === 'green')     shieldSymbol.innerHTML = SVG_CHECK;
  else if (state === 'red')  shieldSymbol.innerHTML = SVG_X;
  else                       shieldSymbol.innerHTML = SVG_QUESTION;
}

function showStatus(result) {
  if (!result || result.error) {
    setShield('gray');
    domainEl.textContent = result?.domain || 'Onbekend';
    statusEl.textContent = 'Kon niet controleren';
    statusEl.className = 'status unknown';
    descriptionEl.textContent = result?.error
      ? `Fout: ${result.error}`
      : 'Geen informatie beschikbaar voor deze pagina.';
    return;
  }

  domainEl.textContent = result.domain;

  if (result.dnssec) {
    setShield('green');
    statusEl.textContent = 'DNSSEC Beveiligd';
    statusEl.className = 'status secure';
    descriptionEl.textContent =
      'Deze website gebruikt DNSSEC. DNS-antwoorden zijn cryptografisch geverifieerd, wat beschermt tegen DNS-spoofing en manipulatie.';
  } else {
    setShield('red');
    statusEl.textContent = 'Geen DNSSEC';
    statusEl.className = 'status insecure';
    descriptionEl.textContent =
      'Deze website gebruikt geen DNSSEC. DNS-antwoorden worden niet cryptografisch geverifieerd, waardoor ze kwetsbaar kunnen zijn voor manipulatie.';
  }
}

function showNoWeb() {
  setShield('gray');
  domainEl.textContent = 'Geen website';
  statusEl.textContent = 'Niet beschikbaar';
  statusEl.className = 'status unknown';
  descriptionEl.textContent = 'DNSSEC-controle is alleen beschikbaar op HTTP/HTTPS websites.';
  recheckBtn.style.display = 'none';
}

// Get current tab and fetch status
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const tab = tabs[0];
  if (!tab) {
    showNoWeb();
    return;
  }

  try {
    const url = new URL(tab.url);
    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
      showNoWeb();
      return;
    }
  } catch {
    showNoWeb();
    return;
  }

  chrome.runtime.sendMessage(
    { type: 'getStatus', tabId: tab.id },
    (result) => {
      if (result) {
        showStatus(result);
      } else {
        domainEl.textContent = new URL(tab.url).hostname;
        setShield('gray');
        statusEl.textContent = 'Controleren...';
        statusEl.className = 'status unknown';
        descriptionEl.textContent = 'Even geduld, DNSSEC wordt gecontroleerd.';

        // Wait and retry
        setTimeout(() => {
          chrome.runtime.sendMessage(
            { type: 'getStatus', tabId: tab.id },
            (r) => showStatus(r)
          );
        }, 2000);
      }
    }
  );

  // Recheck button
  recheckBtn.addEventListener('click', () => {
    recheckBtn.classList.add('loading');
    recheckBtn.disabled = true;

    setShield('gray');
    statusEl.textContent = 'Controleren...';
    statusEl.className = 'status unknown';
    descriptionEl.textContent = 'Opnieuw controleren...';

    chrome.runtime.sendMessage(
      { type: 'recheck', tabId: tab.id },
      (result) => {
        recheckBtn.classList.remove('loading');
        recheckBtn.disabled = false;
        showStatus(result);
      }
    );
  });
});