feat: added toggle for save to pc

.kiro/specs/save-to-pc-toggle/tasks.md

@@ -1,61 +1,61 @@
 # Implementation Plan
 
-- [ ] 1. Add save to PC toggle UI to popup
+- [x] 1. Add save to PC toggle UI to popup
   - Add HTML toggle control above the clipboard toggle in popup.html
   - Style the toggle control to match existing UI design patterns
   - Include proper ARIA labels and accessibility attributes for the toggle
   - Position the save to PC toggle logically above clipboard toggle
   - _Requirements: 1.1, 2.1, 2.4_
 
-- [ ] 2. Implement save to PC preference storage in popup
+- [x] 2. Implement save to PC preference storage in popup
   - Extend existing storage logic in popup.js to handle saveToPc preference
   - Set default value to true to maintain existing behavior for current users
   - Load saved save to PC preference on popup initialization
   - Save save to PC preference changes to chrome.storage.sync
   - _Requirements: 1.2, 1.3, 4.1, 4.2_
 
-- [ ] 3. Add validation logic for output method selection
+- [x] 3. Add validation logic for output method selection
   - Create validation function to ensure at least one output method is enabled
   - Display warning message in popup when both save to PC and clipboard are disabled
   - Prevent screenshot capture when no output method is selected
   - Update start button state based on validation results
   - _Requirements: 3.4_
 
-- [ ] 4. Update message passing to include save to PC setting
+- [x] 4. Update message passing to include save to PC setting
   - Modify startSelector message in popup.js to include saveToPc property
   - Update content script message handler to receive and store save to PC preference
   - Ensure backward compatibility with existing message structure
   - _Requirements: 1.1, 1.4_
 
-- [ ] 5. Implement conditional file download in content script
+- [x] 5. Implement conditional file download in content script
   - Modify captureElement method in ScreenshotSelector class to conditionally download files
   - Wrap existing download logic in conditional check for saveToPc preference
   - Ensure canvas generation still occurs regardless of download preference (needed for clipboard)
   - Maintain existing download filename generation and format
   - _Requirements: 1.4, 1.5, 3.1, 3.2_
 
-- [ ] 6. Update user feedback messages for different operation combinations
+- [x] 6. Update user feedback messages for different operation combinations
   - Modify success messages to reflect which operations were performed
   - Create specific messages for save-only, clipboard-only, and both operations
   - Update loading messages to reflect enabled operations
   - Ensure error messages are appropriate for each operation combination
   - _Requirements: 2.2, 2.3, 3.1, 3.2, 3.3_
 
-- [ ] 7. Add tooltip and help text for save to PC toggle
+- [x] 7. Add tooltip and help text for save to PC toggle
   - Implement tooltip showing save to PC feature explanation
   - Add help text explaining the relationship between save to PC and clipboard features
   - Ensure tooltip is accessible and keyboard navigable
   - Include information about default behavior and workflow flexibility
   - _Requirements: 2.4_
 
-- [ ] 8. Implement warning system for disabled output methods
+- [x] 8. Implement warning system for disabled output methods
   - Create visual warning when both save to PC and clipboard toggles are disabled
   - Display clear guidance on enabling at least one output method
   - Make warning accessible to screen readers
   - Update warning state dynamically as toggles change
   - _Requirements: 3.4_
 
-- [ ] 9. Test all combinations of save to PC and clipboard settings
+- [x] 9. Test all combinations of save to PC and clipboard settings
   - Write test cases for save-only mode (saveToPc: true, clipboard: false)
   - Write test cases for clipboard-only mode (saveToPc: false, clipboard: true)
   - Write test cases for both enabled (saveToPc: true, clipboard: true)

content.js

@@ -7,9 +7,10 @@ class ScreenshotSelector {
     this.style = null;
     this.background = 'black';
     this.copyToClipboard = true; // Default to true
+    this.saveToPc = true; // Default to true for backward compatibility
   }
 
