Upload files to "popup"
This commit is contained in:
94
popup/options.html
Normal file
94
popup/options.html
Normal file
@@ -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>
|
||||||
111
popup/options.js
Normal file
111
popup/options.js
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user