diff --git a/popup/options.html b/popup/options.html
new file mode 100644
index 0000000..03ded53
--- /dev/null
+++ b/popup/options.html
@@ -0,0 +1,94 @@
+
+
+
+
+
+ Word Replacer - Options
+
+
+
+ Word Replacer - Options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/popup/options.js b/popup/options.js
new file mode 100644
index 0000000..e51f70f
--- /dev/null
+++ 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);
+ }
+});
\ No newline at end of file