function handleChadClick(e, magnet) {
  e.preventDefault(true);
  const a = e.target;
  if (a.processing) return;

  a.processing = true;
  a.style.borderBottom = 'dotted yellow';
  a.title = 'Processing';

  browser.runtime.sendMessage({magnet}).then((response) => {
    a.style.borderBottom = 'dotted green';
    a.title = 'Added';
  }, (error) => {
    console.log(`Error: ${error}`);
    a.style.borderBottom = 'dotted red';
    a.title = `${error}`;
    a.processing = false;
  });
}

async function processMagnets(el) {
  const opts = await browser.storage.local.get("enabled");
  if (!opts.enabled) return;

  const magnets = el.querySelectorAll("a[href^='magnet:?']")
  for (let magnet of magnets) {
    if (magnet.getAttribute('data-chadded')) continue;

    const img = document.createElement('img');
    img.src = browser.runtime.getURL("logo256.png");
    img.style = `width: auto; height: 1.2em; vertical-align: text-bottom; padding-right: 0.3em;`;
    const a = document.createElement('a');
    a.style = 'text-decoration: none;';
    a.appendChild(img);
    a.insertAdjacentText('beforeend', 'Add to Chad Music');
    a.addEventListener("click", (e) => handleChadClick(e, magnet.href));

    magnet.insertAdjacentElement('afterend', a);
    magnet.setAttribute('data-chadded', 1);
  }
}

// Process page
processMagnets(document.body);

// Now monitor the DOM for additions and substitute emoji into new nodes.
// @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes) mutation.addedNodes.forEach(processMagnets);
  });
});
observer.observe(document.body, {
  childList: true,
  subtree: true
});