Display optional modules for extensions

public/scripts/extensions.js

@@ -211,6 +211,14 @@ function showExtensionsDetails() {
         html += `<h4>${DOMPurify.sanitize(manifest.display_name)}</h4>`;
         if (activeExtensions.has(name)) {
             html += `<p class="success">Extension is active. <a href="javascript:void" data-name="${name}" class="disable_extension">Disable</a></p>`;
+            if (Array.isArray(manifest.optional)) {
+                const optional = new Set(manifest.optional);
+                modules.forEach(x => optional.delete(x));
+                if (optional.size > 0) {
+                    const optionalString = DOMPurify.sanitize([...optional].join(', '));
+                    html += `<p>Optional modules: <span class="optional">${optionalString}</span></p>`;
+                }
+            }
         }
         else if (disabledExtensions.includes(name)) {
             html += `<p class="disabled">Extension is disabled. <a href="javascript:void" data-name=${name} class="enable_extension">Enable</a></p>`;

public/scripts/extensions/caption/manifest.json

@@ -4,6 +4,7 @@
     "requires": [
         "caption"
     ],
+    "optional": [],
     "js": "index.js",
     "css": "style.css"
 }

public/scripts/extensions/dice/manifest.json

@@ -2,6 +2,7 @@
     "display_name": "D&D Dice",
     "loading_order": 5,
     "requires": [],
+    "optional": [],
     "js": "index.js",
     "css": "style.css"
 }

public/scripts/extensions/expressions/manifest.json

@@ -2,6 +2,9 @@
     "display_name": "Character Expressions",
     "loading_order": 6,
     "requires": [],
+    "optional": [
+        "classify"
+    ],
     "js": "index.js",
     "css": "style.css"
 }

public/scripts/extensions/floating-prompt/manifest.json

@@ -2,6 +2,7 @@
     "display_name": "Floating Prompt / Author's Note",
     "loading_order": 1,
     "requires": [],
+    "optional": [],
     "js": "index.js",
     "css": "style.css"
 }

public/scripts/extensions/memory/manifest.json

@@ -4,6 +4,7 @@
     "requires": [
         "summarize"
     ],
+    "optional": [],
     "js": "index.js",
     "css": "style.css"
 }

public/style.css

@@ -2655,6 +2655,10 @@ label[for="extensions_autoconnect"] {
     color: red;
 }
 
+.optional {
+    color: lightgray;
+}
+
 .expander {
     flex-grow: 1;
 }