Add image URL display with copy button to alt text extractor (#106)

* Initial plan

* Add image URL display with copy button to alt text extractor

Co-authored-by: simonw <9599+simonw@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>

Author: Copilot

alt-text-extractor.html

@@ -99,6 +99,28 @@
   font-style: italic;
 }
 
+.url-section {
+  margin-top: 15px;
+}
+
+.url-label {
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.url-display {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 14px;
+  color: #495057;
+  margin-bottom: 10px;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
 .copy-button {
   background-color: #007bff;
   color: white;
@@ -242,8 +264,30 @@ <h1>Alt text extractor</h1>
   altSection.appendChild(altDisplay);
   altSection.appendChild(copyButton);
 
+  // Create URL section
+  const urlSection = document.createElement('div');
+  urlSection.className = 'url-section';
+  
+  const urlLabel = document.createElement('div');
+  urlLabel.className = 'url-label';
+  urlLabel.textContent = 'Image URL:';
+  
+  const urlDisplay = document.createElement('div');
+  urlDisplay.className = 'url-display';
+  urlDisplay.textContent = src;
+  
+  const urlCopyButton = document.createElement('button');
+  urlCopyButton.className = 'copy-button';
+  urlCopyButton.textContent = 'Copy URL';
+  urlCopyButton.addEventListener('click', () => copyUrl(src, urlCopyButton));
+  
+  urlSection.appendChild(urlLabel);
+  urlSection.appendChild(urlDisplay);
+  urlSection.appendChild(urlCopyButton);
+  
   itemDiv.appendChild(imageContainer);
   itemDiv.appendChild(altSection);
+  itemDiv.appendChild(urlSection);
 
   results.appendChild(itemDiv);
 }
@@ -287,6 +331,43 @@ <h1>Alt text extractor</h1>
   }
 }
 
+async function copyUrl(url, button) {
+  try {
+    await navigator.clipboard.writeText(url);
+    
+    const originalText = button.textContent;
+    button.textContent = 'Copied!';
+    button.classList.add('copy-success');
+    
+    setTimeout(() => {
+      button.textContent = originalText;
+      button.classList.remove('copy-success');
+    }, 2000);
+    
+  } catch (err) {
+    console.error('Failed to copy URL: ', err);
+    
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = url;
+    document.body.appendChild(textArea);
+    textArea.select();
+    try {
+      document.execCommand('copy');
+      button.textContent = 'Copied!';
+      button.classList.add('copy-success');
+      
+      setTimeout(() => {
+        button.textContent = 'Copy URL';
+        button.classList.remove('copy-success');
+      }, 2000);
+    } catch (fallbackErr) {
+      console.error('Fallback copy failed: ', fallbackErr);
+    }
+    document.body.removeChild(textArea);
+  }
+}
+
 function clearAll() {
   pasteArea.innerHTML = '';
   results.innerHTML = '';