319 lines
10 KiB
JavaScript
319 lines
10 KiB
JavaScript
// Popup script for Page Editor extension
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initializePopup();
|
|
});
|
|
|
|
function initializePopup() {
|
|
const toggle = document.getElementById('editModeToggle');
|
|
|
|
// Check current edit mode state
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const currentTab = tabs[0];
|
|
const pageUrl = currentTab.url;
|
|
const EDIT_MODE_KEY = `edit_mode_${btoa(pageUrl)}`;
|
|
|
|
chrome.storage.session.get([EDIT_MODE_KEY], (result) => {
|
|
const isEnabled = !!result[EDIT_MODE_KEY];
|
|
|
|
// Update toggle UI
|
|
if (isEnabled) {
|
|
toggle.classList.add('enabled');
|
|
document.getElementById('statusText').textContent = 'Enabled';
|
|
document.getElementById('statusText').classList.add('active');
|
|
document.getElementById('editInfo').classList.add('visible');
|
|
document.getElementById('keyboardShortcuts').classList.add('visible');
|
|
document.getElementById('editActionsSection').style.display = 'block';
|
|
} else {
|
|
toggle.classList.remove('enabled');
|
|
document.getElementById('statusText').textContent = 'Disabled';
|
|
document.getElementById('statusText').classList.remove('active');
|
|
document.getElementById('editInfo').classList.remove('visible');
|
|
document.getElementById('keyboardShortcuts').classList.remove('visible');
|
|
document.getElementById('editActionsSection').style.display = 'none';
|
|
}
|
|
|
|
updateEditStatus();
|
|
});
|
|
});
|
|
|
|
// Toggle click handler
|
|
toggle.addEventListener('click', () => {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const currentTab = tabs[0];
|
|
const pageUrl = currentTab.url;
|
|
const EDIT_MODE_KEY = `edit_mode_${btoa(pageUrl)}`;
|
|
|
|
// Get current state
|
|
chrome.storage.session.get([EDIT_MODE_KEY], (result) => {
|
|
const isCurrentlyEnabled = !!result[EDIT_MODE_KEY];
|
|
const newState = !isCurrentlyEnabled;
|
|
|
|
// Store new state
|
|
if (newState) {
|
|
chrome.storage.session.set({ [EDIT_MODE_KEY]: true });
|
|
} else {
|
|
chrome.storage.session.remove([EDIT_MODE_KEY]);
|
|
}
|
|
|
|
// Send message to content script
|
|
chrome.tabs.sendMessage(currentTab.id, {
|
|
action: 'toggleEditMode',
|
|
enabled: newState
|
|
}, (response) => {
|
|
if (chrome.runtime.lastError) {
|
|
console.log('Content script not ready:', chrome.runtime.lastError);
|
|
return;
|
|
}
|
|
|
|
// Update UI
|
|
if (newState) {
|
|
toggle.classList.add('enabled');
|
|
document.getElementById('statusText').textContent = 'Enabled';
|
|
document.getElementById('statusText').classList.add('active');
|
|
document.getElementById('editInfo').classList.add('visible');
|
|
document.getElementById('keyboardShortcuts').classList.add('visible');
|
|
document.getElementById('editActionsSection').style.display = 'block';
|
|
} else {
|
|
toggle.classList.remove('enabled');
|
|
document.getElementById('statusText').textContent = 'Disabled';
|
|
document.getElementById('statusText').classList.remove('active');
|
|
document.getElementById('editInfo').classList.remove('visible');
|
|
document.getElementById('keyboardShortcuts').classList.remove('visible');
|
|
document.getElementById('editActionsSection').style.display = 'none';
|
|
}
|
|
|
|
updateEditStatus();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
// Attach button listeners
|
|
attachButtonListeners();
|
|
}
|
|
|
|
function attachButtonListeners() {
|
|
// Save All button
|
|
const saveAllBtn = document.getElementById('saveAllBtn');
|
|
if (saveAllBtn) {
|
|
saveAllBtn.addEventListener('click', () => {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
chrome.scripting.executeScript({
|
|
target: { tabId: tabs[0].id },
|
|
function: () => {
|
|
const editableElements = document.querySelectorAll('[data-editable-marked]');
|
|
const edits = {};
|
|
|
|
// Manually save (calling saveAllEdits from content script)
|
|
editableElements.forEach((el) => {
|
|
if (el.textContent.trim().length > 0) {
|
|
console.log('[Page Editor] Saving element');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
updateEditStatus();
|
|
showMessage('All changes saved!', 'success');
|
|
}, 500);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Clear All button
|
|
const clearAllBtn = document.getElementById('clearAllBtn');
|
|
if (clearAllBtn) {
|
|
clearAllBtn.addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to clear all edits on this page? This cannot be undone.')) {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const pageUrl = tabs[0].url;
|
|
const storageKey = `page_edits_${btoa(pageUrl)}`;
|
|
|
|
chrome.storage.local.remove([storageKey], () => {
|
|
chrome.scripting.executeScript({
|
|
target: { tabId: tabs[0].id },
|
|
function: () => {
|
|
location.reload();
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
updateEditStatus();
|
|
showMessage('All edits cleared!', 'success');
|
|
}, 500);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Export button
|
|
const exportBtn = document.getElementById('exportBtn');
|
|
if (exportBtn) {
|
|
exportBtn.addEventListener('click', () => {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const pageUrl = tabs[0].url;
|
|
const storageKey = `page_edits_${btoa(pageUrl)}`;
|
|
|
|
chrome.storage.local.get([storageKey], (result) => {
|
|
const edits = result[storageKey] || {};
|
|
|
|
if (Object.keys(edits).length === 0) {
|
|
showMessage('No edits to export', 'error');
|
|
return;
|
|
}
|
|
|
|
const exportData = {
|
|
url: pageUrl,
|
|
exportedAt: new Date().toISOString(),
|
|
edits: edits
|
|
};
|
|
|
|
const dataStr = JSON.stringify(exportData, null, 2);
|
|
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
|
const url = URL.createObjectURL(dataBlob);
|
|
const filename = `page_edits_${Date.now()}.json`;
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = filename;
|
|
link.click();
|
|
|
|
URL.revokeObjectURL(url);
|
|
showMessage('Edits exported!', 'success');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateEditStatus() {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const currentTab = tabs[0];
|
|
const pageUrl = currentTab.url;
|
|
const storageKey = `page_edits_${btoa(pageUrl)}`;
|
|
|
|
chrome.storage.local.get([storageKey], (result) => {
|
|
const edits = result[storageKey] || {};
|
|
const editCount = Object.keys(edits).length;
|
|
|
|
const statusEl = document.getElementById('editStatus');
|
|
if (editCount === 0) {
|
|
statusEl.textContent = 'No edits yet on this page';
|
|
} else {
|
|
statusEl.innerHTML = `<span id="editCount">${editCount}</span> element${editCount !== 1 ? 's' : ''} edited`;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function showMessage(message, type = 'info') {
|
|
const statusEl = document.getElementById('editStatus');
|
|
const originalText = statusEl.textContent;
|
|
|
|
statusEl.textContent = message;
|
|
statusEl.style.color = type === 'success' ? '#2e7d32' : '#d32f2f';
|
|
|
|
setTimeout(() => {
|
|
statusEl.textContent = originalText;
|
|
statusEl.style.color = '#666';
|
|
}, 2000);
|
|
}
|
|
|
|
function attachButtonListeners() {
|
|
// Save All button
|
|
document.getElementById('saveAllBtn').addEventListener('click', () => {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
chrome.scripting.executeScript({
|
|
target: { tabId: tabs[0].id },
|
|
function: () => {
|
|
// Call the saveAllEdits function from content script
|
|
const event = new Event('save-all-edits');
|
|
document.dispatchEvent(event);
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
updateStatus();
|
|
showMessage('All changes saved!', 'success');
|
|
}, 500);
|
|
});
|
|
});
|
|
|
|
// Clear All button
|
|
document.getElementById('clearAllBtn').addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to clear all edits on this page? This cannot be undone.')) {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const pageUrl = tabs[0].url;
|
|
const storageKey = `page_edits_${btoa(pageUrl)}`;
|
|
|
|
chrome.storage.local.remove([storageKey], () => {
|
|
chrome.scripting.executeScript({
|
|
target: { tabId: tabs[0].id },
|
|
function: () => {
|
|
location.reload();
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
updateStatus();
|
|
showMessage('All edits cleared!', 'success');
|
|
}, 500);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// Export button
|
|
document.getElementById('exportBtn').addEventListener('click', () => {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
const pageUrl = tabs[0].url;
|
|
const storageKey = `page_edits_${btoa(pageUrl)}`;
|
|
|
|
chrome.storage.local.get([storageKey], (result) => {
|
|
const edits = result[storageKey] || {};
|
|
|
|
if (Object.keys(edits).length === 0) {
|
|
showMessage('No edits to export', 'error');
|
|
return;
|
|
}
|
|
|
|
const exportData = {
|
|
url: pageUrl,
|
|
exportedAt: new Date().toISOString(),
|
|
edits: edits
|
|
};
|
|
|
|
const dataStr = JSON.stringify(exportData, null, 2);
|
|
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
|
const url = URL.createObjectURL(dataBlob);
|
|
const filename = `page_edits_${Date.now()}.json`;
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = filename;
|
|
link.click();
|
|
|
|
URL.revokeObjectURL(url);
|
|
showMessage('Edits exported!', 'success');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function showMessage(message, type = 'info') {
|
|
const statusEl = document.getElementById('status');
|
|
const originalText = statusEl.textContent;
|
|
const originalClass = statusEl.className;
|
|
|
|
statusEl.textContent = message;
|
|
statusEl.className = `status ${type === 'success' ? 'success' : 'error'}`;
|
|
|
|
setTimeout(() => {
|
|
statusEl.textContent = originalText;
|
|
statusEl.className = originalClass;
|
|
}, 2000);
|
|
}
|