Better icon handeling

Author: MrBlankCoding

README.md

@@ -56,21 +56,23 @@ node build.js
 ### Security & Permissions
 
 * [ ] Add new security settings
-
-  * [ ] Allow scripts to load external resources
-  * [ ] Enable loading of third-party libraries and external scripts
-  * [ ] Ask for confirmation when a script runs on a website for the first time
+* [ ] Allow scripts to load external resources
+* [ ] Enable loading of third-party libraries and external scripts
+* [ ] Ask for confirmation when a script runs on a website for the first time
 * [ ] Centralize script access permission checks
+* [ ] Add better trusted type managment
 
 ### Core Improvements
 
 * [ ] Fix version checking logic
+* [ ] Add script version checking
+* [ ] Add script update functionality
 * [ ] Improve `ExternalScriptLoader`
 * [ ] Refine `getScriptDescription` function
 * [ ] Deduplicate logic between `background.js`, `inject.js`, and `GM_core.js`
 * [ ] Unify or reuse declarations between `GM_core` and `inject`
 
-### Editor & UI
+### Editor
 
 * [ ] Reduce editor bundle size (~1.4 MB currently)
 * [ ] Split large editor manager files into smaller modules
@@ -80,10 +82,17 @@ node build.js
 * [ ] Modularize script import logic
 * [ ] Add option to toggle execution in main world or isolated world
 * [ ] Display execution world and run-at time in editor/dashboard
+* [ ] Log script errors and display in editor
+* [ ] Add a cap to how long text can be in the editor
+
+### UI
+
 * [ ] Improve URL display formatting
 * [ ] Refine CSS for menu commands and import UI
-* [ ] Log script errors and display in editor
 * [ ] Add iframe preview with live refresh
+* [ ] Fix editor optimizations
+* [ ] Add a cap to how long text can be in the dashboard
+
 
 
 ### Debugging & Notifications

src/editor/editor.html

@@ -110,7 +110,8 @@ <h3 class="panel-title">Script Information</h3>
                               </div>
                               <div class="form-group">
                                  <label for="scriptIcon" class="form-label">Icon URL</label>
-                                 <input type="url" id="scriptIcon" class="form-input" placeholder="https://example.com/icon.png">
+                                 <input type="url" id="scriptIcon" class="form-input" placeholder="https://... or data:image/png;base64,...">
+                                 <div class="form-hint">Supports http://, https://, or data:image/ URLs</div>
                               </div>
                            </div>
                         </div>

src/editor/editor_managers.js

@@ -1123,15 +1123,27 @@ export class FormValidator {
   validateIconUrl() {
     const icon = this.elements.scriptIcon?.value?.trim();
     if (!icon) return { isValid: true };
+    
+    // Allow data URLs (starts with data:image/)
+    if (icon.startsWith('data:image/')) {
+      // Basic validation for data URL format
+      if (!/^data:image\/[a-z+]+;base64,/.test(icon)) {
+        this.showValidationError("Invalid data URL format for icon. Must be a valid base64-encoded image.");
+        return { isValid: false };
+      }
+      return { isValid: true };
+    }
+    
+    // Otherwise validate as regular HTTP/HTTPS URL
     try {
       const u = new URL(icon);
       if (u.protocol !== "http:" && u.protocol !== "https:") {
-        this.showValidationError("Icon URL must start with http:// or https://");
+        this.showValidationError("Icon URL must be a valid http:// or https:// URL, or a data:image/ URL");
         return { isValid: false };
       }
       return { isValid: true };
     } catch {
-      this.showValidationError("Icon URL is not a valid URL.");
+      this.showValidationError("Invalid icon URL. Must be a valid http://, https://, or data:image/ URL");
       return { isValid: false };
     }
   }