jyapayne/screenshot-chrome-extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add copy to clipboard and save to pc toggle.

Browse source 
* escaped node modules from vcs

* feat: added copy to clipboard feature

* feat: added tests

* feat: added feature spec

* feat: added toggle for save to pc

* feat: added tests

* refactor: change toggle from '?' button to the 'switch' component

* Fix failing tests

* Update gitignore and remove unnecessary files

* Remove tooltips because they are unnecessary

---------

Co-authored-by: Joey Yakimowich-Payne <jyapayne@gmail.com>
This commit is contained in:
Karthikeyan N 2025-08-14 00:59:57 +05:30 • committed by Joey
commit 9dd4d706fa
12 changed files with 7780 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

125
popup.js
View file

@ -1,23 +1,70 @@
// Popup script for Chrome extension
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 background preference
const saved = await chrome.storage.sync.get(['backgroundPreference']);
// Load saved preferences
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', () => {
chrome.storage.sync.set({ backgroundPreference: backgroundSelect.value });
});
// 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
@ -34,10 +81,23 @@ document.addEventListener('DOMContentLoaded', async () => {
try {
await chrome.tabs.sendMessage(tab.id, {
action: 'startSelector',
background: backgroundSelect.value
background: backgroundSelect.value,
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
@ -45,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');
}
});
@ -69,6 +145,8 @@ document.addEventListener('DOMContentLoaded', async () => {
// Check current state
checkSelectorState();
// Tooltips removed
function toggleButtons(isActive) {
if (isActive) {
startBtn.style.display = 'none';
@ -111,6 +189,8 @@ document.addEventListener('DOMContentLoaded', async () => {
console.log('Content script not ready or selector inactive:', error.message);
}
}
// Tooltips removed: no setup needed
});
// Listen for messages from content script
@ -119,15 +199,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);
}
}
});