Upload files to "popup"

2025-07-26 14:36:33 +02:00
parent 511a371e78
commit 9ea0306e83
2 changed files with 205 additions and 0 deletions
--- a/popup/options.html
+++ b/popup/options.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Word Replacer - Options</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 15px;
+            min-width: 350px;
+            max-width: 100%;
+            background-color: #f9f9fa;
+        }
+        h1 {
+            color: #0c0c0d;
+            font-size: 1.5rem;
+            margin-bottom: 15px;
+        }
+        .word-pair {
+            display: flex;
+            margin-bottom: 10px;
+            align-items: center;
+        }
+        .word-pair input {
+            flex: 1;
+            margin-right: 5px;
+            padding: 8px;
+            border: 1px solid #d7d7db;
+            border-radius: 2px;
+        }
+        .word-pair button {
+            background-color: #e74c3c;
+            border: none;
+            color: white;
+            padding: 8px 12px;
+            cursor: pointer;
+            border-radius: 2px;
+        }
+        .buttons {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 15px;
+        }
+        .buttons button {
+            padding: 10px 15px;
+            border: none;
+            border-radius: 2px;
+            cursor: pointer;
+        }
+        #addPair {
+            background-color: #4caf50;
+            color: white;
+        }
+        #saveChanges {
+            background-color: #2196f3;
+            color: white;
+        }
+        .message {
+            margin-top: 10px;
+            padding: 8px;
+            border-radius: 2px;
+            display: none;
+        }
+        .success {
+            background-color: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        .error {
+            background-color: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+    </style>
+</head>
+<body>
+    <h1>Word Replacer - Options</h1>
+    
+    <div id="wordPairsContainer">
+        <!-- Word pairs will be added here dynamically -->
+    </div>
+    
+    <div class="buttons">
+        <button id="addPair">+ Add New Pair</button>
+        <button id="saveChanges">Save Changes</button>
+    </div>
+    
+    <div id="message" class="message"></div>
+    
+    <script src="options.js"></script>
+</body>
+</html>
--- a/popup/options.js
+++ b/popup/options.js
@@ -0,0 +1,111 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // References to DOM elements
+    const wordPairsContainer = document.getElementById('wordPairsContainer');
+    const addPairButton = document.getElementById('addPair');
+    const saveChangesButton = document.getElementById('saveChanges');
+    const messageElement = document.getElementById('message');
+    
+    // Load existing replacements
+    loadReplacements();
+    
+    // Event listeners
+    addPairButton.addEventListener('click', addNewPair);
+    saveChangesButton.addEventListener('click', saveChanges);
+    
+    // Function to load existing replacements
+    function loadReplacements() {
+        chrome.storage.local.get('wordReplacements', function(data) {
+            const replacements = data.wordReplacements || {};
+            
+            // Clear any existing pairs shown
+            wordPairsContainer.innerHTML = '';
+            
+            // Add existing pairs to the interface
+            for (const oldWord in replacements) {
+                addPairToUI(oldWord, replacements[oldWord]);
+            }
+            
+            // If there are no replacements, add at least one empty pair
+            if (Object.keys(replacements).length === 0) {
+                addNewPair();
+            }
+        });
+    }
+    
+    // Function to add a new pair to the interface
+    function addNewPair() {
+        addPairToUI('', '');
+    }
+    
+    // Function to add a specific pair to the interface
+    function addPairToUI(oldWord, newWord) {
+        const pairDiv = document.createElement('div');
+        pairDiv.className = 'word-pair';
+        
+        const oldWordInput = document.createElement('input');
+        oldWordInput.type = 'text';
+        oldWordInput.placeholder = 'Word to replace';
+        oldWordInput.value = oldWord;
+        oldWordInput.className = 'old-word';
+        
+        const newWordInput = document.createElement('input');
+        newWordInput.type = 'text';
+        newWordInput.placeholder = 'New word';
+        newWordInput.value = newWord;
+        newWordInput.className = 'new-word';
+        
+        const removeButton = document.createElement('button');
+        removeButton.textContent = 'X';
+        removeButton.title = 'Remove';
+        removeButton.addEventListener('click', function() {
+            pairDiv.remove();
+        });
+        
+        pairDiv.appendChild(oldWordInput);
+        pairDiv.appendChild(newWordInput);
+        pairDiv.appendChild(removeButton);
+        
+        wordPairsContainer.appendChild(pairDiv);
+    }
+    
+    // Function to save changes
+    function saveChanges() {
+        const pairDivs = wordPairsContainer.querySelectorAll('.word-pair');
+        const replacements = {};
+        
+        // Collect all valid pairs
+        pairDivs.forEach(function(pairDiv) {
+            const oldWord = pairDiv.querySelector('.old-word').value.trim();
+            const newWord = pairDiv.querySelector('.new-word').value.trim();
+            
+            if (oldWord && newWord) {
+                replacements[oldWord] = newWord;
+            }
+        });
+        
+        // Save to chrome.storage
+        chrome.storage.local.set({ wordReplacements: replacements }, function() {
+            showMessage('Changes saved successfully!', 'success');
+            
+            // Notify open pages of the change
+            chrome.tabs.query({}, function(tabs) {
+                for (let tab of tabs) {
+                    chrome.tabs.sendMessage(tab.id, {
+                        action: 'replacementsUpdated'
+                    }).catch(err => console.log('Error sending message to tab:', err));
+                }
+            });
+        });
+    }
+    
+    // Function to show messages
+    function showMessage(text, type) {
+        messageElement.textContent = text;
+        messageElement.className = 'message ' + type;
+        messageElement.style.display = 'block';
+        
+        setTimeout(function() {
+            messageElement.style.display = 'none';
+        }, 3000);
+    }
+});