-  async init(background = 'black', copyToClipboard = true) {
+  async init(background = 'black', copyToClipboard = true, saveToPc = true) {
     if (this.isActive) {
       console.log('Screenshot selector already active');
       return;
@@ -17,6 +18,7 @@ class ScreenshotSelector {
 
     this.background = background;
     this.copyToClipboard = copyToClipboard;
+    this.saveToPc = saveToPc;
     this.isActive = true;
 
     this.createUI();
@@ -365,12 +367,25 @@ class ScreenshotSelector {
 
   async captureElement(element) {
     try {
-      // Determine loading message based on clipboard settings
+      // Determine loading message based on enabled operations
       let loadingMessage = 'Capturing screenshot...';
-      if (this.copyToClipboard) {
+      
+      if (this.saveToPc && this.copyToClipboard) {
+        // Both operations enabled
         const availability = this.checkClipboardAPIAvailability();
         if (availability.available) {
           loadingMessage = 'Capturing screenshot and preparing for clipboard...';
+        } else {
+          loadingMessage = 'Capturing screenshot for download... (Clipboard not available)';
+        }
+      } else if (this.saveToPc && !this.copyToClipboard) {
+        // Only save to PC enabled
+        loadingMessage = 'Capturing screenshot for download...';
+      } else if (!this.saveToPc && this.copyToClipboard) {
+        // Only clipboard enabled
+        const availability = this.checkClipboardAPIAvailability();
+        if (availability.available) {
+          loadingMessage = 'Capturing screenshot for clipboard...';
         } else {
           loadingMessage = 'Capturing screenshot... (Clipboard not available)';
         }
@@ -480,11 +495,13 @@ class ScreenshotSelector {
       // Restore original styles
       Object.assign(element.style, originalStyles);
 
-      // Always download the image first (core functionality)
-      const link = document.createElement('a');
-      link.href = canvas.toDataURL('image/png');
-      link.download = `screenshot-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.png`;
-      link.click();
+      // Conditionally download the image based on saveToPc preference
+      if (this.saveToPc) {
+        const link = document.createElement('a');
+        link.href = canvas.toDataURL('image/png');
+        link.download = `screenshot-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.png`;
+        link.click();
+      }
 
       // Handle clipboard operations if enabled (after successful canvas generation and download)
       let clipboardResult = null;
@@ -513,26 +530,46 @@ class ScreenshotSelector {
         }
       }
 
-      // Generate user feedback message based on clipboard results
-      let successMessage = 'Screenshot downloaded successfully!';
+      // Generate user feedback message based on operation combinations
+      let successMessage = 'Screenshot captured!';
       let messageColor = 'rgba(39, 174, 96, 0.95)'; // Green for success
+      let messageIcon = '✅';
       
-      if (this.copyToClipboard) {
+      // Determine success message based on enabled operations
+      if (this.saveToPc && this.copyToClipboard) {
+        // Both operations enabled
         if (clipboardResult && clipboardResult.success) {
-          successMessage = 'Screenshot downloaded and copied to clipboard!';
-          // Keep green color for full success
+          successMessage = 'Screenshot saved and copied to clipboard!';
+          messageIcon = '✅';
         } else {
-          // Download succeeded but clipboard failed - provide specific error feedback
+          // Save succeeded but clipboard failed
           const errorMessage = this.getClipboardErrorMessage(clipboardResult);
-          successMessage = `Screenshot downloaded successfully! ${errorMessage}`;
+          successMessage = `Screenshot saved successfully! However, ${errorMessage.toLowerCase()}`;
           messageColor = 'rgba(243, 156, 18, 0.95)'; // Orange for partial success
+          messageIcon = '⚠️';
+        }
+      } else if (this.saveToPc && !this.copyToClipboard) {
+        // Only save to PC enabled
+        successMessage = 'Screenshot saved to downloads folder!';
+        messageIcon = '💾';
+      } else if (!this.saveToPc && this.copyToClipboard) {
+        // Only clipboard enabled
+        if (clipboardResult && clipboardResult.success) {
+          successMessage = 'Screenshot copied to clipboard!';
+          messageIcon = '📋';
+        } else {
+          // Clipboard failed - this is a complete failure since no other output method is enabled
+          const errorMessage = this.getClipboardErrorMessage(clipboardResult);
+          successMessage = `Screenshot capture failed: ${errorMessage}`;
+          messageColor = 'rgba(231, 76, 60, 0.95)'; // Red for failure
+          messageIcon = '❌';
         }
       }
 
       this.overlay.innerHTML = `
         <div style="position: fixed; top: 20px; left: 20px; background: ${messageColor}; color: white; padding: 12px 16px; border-radius: 8px; z-index: 2147483647; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
           <div style="display: flex; align-items: center; gap: 10px;">
-            <span>✅</span>
+            <span>${messageIcon}</span>
             <span>${successMessage}</span>
           </div>
         </div>
@@ -546,21 +583,35 @@ class ScreenshotSelector {
     } catch (error) {
       console.error('Screenshot failed:', error);
       
-      // Provide specific error messages for screenshot failures
+      // Provide specific error messages for screenshot failures based on enabled operations
       let errorMessage = 'Screenshot capture failed. Please try again.';
+      let operationContext = '';
+      
+      // Add context about what operations were attempted
+      if (this.saveToPc && this.copyToClipboard) {
+        operationContext = ' Neither file download nor clipboard copy could be completed.';
+      } else if (this.saveToPc && !this.copyToClipboard) {
+        operationContext = ' File download could not be completed.';
+      } else if (!this.saveToPc && this.copyToClipboard) {
+        operationContext = ' Clipboard copy could not be completed.';
+      }
       
       if (error.message) {
         if (error.message.includes('html2canvas')) {
-          errorMessage = 'Screenshot rendering failed. Try selecting a different element or refresh the page.';
+          errorMessage = `Screenshot rendering failed. Try selecting a different element or refresh the page.${operationContext}`;
         } else if (error.message.includes('timeout')) {
-          errorMessage = 'Screenshot capture timed out. Try selecting a smaller area or simpler element.';
+          errorMessage = `Screenshot capture timed out. Try selecting a smaller area or simpler element.${operationContext}`;
         } else if (error.message.includes('network') || error.message.includes('CORS')) {
-          errorMessage = 'Screenshot failed: Some content is blocked by security restrictions.';
+          errorMessage = `Screenshot failed: Some content is blocked by security restrictions.${operationContext}`;
         } else if (error.message.includes('memory') || error.message.includes('quota')) {
-          errorMessage = 'Screenshot failed: Not enough memory. Try capturing a smaller area.';
+          errorMessage = `Screenshot failed: Not enough memory. Try capturing a smaller area.${operationContext}`;
         } else if (error.message.includes('canvas')) {
-          errorMessage = 'Screenshot failed: Unable to create image. Try a different element.';
+          errorMessage = `Screenshot failed: Unable to create image. Try a different element.${operationContext}`;
+        } else {
+          errorMessage = `Screenshot capture failed: ${error.message}${operationContext}`;
         }
+      } else {
+        errorMessage = `Screenshot capture failed. Please try again.${operationContext}`;
       }
       
       this.overlay.innerHTML = `
@@ -661,61 +712,62 @@ class ScreenshotSelector {
    */
   getClipboardErrorMessage(clipboardResult) {
     if (!clipboardResult || !clipboardResult.error) {
-      return 'Clipboard copy failed due to unknown error.';
+      return 'clipboard copy failed due to unknown error';
     }
 
     const errorType = clipboardResult.errorType;
     const errorMessage = clipboardResult.error;
 
     // Provide contextual error messages based on error type
+    // Note: These messages are designed to work in the context of "Screenshot saved successfully! However, [message]"
     switch (errorType) {
       case 'permission_denied':
-        return 'Clipboard copy failed: Permission denied. Please allow clipboard access in your browser settings.';
+        return 'clipboard copy failed: permission denied. Please allow clipboard access in your browser settings';
       
       case 'not_supported':
       case 'api_unavailable':
-        return 'Clipboard copy not available in this browser. Screenshot was still downloaded.';
+        return 'clipboard copy is not available in this browser';
       
       case 'security_error':
-        return 'Clipboard copy blocked by browser security. Try using HTTPS or check site permissions.';
+        return 'clipboard copy was blocked by browser security. Try using HTTPS or check site permissions';
       
       case 'size_limit':
       case 'quota_exceeded':
-        return 'Clipboard copy failed: Image too large. Try capturing a smaller area.';
+        return 'clipboard copy failed: image too large. Try capturing a smaller area';
       
       case 'timeout':
-        return 'Clipboard copy timed out. The image may be too large or complex.';
+        return 'clipboard copy timed out. The image may be too large or complex';
       
       case 'network_error':
-        return 'Clipboard copy failed due to network error. Please try again.';
+        return 'clipboard copy failed due to network error. Please try again';
       
       case 'canvas_conversion':
-        return 'Clipboard copy failed: Unable to prepare image. Try capturing a different element.';
+        return 'clipboard copy failed: unable to prepare image. Try capturing a different element';
       
       case 'clipboard_item_creation':
-        return 'Clipboard copy not supported: Your browser doesn\'t support image clipboard operations.';
+        return 'clipboard copy is not supported: your browser doesn\'t support image clipboard operations';
       
       case 'invalid_state':
-        return 'Clipboard copy failed: Browser clipboard is busy. Please try again.';
+        return 'clipboard copy failed: browser clipboard is busy. Please try again';
       
       case 'data_error':
-        return 'Clipboard copy failed: Invalid image data. Please try capturing again.';
+        return 'clipboard copy failed: invalid image data. Please try capturing again';
       
       case 'unexpected':
-        return 'Clipboard copy failed due to unexpected error. Screenshot was still downloaded.';
+        return 'clipboard copy failed due to unexpected error';
       
       default:
         // For unknown error types, try to extract meaningful info from the error message
         if (errorMessage.includes('permission') || errorMessage.includes('denied')) {
-          return 'Clipboard copy failed: Access denied. Check browser permissions.';
+          return 'clipboard copy failed: access denied. Check browser permissions';
         } else if (errorMessage.includes('not supported') || errorMessage.includes('unavailable')) {
-          return 'Clipboard copy not supported in this browser.';
+          return 'clipboard copy is not supported in this browser';
         } else if (errorMessage.includes('timeout') || errorMessage.includes('timed out')) {
-          return 'Clipboard copy timed out. Try capturing a smaller area.';
+          return 'clipboard copy timed out. Try capturing a smaller area';
         } else if (errorMessage.includes('large') || errorMessage.includes('size')) {
-          return 'Clipboard copy failed: Image too large for clipboard.';
+          return 'clipboard copy failed: image too large for clipboard';
         } else {
-          return `Clipboard copy failed: ${errorMessage}`;
+          return `clipboard copy failed: ${errorMessage.toLowerCase()}`;
         }
     }
   }
@@ -893,7 +945,9 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     case 'startSelector':
       // Extract clipboard preference from message, default to true for backward compatibility
       const copyToClipboard = message.copyToClipboard !== undefined ? message.copyToClipboard : true;
-      screenshotSelector.init(message.background, copyToClipboard);
+      // Extract save to PC preference from message, default to true for backward compatibility
+      const saveToPc = message.saveToPc !== undefined ? message.saveToPc : true;
+      screenshotSelector.init(message.background, copyToClipboard, saveToPc);
       sendResponse({ success: true });
       break;
 

popup.html

@@ -241,6 +241,23 @@
       background: #f8d7da;
       color: #721c24;
     }
+
+    .status.warning {
+      background: #fff3cd;
+      color: #856404;
+      border: 1px solid #ffeaa7;
+    }
+
+    .btn:disabled {
+      background: #6c757d;
+      color: #fff;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .btn:disabled:hover {
+      background: #6c757d;
+    }
   </style>
 </head>
 <body>
@@ -258,6 +275,39 @@
     </select>
   </div>
 
+  <div class="setting-group">
+    <div class="toggle-container">
+      <label for="save-to-pc-toggle" class="toggle-label">
+        Save to PC
+        <div class="tooltip">
+          <div class="tooltip-icon" tabindex="0" role="button" aria-label="Show save to PC feature information">?</div>
+          <div class="tooltip-content" role="tooltip">
+            <strong>Save to PC Feature</strong><br>
+            When enabled, screenshots are automatically downloaded as PNG files to your default downloads folder.<br><br>
+            <strong>File Details:</strong><br>
+            • Format: PNG with timestamp<br>
+            • Location: Browser's default download folder<br>
+            • Naming: screenshot-YYYY-MM-DD-HH-MM-SS.png<br><br>
+            <strong>Note:</strong> You can use this independently of the clipboard feature for maximum workflow flexibility.
+          </div>
+        </div>
+      </label>
+      <div class="toggle-switch">
+        <input 
+          type="checkbox" 
+          id="save-to-pc-toggle" 
+          checked
+          aria-describedby="save-to-pc-help"
+          aria-label="Toggle save screenshot to PC"
+        >
+        <span class="toggle-slider" role="presentation"></span>
+      </div>
+    </div>
+    <div id="save-to-pc-help" class="toggle-help">
+      Automatically download screenshots as PNG files to your computer. Hover over the "?" for more details.
+    </div>
+  </div>
+
   <div class="setting-group">
     <div class="toggle-container">
       <label for="clipboard-toggle" class="toggle-label">
@@ -271,7 +321,7 @@
             • Chrome 76+, Firefox 87+, Safari 13.1+<br>
             • Secure connection (HTTPS)<br>
             • Clipboard permissions may be required<br><br>
-            <strong>Note:</strong> Screenshots are always downloaded as files regardless of this setting.
+            <strong>Note:</strong> You can use this independently of the save to PC feature for maximum workflow flexibility.
           </div>
         </div>
       </label>
@@ -291,6 +341,10 @@
     </div>
   </div>
 
+  <div id="validation-warning" class="status warning" style="display: none;" role="alert" aria-live="polite">
+    ⚠️ Please enable at least one output method (Save to PC or Copy to Clipboard) to capture screenshots.
+  </div>
+
   <button id="start-selector" class="btn btn-primary">
     Start Element Selector
   </button>

popup.js

@@ -2,18 +2,43 @@
 document.addEventListener('DOMContentLoaded', async () => {
   const backgroundSelect = document.getElementById('background-select');
   const clipboardToggle = document.getElementById('clipboard-toggle');
+  const saveToPcToggle = document.getElementById('save-to-pc-toggle');
   const startBtn = document.getElementById('start-selector');
   const stopBtn = document.getElementById('stop-selector');
   const status = document.getElementById('status');
+  const validationWarning = document.getElementById('validation-warning');
 
   // Load saved preferences
-  const saved = await chrome.storage.sync.get(['backgroundPreference', 'copyToClipboard']);
+  const saved = await chrome.storage.sync.get(['backgroundPreference', 'copyToClipboard', 'saveToPc']);
   if (saved.backgroundPreference) {
     backgroundSelect.value = saved.backgroundPreference;
   }
   
   // Set clipboard preference (default to true if not set)
   clipboardToggle.checked = saved.copyToClipboard !== undefined ? saved.copyToClipboard : true;
+  
+  // Set save to PC preference (default to true if not set to maintain existing behavior)
+  saveToPcToggle.checked = saved.saveToPc !== undefined ? saved.saveToPc : true;
+
+  // Validation function to ensure at least one output method is enabled
+  function validateOutputMethods() {
+    const hasValidOutput = clipboardToggle.checked || saveToPcToggle.checked;
+    
+    if (hasValidOutput) {
+      validationWarning.style.display = 'none';
+      startBtn.disabled = false;
+      startBtn.setAttribute('aria-describedby', '');
+    } else {
+      validationWarning.style.display = 'block';
+      startBtn.disabled = true;
+      startBtn.setAttribute('aria-describedby', 'validation-warning');
+    }
+    
+    return hasValidOutput;
+  }
+
+  // Initial validation check
+  validateOutputMethods();
 
   // Save background preference when changed
   backgroundSelect.addEventListener('change', () => {
@@ -23,10 +48,23 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Save clipboard preference when changed
   clipboardToggle.addEventListener('change', () => {
     chrome.storage.sync.set({ copyToClipboard: clipboardToggle.checked });
+    validateOutputMethods();
+  });
+
+  // Save save to PC preference when changed
+  saveToPcToggle.addEventListener('change', () => {
+    chrome.storage.sync.set({ saveToPc: saveToPcToggle.checked });
+    validateOutputMethods();
   });
 
   // Start selector
   startBtn.addEventListener('click', async () => {
+    // Validate output methods before proceeding
+    if (!validateOutputMethods()) {
+      showStatus('Error: Please enable at least one output method (Save to PC or Copy to Clipboard) to capture screenshots.', 'error');
+      return;
+    }
+
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
 
     // Check if page is compatible
@@ -44,10 +82,22 @@ document.addEventListener('DOMContentLoaded', async () => {
       await chrome.tabs.sendMessage(tab.id, {
         action: 'startSelector',
         background: backgroundSelect.value,
-        copyToClipboard: clipboardToggle.checked
+        copyToClipboard: clipboardToggle.checked,
+        saveToPc: saveToPcToggle.checked
       });
 
-      showStatus('Selector activated! Hover over elements and click to capture.', 'success');
+      // Generate activation message based on enabled operations
+      let activationMessage = 'Selector activated! Hover over elements and click to capture.';
+      
+      if (saveToPcToggle.checked && clipboardToggle.checked) {
+        activationMessage = 'Selector activated! Screenshots will be saved and copied to clipboard.';
+      } else if (saveToPcToggle.checked && !clipboardToggle.checked) {
+        activationMessage = 'Selector activated! Screenshots will be saved to downloads folder.';
+      } else if (!saveToPcToggle.checked && clipboardToggle.checked) {
+        activationMessage = 'Selector activated! Screenshots will be copied to clipboard only.';
+      }
+      
+      showStatus(activationMessage, 'success');
       toggleButtons(true);
 
       // Auto-close popup after starting
@@ -55,11 +105,27 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     } catch (error) {
       console.error('Full error details:', error);
+      
+      let errorMessage = 'Error: Could not activate on this page.';
+      
       if (error.message.includes('Could not establish connection')) {
-        showStatus('Error: Content script not loaded. Try refreshing the page.', 'error');
-      } else {
-        showStatus('Error: Could not activate on this page.', 'error');
+        errorMessage = 'Error: Content script not loaded. Try refreshing the page and try again.';
+      } else if (error.message.includes('permission')) {
+        errorMessage = 'Error: Permission denied. Check if the page allows extensions.';
+      } else if (error.message.includes('protocol')) {
+        errorMessage = 'Error: Cannot capture screenshots on this page type (chrome://, file://, etc.).';
       }
+      
+      // Add context about what operations were attempted
+      if (saveToPcToggle.checked && clipboardToggle.checked) {
+        errorMessage += ' Neither file download nor clipboard copy could be set up.';
+      } else if (saveToPcToggle.checked && !clipboardToggle.checked) {
+        errorMessage += ' File download could not be set up.';
+      } else if (!saveToPcToggle.checked && clipboardToggle.checked) {
+        errorMessage += ' Clipboard copy could not be set up.';
+      }
+      
+      showStatus(errorMessage, 'error');
     }
   });
 
@@ -126,43 +192,47 @@ document.addEventListener('DOMContentLoaded', async () => {
   }
 
   function setupTooltipAccessibility() {
-    const tooltipIcon = document.querySelector('.tooltip-icon');
-    const tooltipContent = document.querySelector('.tooltip-content');
+    const tooltips = document.querySelectorAll('.tooltip');
     
-    if (!tooltipIcon || !tooltipContent) return;
+    tooltips.forEach(tooltip => {
+      const tooltipIcon = tooltip.querySelector('.tooltip-icon');
+      const tooltipContent = tooltip.querySelector('.tooltip-content');
+      
+      if (!tooltipIcon || !tooltipContent) return;
 
-    // Handle keyboard events for tooltip
-    tooltipIcon.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        // Toggle tooltip visibility on Enter/Space
-        const isVisible = tooltipContent.style.visibility === 'visible';
-        tooltipContent.style.visibility = isVisible ? 'hidden' : 'visible';
-        tooltipContent.style.opacity = isVisible ? '0' : '1';
-      } else if (e.key === 'Escape') {
-        // Hide tooltip on Escape
-        tooltipContent.style.visibility = 'hidden';
-        tooltipContent.style.opacity = '0';
-      }
-    });
-
-    // Hide tooltip when clicking outside
-    document.addEventListener('click', (e) => {
-      if (!tooltipIcon.contains(e.target)) {
-        tooltipContent.style.visibility = 'hidden';
-        tooltipContent.style.opacity = '0';
-      }
-    });
-
-    // Handle focus loss
-    tooltipIcon.addEventListener('blur', (e) => {
-      // Small delay to allow for focus to move to tooltip content if needed
-      setTimeout(() => {
-        if (!tooltipIcon.matches(':focus-within')) {
+      // Handle keyboard events for tooltip
+      tooltipIcon.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          // Toggle tooltip visibility on Enter/Space
+          const isVisible = tooltipContent.style.visibility === 'visible';
+          tooltipContent.style.visibility = isVisible ? 'hidden' : 'visible';
+          tooltipContent.style.opacity = isVisible ? '0' : '1';
+        } else if (e.key === 'Escape') {
+          // Hide tooltip on Escape
           tooltipContent.style.visibility = 'hidden';
           tooltipContent.style.opacity = '0';
         }
-      }, 100);
+      });
+
+      // Hide tooltip when clicking outside
+      document.addEventListener('click', (e) => {
+        if (!tooltip.contains(e.target)) {
+          tooltipContent.style.visibility = 'hidden';
+          tooltipContent.style.opacity = '0';
+        }
+      });
+
+      // Handle focus loss
+      tooltipIcon.addEventListener('blur', (e) => {
+        // Small delay to allow for focus to move to tooltip content if needed
+        setTimeout(() => {
+          if (!tooltipIcon.matches(':focus-within')) {
+            tooltipContent.style.visibility = 'hidden';
+            tooltipContent.style.opacity = '0';
+          }
+        }, 100);
+      });
     });
   }
 });
@@ -173,15 +243,44 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     const startBtn = document.getElementById('start-selector');
     const stopBtn = document.getElementById('stop-selector');
     const status = document.getElementById('status');
+    const saveToPcToggle = document.getElementById('save-to-pc-toggle');
+    const clipboardToggle = document.getElementById('clipboard-toggle');
 
     startBtn.style.display = 'block';
     stopBtn.style.display = 'none';
 
     if (message.reason === 'screenshot-taken') {
-      status.textContent = 'Screenshot captured!';
+      // Generate success message based on current toggle states
+      let successMessage = 'Screenshot captured!';
+      
+      if (saveToPcToggle.checked && clipboardToggle.checked) {
+        successMessage = 'Screenshot saved and copied to clipboard!';
+      } else if (saveToPcToggle.checked && !clipboardToggle.checked) {
+        successMessage = 'Screenshot saved to downloads folder!';
+      } else if (!saveToPcToggle.checked && clipboardToggle.checked) {
+        successMessage = 'Screenshot copied to clipboard!';
+      }
+      
+      status.textContent = successMessage;
       status.className = 'status success';
       status.style.display = 'block';
       setTimeout(() => status.style.display = 'none', 2000);
+    } else if (message.reason === 'screenshot-failed') {
+      // Handle screenshot failure
+      let failureMessage = 'Screenshot capture failed. Please try again.';
+      
+      if (saveToPcToggle.checked && clipboardToggle.checked) {
+        failureMessage = 'Screenshot capture failed. Neither file download nor clipboard copy could be completed.';
+      } else if (saveToPcToggle.checked && !clipboardToggle.checked) {
+        failureMessage = 'Screenshot capture failed. File download could not be completed.';
+      } else if (!saveToPcToggle.checked && clipboardToggle.checked) {
+        failureMessage = 'Screenshot capture failed. Clipboard copy could not be completed.';
+      }
+      
+      status.textContent = failureMessage;
+      status.className = 'status error';
+      status.style.display = 'block';
+      setTimeout(() => status.style.display = 'none', 3000);
     }
   }
 });