JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<div>
  <a href="https://example.com/real-url" class="custom-copy-link">Right-click me</a>

<div id="custom-context-menu" style="display:none;position:absolute;background:#fff;border:1px solid #ccc;">
    <button id="copy-link">Copy Modified Link</button>
</div>
</div>

JavaScript

document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        
        let menu = document.getElementById('custom-context-menu');
        menu.style.display = 'block';
        menu.style.top = event.pageY + 'px';
        menu.style.left = event.pageX + 'px';
        //console.log(event.target);
        //console.log(event.target.closest('.custom-copy-link'));
        let link = event.target.closest('.custom-copy-link');
        if (link) {
            document.getElementById('copy-link').onclick = function() {
               navigator.clipboard.writeText('https://example.com/custom-url')
  .then(() => {
    console.log('Text copied to clipboard');
  })
  .catch(err => {
    console.error('Failed to copy text: ', err);
  });
                menu.style.display = 'none';
            };
        }
    });

    document.addEventListener('click', function() {
        document.getElementById('custom-context-menu').style.display = 'none';
    });