atj393 · Ananta2003 · Oct 12, 2024
diff --git a/content.js b/content.js
@@ -157,4 +157,37 @@ function setCaretToEnd(element) {
   selection.removeAllRanges();
   selection.addRange(range);
   element.focus();
-}
+}
+
+document.addEventListener("DOMContentLoaded", async () => {
+  const inputField = document.querySelector(".ProseMirror[contenteditable='true']") || document.querySelector("#prompt-textarea");
+
+  if (inputField) {
+      const autoSaveEnabled = await getUserPreferences();
+
+      if (autoSaveEnabled) {
+          inputField.addEventListener("input", () => {
+              const userId = "user123"; // Replace with actual user ID or method to get it
+              const url = window.location.href;
+              const storageKey = `${userId}_${url}`; // Create a unique key for each user and URL
+
+              // Save the input value
+              chrome.storage.local.set({ [storageKey]: inputField.innerText }, () => {
+                console.log("Data saved under key:", storageKey, "Value:", inputField.innerText);
+            });
+        });
+      }
+  }else {
+    console.error("Input field not found.");
+}
+});
+
+// Function to get user preferences from storage
+function getUserPreferences() {
+  return new Promise((resolve) => {
+      chrome.storage.local.get(["autoSaveEnabled"], (result) => {
+          console.log("Auto-save preference loaded:", result.autoSaveEnabled);
+          resolve(result.autoSaveEnabled);
+      });
+  });
+}
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Prompt Save Reuse: ChatGPT & Gemini",
     "version": "2.0",
-    "description": "Save and reuse prompts in ChatGPT and Gemini. Single-click to save/retrieve, double-click to append, right-click for more options. Now with improved UX and additional features.", // Updated description if necessary
+    "description": "Save and reuse prompts in ChatGPT and Gemini. Single-click to save/retrieve, double-click to append, right-click for more options. Now with improved UX and additional features.", 
     "permissions": ["storage", "activeTab", "scripting", "contextMenus"],
     "background": {
       "service_worker": "background.js"
@@ -19,6 +19,7 @@
     },
     "action": {
       "default_title": "Prompt Save Reuse"
-    }
+    },
+    "options_page": "options.html" 
   }
 
diff --git a/options.css b/options.css
@@ -0,0 +1,97 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: white; /* Default light background */
+    margin: 20px;
+    padding: 20px;
+    height: 100vh;
+}
+
+.settings-container {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    width: 300px;
+}
+
+h1 {
+    font-size: 32px;
+    margin-bottom: 20px;
+    color: black;
+    font-weight: 700;
+}
+
+label {
+    display: flex;
+    margin: 10px 0;
+    font-size: 20px;
+    color: #555;
+}
+
+input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+button {
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-size: 18px;
+    transition: background-color 0.3s;
+    margin-top: 5px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+input[type="checkbox"]:checked {
+    background-color: #007bff;
+}
+
+#custom-command {
+    padding: 3px 2px;
+    margin: 0 5px;
+    width: 25%;
+}
+
+.command-label {
+    display: flex;
+    margin: 10px;
+}
+
+.theme-selector {
+    display: flex;
+    margin: 10px 0;
+}
+
+/* Dark mode styles */
+body.dark-mode {
+    background-color: black;
+    color: white;
+}
+
+body.dark-mode .settings-container {
+    background-color: #333;
+    color: white;
+}
+
+body.dark-mode h1 {
+    color: white;
+}
+
+body.dark-mode label {
+    color: #ccc;
+}
+
+body.dark-mode button {
+    background-color: #444;
+    color: #fff;
+}
+
+body.dark-mode button:hover {
+    background-color: #666;
+}
diff --git a/options.html b/options.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Options - Prompt Save Reuse</title>
+    <link rel="stylesheet" href="/options.css"> <!-- Link to your CSS file if needed -->
+    <script src="options.js" defer></script>
+</head>
+<body>
+    <h1>Extension Settings</h1>
+    <form id="options-form">
+        <div>
+            <label>
+                <input type="checkbox" id="auto-save" />
+                Enable Auto-Save
+            </label>
+        </div>
+        <div class="command-label">
+            <label for="custom-command">Custom Command:</label>
+            <input type="text" id="custom-command" placeholder="Type your custom command" />
+        </div>
+        <div class="theme-selector">
+            <label for="theme">Select Theme:</label>
+            <select id="theme">
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+        </div>
+        <button type="submit">Save Settings</button>
+    </form>
+</body>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,61 @@
+// Load saved settings when the options page is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    loadSettings();
+    applyTheme(); // Apply the theme when the page is loaded
+});
+
+// Load settings from storage
+function loadSettings() {
+    chrome.storage.local.get(['autoSave', 'customCommand', 'theme'], (result) => {
+        document.getElementById('auto-save').checked = result.autoSave || false;
+        document.getElementById('custom-command').value = result.customCommand || '';
+        document.getElementById('theme').value = result.theme || 'light';
+
+        applyTheme(); // Apply the saved theme
+    });
+}
+
+// Save settings when the form is submitted
+document.getElementById('options-form').addEventListener('submit', (event) => {
+    event.preventDefault(); // Prevent form submission
+
+    const autoSave = document.getElementById('auto-save').checked;
+    const customCommand = document.getElementById('custom-command').value;
+    const theme = document.getElementById('theme').value;
+
+    // Save settings to storage
+    chrome.storage.local.set({ autoSave, customCommand, theme }, () => {
+        alert('Settings saved!');
+        applyTheme(); // Apply the selected theme after saving
+    });
+});
+
+// Function to apply the selected theme
+function applyTheme() {
+    const body = document.body;
+    const theme = document.getElementById('theme').value;
+
+    // Check if the theme is dark, then add or remove the 'dark-mode' class
+    if (theme === 'dark') {
+        body.classList.add('dark-mode');
+    } else {
+        body.classList.remove('dark-mode');
+    }
+}
+
+// Load auto-save preference
+document.addEventListener("DOMContentLoaded", () => {
+    const autoSaveCheckbox = document.getElementById("auto-save");
+
+    // Load user preference from storage
+    chrome.storage.local.get(["autoSaveEnabled"], (result) => {
+        autoSaveCheckbox.checked = result.autoSaveEnabled || false; // Default to false
+    });
+
+    // Save preference on change
+    autoSaveCheckbox.addEventListener("change", () => {
+        chrome.storage.local.set({ autoSaveEnabled: autoSaveCheckbox.checked }, () => {
+            console.log("Auto-save preference saved:", autoSaveCheckbox.checked);
+        });
+    });
+});