init commit
This commit is contained in:
318
popup.js
Normal file
318
popup.js
Normal file
@@ -0,0 +1,318 @@
|
||||
// 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);
|
||||
}
|
||||
Reference in New Issue
Block a user