Quality of life changes

Author: MrBlankCoding

README.md

@@ -52,17 +52,11 @@ npm build.js
 * [ ] Enhance extension management for CodeMirror
 * [ ] Link CodeMirror minimap toggle
 * [ ] Move helper functions (`exportScript`, `generateTamperMonkeyHeader`) to separate files
-* [ ] Add option to toggle execution in main world or isolated world
-* [ ] Display execution world and run-at time in editor/dashboard
 
 ### UI
-* [ ] Make it so you choose where the modifcation goes on pages with mutiple scripts running
-* [ ] Change highlight theme color
 * [ ] Fix editor optimizations
 * [ ] Can you make it so if you have mutiple scripts running at once on the same page the notifications will expand verticlly and not all overlap
 
-### Helpers
-* [ ] Fix regrex
 ---
 
 ## Acknowledgments

src/GM/gm_core.js

@@ -223,7 +223,9 @@
       const stack = event.error?.stack || event.reason?.stack || '';
       const message = event.error?.message || event.reason?.message || event.message || 'Unknown error';
 
-      console.error(`CodeTweak: Error in script ${scriptId}:`, message, stack);
+      console.error(`CodeTweak: Error in user script (ID: ${scriptId}). This is likely an issue with the script itself, not CodeTweak.`, `
+Message: ${message}`, `
+Stack: ${stack}`);
       // Send to editor
       try {
         window.postMessage({
@@ -245,7 +247,9 @@
       const message = event.reason?.message || String(event.reason) || 'Unhandled promise rejection';
       const stack = event.reason?.stack || '';
 
-      console.error(`CodeTweak: Unhandled promise rejection in script ${scriptId}:`, message, stack);
+      console.error(`CodeTweak: Unhandled promise rejection in user script (ID: ${scriptId}). This is likely an issue with the script itself, not CodeTweak.`, `
+Message: ${message}`, `
+Stack: ${stack}`);
       try {
         window.postMessage({
           type: 'SCRIPT_ERROR',
@@ -286,6 +290,7 @@
 
       scriptEl.textContent = trustedCode;
       (document.head || document.documentElement || document.body).appendChild(scriptEl);
+      scriptEl.remove();
 
     } catch (err) {
       console.error(`CodeTweak: Error executing user script ${scriptId}:`, err);
@@ -305,6 +310,10 @@
       } catch (e) {
         console.error('Failed to report script execution error:', e);
       }
+    } finally {
+      // Clean up the event listeners
+      window.removeEventListener('error', errorHandler);
+      window.removeEventListener('unhandledrejection', rejectionHandler);
     }
   }
 

src/assets/styles/d_script_list.css

@@ -55,6 +55,17 @@
 .script-name-col {
   min-width: 0;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.script-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
 }
 
 .script-name {

src/assets/styles/dashboard.css

@@ -77,8 +77,8 @@ body {
 .tab-content {
   display: none;
   flex-direction: column;
-  height: 100%;
-  overflow: hidden;
+  flex: 1;
+  overflow: auto;
 }
 
 .tab-content.active {

src/assets/styles/e_sidebar.css

@@ -195,8 +195,6 @@
 
 /* Forms */
 .form-grid { display: flex; flex-direction: column; gap: var(--space-sm); }
-.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
-#info-panel .form-row { gap: var(--space-sm); }
 .form-group { margin-bottom: 0; position: relative; }
 
 .form-label {
@@ -210,14 +208,6 @@
   text-transform: uppercase;
   letter-spacing: 0.025em;
 }
-.label-required { color: var(--error); font-size: 10px; }
-.form-help {
-  display: block;
-  margin-top: var(--space-xs);
-  font-size: 10px;
-  color: var(--text-muted);
-  font-style: italic;
-}
 
 .form-input,
 .form-textarea,
@@ -709,4 +699,20 @@
     padding-bottom: 0;
     border-width: 0;
   }
+}
+
+.icon-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.icon-preview {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
 }

src/assets/styles/global_theme.css

@@ -1,6 +1,7 @@
 :root {
-  --primary: #61afef; 
-  --primary-hover: #528bff;
+  --accent-color: #61afef;
+  --primary: var(--accent-color); 
+  --primary-hover: var(--accent-color);
   --primary-light: rgba(97, 175, 239, 0.15);
   --secondary: #c678dd;
   --accent: #56b6c2;

src/background/background.js

@@ -307,6 +307,11 @@ function normalizeStackTrace(stack) {
 // Needs a rework
 async function storeScriptError(scriptId, error) {
   try {
+    const { settings = {} } = await chrome.storage.local.get("settings");
+    if (!settings.enhancedDebugging) {
+      return;
+    }
+
     const storageKey = `scriptErrors_${scriptId}`;
     const { [storageKey]: existingErrors = [] } = await chrome.storage.local.get(storageKey);
     const normalizedNewStack = normalizeStackTrace(error.stack);

src/dashboard/dashboard-logic.js

@@ -117,9 +117,11 @@ async function loadSettings(settingsElements) {
     const defaultSettings = {
       enableAllScripts: true,
       showNotifications: true,
+      enhancedDebugging: false,
       confirmBeforeRunning: false,
       allowExternalResources: true,
       confirmFirstRun: false,
+      accentColor: "#61afef",
     };
 
     // Apply defaults and update storage if needed
@@ -131,16 +133,24 @@ async function loadSettings(settingsElements) {
           settings[key] = defaultValue;
           shouldSaveDefaults = true;
         }
-        element.checked = settings[key];
+        if (element.type === 'color') {
+          element.value = settings[key];
+        } else {
+          element.checked = settings[key];
+        }
       }
     });
 
     // Save defaults to storage if any were missing
     if (shouldSaveDefaults) {
       await chrome.storage.local.set({ settings });
     }
-
 
+    // Apply theme
+    if (settings.accentColor) {
+      document.documentElement.style.setProperty('--accent-color', settings.accentColor);
+    }
+
   } catch (error) {
     console.error("Error loading settings:", error);
     showNotification("Error loading settings", "error");
@@ -155,14 +165,22 @@ async function saveSettings(settingsElements) {
     Object.keys(settingsElements).forEach((key) => {
       const element = settingsElements[key];
       if (element) {
-        settings[key] = element.checked;
+        if (element.type === 'color') {
+          settings[key] = element.value;
+        } else {
+          settings[key] = element.checked;
+        }
       }
     });
 
     await chrome.storage.local.set({ settings });
     showNotification("Settings saved successfully", "success");
     chrome.runtime.sendMessage({ action: "settingsUpdated" });
 
+    // Apply theme
+    if (settings.accentColor) {
+      document.documentElement.style.setProperty('--accent-color', settings.accentColor);
+    }
 
   } catch (error) {
     console.error("Error saving settings:", error);

src/dashboard/dashboard-ui.js

@@ -118,6 +118,14 @@ function createScriptListItem(script) {
   const nameCol = document.createElement("div");
   nameCol.className = "script-name-col";
 
+  if (script.icon) {
+    const icon = document.createElement("img");
+    icon.src = script.icon;
+    icon.className = "script-icon";
+    nameCol.appendChild(icon);
+  }
+
+  const nameAndDesc = document.createElement("div");
   const name = document.createElement("h3");
   name.className = "script-name";
   name.textContent = script.name;
@@ -126,7 +134,8 @@ function createScriptListItem(script) {
   description.className = "script-description";
   description.textContent = script.description || "No description provided.";
 
-  nameCol.append(name, description);
+  nameAndDesc.append(name, description);
+  nameCol.append(nameAndDesc);
 
   // Version column
   const versionCol = document.createElement("div");

src/dashboard/dashboard.html

@@ -115,6 +115,13 @@ <h3>General</h3>
                   <small>Display notifications when scripts run</small>
                 </span>
               </label>
+              <label class="setting-item">
+                <input type="checkbox" id="enhancedDebugging">
+                <span class="setting-label">
+                  <strong>Enhanced Debugging</strong>
+                  <small>Log detailed script information to the console</small>
+                </span>
+              </label>
             </div>
             <div class="settings-group">
               <h3>Security</h3>
@@ -133,6 +140,16 @@ <h3>Security</h3>
                 </span>
               </label>
             </div>
+            <div class="settings-group">
+              <h3>Theme</h3>
+              <label class="setting-item">
+                <span class="setting-label">
+                  <strong>Accent Color</strong>
+                  <small>Choose the accent color for the UI</small>
+                </span>
+                <input type="color" id="accentColor" value="#61afef">
+              </label>
+            </div>
             <div class="settings-actions">
               <button type="submit" class="btn-primary">Save Settings</button>
               <button type="reset" class="btn-secondary">Reset Defaults</button>