Merge pull request #3145 from SillyTavern/redesign-extension-manager Redesign extension manager

00006aa072b9cf3bd53e5253419c876a7274102d

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: 4bf58ca2d52131ce4815fb8a5fd1a939f8b7adcc 62be0939d01c1144bedb5ee9f98aedf5157fe5f0

.dockerignore+1 -0 Viewed

 /data
 /cache
 .DS_Store
+/public/scripts/extensions/third-party

.gitignore+2 -0 Viewed

 /default/scaffold
 public/scripts/extensions/third-party
 /certs
+.aider*
+.env

.npmignore+1 -0 Viewed

 .github
 .vscode
 .git
+/public/scripts/extensions/third-party

public/css/extensions-panel.css+47 -6 Viewed

@@ -65,7 +65,7 @@ label[for="extensions_autoconnect"] {
65	}	65	}
66		66
67	.extensions_info .extension_enabled {	67	.extensions_info .extension_enabled {
68	color: green;	68	font-weight: bold;
69	}	69	}
70		70
71	.extensions_info .extension_disabled {	71	.extensions_info .extension_disabled {

     color: gray;
+}
-input.extension_missing[type="checkbox"] {
+.extensions_info .extension_modules {
-    opacity: 0.5;
+    font-size: 0.8em;
+    font-weight: normal;
+}
-#extensions_list .disabled {
+.extensions_info .extension_block {
-    text-decoration: line-through;
+    display: flex;
-    color: lightgray;
+    flex-wrap: nowrap;
+    padding: 5px;
+    margin-bottom: 5px;
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 10px;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 5px;
+}
+.extensions_info .extension_name {
+    font-size: 1.05em;
+}
+.extensions_info .extension_version {
+    opacity: 0.8;
+    font-size: 0.8em;
+    font-weight: normal;
+    margin-left: 2px;
+}
+.extensions_info .extension_block a {
+    color: var(--SmartThemeBodyColor);
+}
+.extensions_info .extension_name.update_available {
+    color: limegreen;
+}
+input.extension_missing[type="checkbox"] {
+    opacity: 0.5;
+}
 .update-button {

 #extensionsMenu>div.extension_container:empty {
     display: none;
+}
+.extensions_info .extension_text_block {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.extensions_info .extension_actions {
+    flex-wrap: nowrap;
+}

public/scripts/extensions.js+490 -216 Viewed

 import { showLoader } from './loader.js';
 import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 import { renderTemplate, renderTemplateAsync } from './templates.js';
-import { isSubsetOf, setValueByPath } from './utils.js';
+import { delay, isSubsetOf, setValueByPath } from './utils.js';
 import { getContext } from './st-context.js';
+import { isAdmin } from './user.js';
+import { t } from './i18n.js';
+import { debounce_timeout } from './constants.js';
 export {
     getContext,
     getApiUrl,
-    loadExtensionSettings,
-    runGenerationInterceptors,
-    doExtrasFetch,
-    modules,
-    extension_settings,
-    ModuleWorkerWrapper,
 };
 /** @type {string[]} */
 export let extensionNames = [];
+/**
+ * Holds the type of each extension.
+ * Don't use this directly, use getExtensionType instead!
+ * @type {Record<string, string>}
+ */
+export let extensionTypes = {};
+/**
+ * A list of active modules provided by the Extras API.
+ * @type {string[]}
+ */
+export let modules = [];
+/**
+ * A set of active extensions.
+ * @type {Set<string>}
+ */
+let activeExtensions = new Set();
+const getApiUrl = () => extension_settings.apiUrl;
+const sortManifests = (a, b) => a.loading_order - b.loading_order;
+let connectedToApi = false;
+/**
+ * Holds manifest data for each extension.
+ * @type {Record<string, object>}
+ */
 let manifests = {};
-const defaultUrl = 'http://localhost:5100';
-let saveMetadataTimeout = null;
+/**
+ * Default URL for the Extras API.
+ */
+const defaultUrl = 'http://localhost:5100';
 let requiresReload = false;
 let stateChanged = false;
+let saveMetadataTimeout = null;
 export function saveMetadataDebounced() {
     const context = getContext();

@@ -51,9 +79,9 @@ export function saveMetadataDebounced() {
51	}	79	}
52		80
53	console.debug('Saving metadata...');	81	console.debug('Saving metadata...');
54	newContext.saveMetadata();	82	await newContext.saveMetadata();
55	console.debug('Saved metadata...');	83	console.debug('Saved metadata...');
56	}, 1000);	84	}, debounce_timeout.relaxed);
57	}	85	}
58		86
59	/**	87	/**

+}
 // Disables parallel updates
-class ModuleWorkerWrapper {
+export class ModuleWorkerWrapper {
     constructor(callback) {
         this.isBusy = false;
         this.callback = callback;

@@ -107,7 +135,7 @@ class ModuleWorkerWrapper {
107	}	135	}
108	}	136	}
109		137
110	const extension_settings = {	138	export const extension_settings = {
111	apiUrl: defaultUrl,	139	apiUrl: defaultUrl,
112	apiKey: '',	140	apiKey: '',
113	autoConnect: false,	141	autoConnect: false,

     disabled_attachments: [],
 };
-let modules = [];
-let activeExtensions = new Set();
-const getApiUrl = () => extension_settings.apiUrl;
-let connectedToApi = false;
 function showHideExtensionsMenu() {
     // Get the number of menu items that are not hidden
     const hasMenuItems = $('#extensionsMenu').children().filter((_, child) => $(child).css('display') !== 'none').length > 0;

 // Periodically check for new extensions
 const menuInterval = setInterval(showHideExtensionsMenu, 1000);
-async function doExtrasFetch(endpoint, args) {
+/**
+ * Gets the type of an extension based on its external ID.
+ * @param {string} externalId External ID of the extension (excluding or including the leading 'third-party/')
+ * @returns {string} Type of the extension (global, local, system, or empty string if not found)
+ */
+function getExtensionType(externalId) {
+    const id = Object.keys(extensionTypes).find(id => id === externalId || (id.startsWith('third-party') && id.endsWith(externalId)));
+    return id ? extensionTypes[id] : '';
+}
+/**
+ * Performs a fetch of the Extras API.
+ * @param {string|URL} endpoint Extras API endpoint
+ * @param {RequestInit} args Request arguments
+ * @returns {Promise<Response>} Response from the fetch
+ */
+export async function doExtrasFetch(endpoint, args = {}) {
     if (!args) {
         args = {};
+    }

         });
+    }
-    const response = await fetch(endpoint, args);
+    return await fetch(endpoint, args);
-    return response;
+}
+/**
+ * Discovers extensions from the API.
+ * @returns {Promise<{name: string, type: string}[]>}
+ */
 async function discoverExtensions() {
     try {
         const response = await fetch('/api/extensions/discover');

     enableExtension(name, false);
+}
+/**
+ * Enables an extension by name.
+ * @param {string} name Extension name
+ * @param {boolean} [reload=true] If true, reload the page after enabling the extension
+ */
 export async function enableExtension(name, reload = true) {
     extension_settings.disabledExtensions = extension_settings.disabledExtensions.filter(x => x !== name);
     stateChanged = true;

+    }
+}
+/**
+ * Disables an extension by name.
+ * @param {string} name Extension name
+ * @param {boolean} [reload=true] If true, reload the page after disabling the extension
+ */
 export async function disableExtension(name, reload = true) {
     extension_settings.disabledExtensions.push(name);
     stateChanged = true;

+    }
+}
+/**
+ * Loads manifest.json files for extensions.
+ * @param {string[]} names Array of extension names
+ * @returns {Promise<Record<string, object>>} Object with extension names as keys and their manifests as values
+ */
 async function getManifests(names) {
     const obj = {};
     const promises = [];

     return obj;
+}
+/**
+ * Tries to activate all available extensions that are not already active.
+ * @returns {Promise<void>}
+ */
 async function activateExtensions() {
-    const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order);
+    const extensions = Object.entries(manifests).sort((a, b) => sortManifests(a[1], b[1]));
     const promises = [];
     for (let entry of extensions) {
         const name = entry[0];
         const manifest = entry[1];
-        const elementExists = document.getElementById(name) !== null;
-        if (elementExists || activeExtensions.has(name)) {
+        if (activeExtensions.has(name)) {
             continue;
+        }
-        // all required modules are active (offline extensions require none)
+        const meetsModuleRequirements = !Array.isArray(manifest.requires) || isSubsetOf(modules, manifest.requires);
-        if (isSubsetOf(modules, manifest.requires)) {
+        const isDisabled = extension_settings.disabledExtensions.includes(name);
-            try {
-                const isDisabled = extension_settings.disabledExtensions.includes(name);
-                const li = document.createElement('li');
-                if (!isDisabled) {
-                    const promise = Promise.all([addExtensionScript(name, manifest), addExtensionStyle(name, manifest)]);
-                    await promise
-                        .then(() => activeExtensions.add(name))
-                        .catch(err => console.log('Could not activate extension: ' + name, err));
-                    promises.push(promise);
-                }
-                else {
-                    li.classList.add('disabled');
-                }
-                li.id = name;
-                li.innerText = manifest.display_name;
-                $('#extensions_list').append(li);
+        if (meetsModuleRequirements && !isDisabled) {
+            try {
+                console.debug('Activating extension', name);
+                const promise = Promise.all([addExtensionScript(name, manifest), addExtensionStyle(name, manifest)]);
+                await promise
+                    .then(() => activeExtensions.add(name))
+                    .catch(err => console.log('Could not activate extension', name, err));
+                promises.push(promise);
+            }
             catch (error) {
-                console.error(`Could not activate extension: ${name}`);
+                console.error('Could not activate extension', name);
                 console.error(error);
+            }
+        }

+}
 async function connectClickHandler() {
-    const baseUrl = $('#extensions_url').val();
+    const baseUrl = String($('#extensions_url').val());
-    extension_settings.apiUrl = String(baseUrl);
+    extension_settings.apiUrl = baseUrl;
     const testApiKey = $('#extensions_api_key').val();
     extension_settings.apiKey = String(testApiKey);
     saveSettingsDebounced();

+    }
+}
-/*     $(document).on('click', function (e) {
+/**
-        const target = $(e.target);
+ * Connects to the Extras API.
-        if (target.is(dropdown)) return;
+ * @param {string} baseUrl Extras API base URL
-        if (target.is(button) && dropdown.is(':hidden')) {
+ * @returns {Promise<void>}
-            dropdown.toggle(200);
+ */
-            popper.update();
-        }
-        if (target !== dropdown &&
-            target !== button &&
-            dropdown.is(":visible")) {
-            dropdown.hide(200);
-        }
-    });
-} */
 async function connectToApi(baseUrl) {
     if (!baseUrl) {
         return;

             const data = await getExtensionsResult.json();
             modules = data.modules;
             await activateExtensions();
-            eventSource.emit(event_types.EXTRAS_CONNECTED, modules);
+            await eventSource.emit(event_types.EXTRAS_CONNECTED, modules);
+        }
         updateStatus(getExtensionsResult.ok);

+    }
+}
+/**
+ * Updates the status of Extras API connection.
+ * @param {boolean} success Whether the connection was successful
+ */
 function updateStatus(success) {
     connectedToApi = success;
-    const _text = success ? 'Connected to API' : 'Could not connect to API';
+    const _text = success ? t`Connected to API` : t`Could not connect to API`;
     const _class = success ? 'success' : 'failure';
     $('#extensions_status').text(_text);
     $('#extensions_status').attr('class', _class);
+}
+/**
+ * Adds a CSS file for an extension.
+ * @param {string} name Extension name
+ * @param {object} manifest Extension manifest
+ * @returns {Promise<void>} When the CSS is loaded
+ */
 function addExtensionStyle(name, manifest) {
-    if (manifest.css) {
+    if (!manifest.css) {
-        return new Promise((resolve, reject) => {
+        return Promise.resolve();
-            const url = `/scripts/extensions/${name}/${manifest.css}`;
-            if ($(`link[id="${name}"]`).length === 0) {
-                const link = document.createElement('link');
-                link.id = name;
-                link.rel = 'stylesheet';
-                link.type = 'text/css';
-                link.href = url;
-                link.onload = function () {
-                    resolve();
-                };
-                link.onerror = function (e) {
-                    reject(e);
-                };
-                document.head.appendChild(link);
-            }
-        });
+    }
-    return Promise.resolve();
+    return new Promise((resolve, reject) => {
+        const url = `/scripts/extensions/${name}/${manifest.css}`;
+        if ($(`link[id="${name}"]`).length === 0) {
+            const link = document.createElement('link');
+            link.id = name;
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = url;
+            link.onload = function () {
+                resolve();
+            };
+            link.onerror = function (e) {
+                reject(e);
+            };
+            document.head.appendChild(link);
+        }
+    });
+}
+/**
+ * Loads a JS file for an extension.
+ * @param {string} name Extension name
+ * @param {object} manifest Extension manifest
+ * @returns {Promise<void>} When the script is loaded
+ */
 function addExtensionScript(name, manifest) {
-    if (manifest.js) {
+    if (!manifest.js) {
-        return new Promise((resolve, reject) => {
+        return Promise.resolve();
-            const url = `/scripts/extensions/${name}/${manifest.js}`;
-            let ready = false;
-            if ($(`script[id="${name}"]`).length === 0) {
-                const script = document.createElement('script');
-                script.id = name;
-                script.type = 'module';
-                script.src = url;
-                script.async = true;
-                script.onerror = function (err) {
-                    reject(err, script);
-                };
-                script.onload = script.onreadystatechange = function () {
-                    // console.log(this.readyState); // uncomment this line to see which ready states are called.
-                    if (!ready && (!this.readyState || this.readyState == 'complete')) {
-                        ready = true;
-                        resolve();
-                    }
-                };
-                document.body.appendChild(script);
-            }
-        });
+    }
-    return Promise.resolve();
+    return new Promise((resolve, reject) => {
+        const url = `/scripts/extensions/${name}/${manifest.js}`;
+        let ready = false;
+        if ($(`script[id="${name}"]`).length === 0) {
+            const script = document.createElement('script');
+            script.id = name;
+            script.type = 'module';
+            script.src = url;
+            script.async = true;
+            script.onerror = function (err) {
+                reject(err);
+            };
+            script.onload = function () {
+                if (!ready) {
+                    ready = true;
+                    resolve();
+                }
+            };
+            document.body.appendChild(script);
+        }
+    });
+}
 /**
  * Generates HTML string for displaying an extension in the UI.
+ *

  * @param {boolean} isDisabled - Whether the extension is disabled or not.
  * @param {boolean} isExternal - Whether the extension is external or not.
  * @param {string} checkboxClass - The class for the checkbox HTML element.
- * @return {Promise<string>} - The HTML string that represents the extension.
+ * @return {string} - The HTML string that represents the extension.
  */
-async function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
+function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
+    function getExtensionIcon() {
+        const type = getExtensionType(name);
+        switch (type) {
+            case 'global':
+                return '<i class="fa-sm fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
+            case 'local':
+                return '<i class="fa-sm fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
+            case 'system':
+                return '<i class="fa-sm fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
+            default:
+                return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
+        }
+    }
+    const isUserAdmin = isAdmin();
+    const extensionIcon = getExtensionIcon();
     const displayName = manifest.display_name;
-    let displayVersion = manifest.version ? ` v${manifest.version}` : '';
+    const displayVersion = manifest.version || '';
-    let isUpToDate = true;
+    const externalId = name.replace('third-party', '');
-    let updateButton = '';
     let originHtml = '';
     if (isExternal) {
-        let data = await getExtensionVersion(name.replace('third-party', ''));
+        originHtml = '<a>';
-        let branch = data.currentBranchName;
-        let commitHash = data.currentCommitHash;
-        let origin = data.remoteUrl;
-        isUpToDate = data.isUpToDate;
-        displayVersion = ` (${branch}-${commitHash.substring(0, 7)})`;
-        updateButton = isUpToDate ?
-            `<span class="update-button"><button class="btn_update menu_button" data-name="${name.replace('third-party', '')}" title="Up to date"><i class="fa-solid fa-code-commit fa-fw"></i></button></span>` :
-            `<span class="update-button"><button class="btn_update menu_button" data-name="${name.replace('third-party', '')}" title="Update available"><i class="fa-solid fa-download fa-fw"></i></button></span>`;
-        originHtml = `<a href="${origin}" target="_blank" rel="noopener noreferrer">`;
+    }
     let toggleElement = isActive || isDisabled ?
         `<input type="checkbox" title="Click to toggle" data-name="${name}" class="${isActive ? 'toggle_disable' : 'toggle_enable'} ${checkboxClass}" ${isActive ? 'checked' : ''}>` :
         `<input type="checkbox" title="Cannot enable extension" data-name="${name}" class="extension_missing ${checkboxClass}" disabled>`;
-    let deleteButton = isExternal ? `<span class="delete-button"><button class="btn_delete menu_button" data-name="${name.replace('third-party', '')}" title="Delete"><i class="fa-solid fa-trash-can"></i></button></span>` : '';
+    let deleteButton = isExternal ? `<button class="btn_delete menu_button" data-name="${externalId}" title="Delete"><i class="fa-fw fa-solid fa-trash-can"></i></button>` : '';
+    let updateButton = isExternal ? `<button class="btn_update menu_button displayNone" data-name="${externalId}" title="Update available"><i class="fa-solid fa-download fa-fw"></i></button>` : '';
-    // if external, wrap the name in a link to the repo
+    let moveButton = isExternal && isUserAdmin ? `<button class="btn_move menu_button" data-name="${externalId}" title="Move"><i class="fa-solid fa-folder-tree fa-fw"></i></button>` : '';
+    let modulesInfo = '';
-    let extensionHtml = `<hr>
-        <h4>
-            ${updateButton}
-            ${deleteButton}
-            ${originHtml}
-            <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
-                ${DOMPurify.sanitize(displayName)}${displayVersion}
-            </span>
-            ${isExternal ? '</a>' : ''}
-            <span style="float:right;">${toggleElement}</span>
-        </h4>`;
     if (isActive && 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(', '));
-            extensionHtml += `<p>Optional modules: <span class="optional">${optionalString}</span></p>`;
+            modulesInfo = `<div class="extension_modules">Optional modules: <span class="optional">${optionalString}</span></div>`;
+        }
     } else if (!isDisabled) { // Neither active nor disabled
         const requirements = new Set(manifest.requires);
         modules.forEach(x => requirements.delete(x));
         if (requirements.size > 0) {
             const requirementsString = DOMPurify.sanitize([...requirements].join(', '));
-            extensionHtml += `<p>Missing modules: <span class="failure">${requirementsString}</span></p>`;
+            modulesInfo = `<div class="extension_modules">Missing modules: <span class="failure">${requirementsString}</span></div>`;
+        }
+    }
+    // if external, wrap the name in a link to the repo
+    let extensionHtml = `
+        <div class="extension_block" data-name="${externalId}">
+            <div class="extension_toggle">
+                ${toggleElement}
+            </div>
+            <div class="extension_icon">
+                ${extensionIcon}
+            </div>
+            <div class="flexGrow extension_text_block">
+                ${originHtml}
+                <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
+                    <span class="extension_name">${DOMPurify.sanitize(displayName)}</span>
+                    <span class="extension_version">${DOMPurify.sanitize(displayVersion)}</span>
+                    ${modulesInfo}
+                </span>
+                ${isExternal ? '</a>' : ''}
+            </div>
+            <div class="extension_actions flex-container alignItemsCenter">
+                ${updateButton}
+                ${moveButton}
+                ${deleteButton}
+            </div>
+        </div>`;
     return extensionHtml;
+}

  * Gets extension data and generates the corresponding HTML for displaying the extension.
+ *
  * @param {Array} extension - An array where the first element is the extension name and the second element is the extension manifest.
- * @return {Promise<object>} - An object with 'isExternal' indicating whether the extension is external, and 'extensionHtml' for the extension's HTML string.
+ * @return {object} - An object with 'isExternal' indicating whether the extension is external, and 'extensionHtml' for the extension's HTML string.
  */
-async function getExtensionData(extension) {
+function getExtensionData(extension) {
     const name = extension[0];
     const manifest = extension[1];
     const isActive = activeExtensions.has(name);

@@ -591,7 +664,7 @@ async function getExtensionData(extension) {
591		664
592	const checkboxClass = isDisabled ? 'checkbox_disabled' : '';	665	const checkboxClass = isDisabled ? 'checkbox_disabled' : '';
593		666
594	const extensionHtml = await generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass);	667	const extensionHtml = generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass);
595		668
596	return { isExternal, extensionHtml };	669	return { isExternal, extensionHtml };
597	}	670	}

  * Generates the HTML strings for all extensions and displays them in a popup.
  */
 async function showExtensionsDetails() {
+    const abortController = new AbortController();
     let popupPromise;
     try {
-        const htmlDefault = $('<h3>Built-in Extensions:</h3>');
+        // If we are updating an extension, the "old" popup is still active. We should close that.
-        const htmlExternal = $('<h3>Installed Extensions:</h3>').addClass('opacity50p');
+        let initialScrollTop = 0;
-        const htmlLoading = $(`<h3 class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
+        const oldPopup = Popup.util.popups.find(popup => popup.content.querySelector('.extensions_info'));
+        if (oldPopup) {
+            initialScrollTop = oldPopup.content.scrollTop;
+            await oldPopup.completeCancelled();
+        }
+        const htmlDefault = $('<div class="marginBot10"><h3 class="textAlignCenter">Built-in Extensions:</h3></div>');
+        const htmlExternal = $('<div class="marginBot10"><h3 class="textAlignCenter">Installed Extensions:</h3></div>');
+        const htmlLoading = $(`<div class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
             <i class="fa-solid fa-spinner fa-spin"></i>
             <span>Loading third-party extensions... Please wait...</span>
-        </h3>`);
+        </div>`);
-        /** @type {Promise<any>[]} */
+        htmlExternal.append(htmlLoading);
-        const promises = [];
-        const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order);
-        for (const extension of extensions) {
+        const extensions = Object.entries(manifests).sort((a, b) => sortManifests(a[1], b[1])).map(getExtensionData);
-            promises.push(getExtensionData(extension));
-        }
-        promises.forEach(promise => {
-            promise.then(value => {
-                const { isExternal, extensionHtml } = value;
-                const container = isExternal ? htmlExternal : htmlDefault;
-                container.append(extensionHtml);
-            });
-        });
-        Promise.allSettled(promises).then(() => {
+        extensions.forEach(value => {
-            htmlLoading.remove();
+            const { isExternal, extensionHtml } = value;
-            htmlExternal.removeClass('opacity50p');
+            const container = isExternal ? htmlExternal : htmlDefault;
+            container.append(extensionHtml);
         });
         const html = $('<div></div>')
             .addClass('extensions_info')
-            .append(getModuleInformation())
             .append(htmlDefault)
-            .append(htmlLoading)
+            .append(htmlExternal)
-            .append(htmlExternal);
+            .append(getModuleInformation());
         /** @type {import('./popup.js').CustomPopupButton} */
         const updateAllButton = {

             },
         };
-        // If we are updating an extension, the "old" popup is still active. We should close that.
-        const oldPopup = Popup.util.popups.find(popup => popup.content.querySelector('.extensions_info'));
-        if (oldPopup) {
-            await oldPopup.complete(POPUP_RESULT.CANCELLED);
-        }
         let waitingForSave = false;
         const popup = new Popup(html, POPUP_TYPE.TEXT, '', {

+                }
                 if (stateChanged) {
                     waitingForSave = true;
-                    const toast = toastr.info('The page will be reloaded shortly...', 'Extensions state changed');
+                    const toast = toastr.info(t`The page will be reloaded shortly...`, t`Extensions state changed`);
                     await saveSettings();
                     toastr.clear(toast);
                     waitingForSave = false;

             },
         });
         popupPromise = popup.show();
+        popup.content.scrollTop = initialScrollTop;
+        checkForUpdatesManual(abortController.signal).finally(() => htmlLoading.remove());
     } catch (error) {
-        toastr.error('Error loading extensions. See browser console for details.');
+        toastr.error(t`Error loading extensions. See browser console for details.`);
         console.error(error);
+    }
     if (popupPromise) {
         await popupPromise;
+        abortController.abort();
+    }
     if (requiresReload) {
         showLoader();

+    }
+}
 /**
  * Handles the click event for the update button of an extension.
- * This function makes a POST request to '/update_extension' with the extension's name.
+ * This function makes a POST request to '/api/extensions/update' with the extension's name.
  * If the extension is already up to date, it displays a success message.
  * If the extension is not up to date, it updates the extension and displays a success message with the new commit hash.
  */
 async function onUpdateClick() {
+    const isCurrentUserAdmin = isAdmin();
     const extensionName = $(this).data('name');
-    $(this).find('i').addClass('fa-spin');
+    const isGlobal = getExtensionType(extensionName) === 'global';
+    if (isGlobal && !isCurrentUserAdmin) {
+        toastr.error(t`You don't have permission to update global extensions.`);
+        return;
+    }
+    const icon = $(this).find('i');
+    icon.addClass('fa-spin');
     await updateExtension(extensionName, false);
+    // updateExtension eats the error, but we can at least stop the spinner
+    icon.removeClass('fa-spin');
+}
 /**

         const response = await fetch('/api/extensions/update', {
             method: 'POST',
             headers: getRequestHeaders(),
-            body: JSON.stringify({ extensionName }),
+            body: JSON.stringify({
+                extensionName,
+                global: getExtensionType(extensionName) === 'global',
+            }),
         });
+        if (!response.ok) {
+            const text = await response.text();
+            toastr.error(text || response.statusText, t`Extension update failed`, { timeOut: 5000 });
+            console.error('Extension update failed', response.status, response.statusText, text);
+            return;
+        }
         const data = await response.json();
         if (!quiet) {
-            showExtensionsDetails();
+            void showExtensionsDetails();
+        }
         if (data.isUpToDate) {

  */
 async function onDeleteClick() {
     const extensionName = $(this).data('name');
+    const isCurrentUserAdmin = isAdmin();
+    const isGlobal = getExtensionType(extensionName) === 'global';
+    if (isGlobal && !isCurrentUserAdmin) {
+        toastr.error(t`You don't have permission to delete global extensions.`);
+        return;
+    }
     // use callPopup to create a popup for the user to confirm before delete
-    const confirmation = await callGenericPopup(`Are you sure you want to delete ${extensionName}?`, POPUP_TYPE.CONFIRM, '', {});
+    const confirmation = await callGenericPopup(t`Are you sure you want to delete ${extensionName}?`, POPUP_TYPE.CONFIRM, '', {});
     if (confirmation === POPUP_RESULT.AFFIRMATIVE) {
         await deleteExtension(extensionName);
+    }
+}
+async function onMoveClick() {
+    const extensionName = $(this).data('name');
+    const isCurrentUserAdmin = isAdmin();
+    const isGlobal = getExtensionType(extensionName) === 'global';
+    if (isGlobal && !isCurrentUserAdmin) {
+        toastr.error(t`You don't have permission to move extensions.`);
+        return;
+    }
+    const source = getExtensionType(extensionName);
+    const destination = source === 'global' ? 'local' : 'global';
+    const confirmationHeader = t`Move extension`;
+    const confirmationText = source == 'global'
+        ? t`Are you sure you want to move ${extensionName} to your local extensions? This will make it available only for you.`
+        : t`Are you sure you want to move ${extensionName} to the global extensions? This will make it available for all users.`;
+    const confirmation = await Popup.show.confirm(confirmationHeader, confirmationText);
+    if (!confirmation) {
+        return;
+    }
+    $(this).find('i').addClass('fa-spin');
+    await moveExtension(extensionName, source, destination);
+}
+/**
+ * Moves an extension via the API.
+ * @param {string} extensionName Extension name
+ * @param {string} source Source type
+ * @param {string} destination Destination type
+ * @returns {Promise<void>}
+ */
+async function moveExtension(extensionName, source, destination) {
+    try {
+        const result = await fetch('/api/extensions/move', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify({
+                extensionName,
+                source,
+                destination,
+            }),
+        });
+        if (!result.ok) {
+            const text = await result.text();
+            toastr.error(text || result.statusText, t`Extension move failed`, { timeOut: 5000 });
+            console.error('Extension move failed', result.status, result.statusText, text);
+            return;
+        }
+        toastr.success(t`Extension ${extensionName} moved.`);
+        await loadExtensionSettings({}, false, false);
+        void showExtensionsDetails();
+    } catch (error) {
+        console.error('Error:', error);
+    }
+}
+/**
+ * Deletes an extension via the API.
+ * @param {string} extensionName Extension name to delete
+ */
 export async function deleteExtension(extensionName) {
     try {
         await fetch('/api/extensions/delete', {
             method: 'POST',
             headers: getRequestHeaders(),
-            body: JSON.stringify({ extensionName }),
+            body: JSON.stringify({
+                extensionName,
+                global: getExtensionType(extensionName) === 'global',
+            }),
         });
     } catch (error) {
         console.error('Error:', error);
+    }
-    toastr.success(`Extension ${extensionName} deleted`);
+    toastr.success(t`Extension ${extensionName} deleted`);
-    showExtensionsDetails();
+    delay(1000).then(() => location.reload());
-    // reload the page to remove the extension from the list
-    location.reload();
+}
 /**
  * Fetches the version details of a specific extension.
+ *
  * @param {string} extensionName - The name of the extension.
+ * @param {AbortSignal} [abortSignal] - The signal to abort the operation.
  * @return {Promise<object>} - An object containing the extension's version details.
  * This object includes the currentBranchName, currentCommitHash, isUpToDate, and remoteUrl.
  * @throws {error} - If there is an error during the fetch operation, it logs the error to the console.
  */
-async function getExtensionVersion(extensionName) {
+async function getExtensionVersion(extensionName, abortSignal) {
     try {
         const response = await fetch('/api/extensions/version', {
             method: 'POST',
             headers: getRequestHeaders(),
-            body: JSON.stringify({ extensionName }),
+            body: JSON.stringify({
+                extensionName,
+                global: getExtensionType(extensionName) === 'global',
+            }),
+            signal: abortSignal,
         });
         const data = await response.json();

 /**
  * Installs a third-party extension via the API.
  * @param {string} url Extension repository URL
+ * @param {boolean} global Is the extension global?
  * @returns {Promise<void>}
  */
-export async function installExtension(url) {
+export async function installExtension(url, global) {
     console.debug('Extension installation started', url);
-    toastr.info('Please wait...', 'Installing extension');
+    toastr.info(t`Please wait...`, t`Installing extension`);
     const request = await fetch('/api/extensions/install', {
         method: 'POST',
         headers: getRequestHeaders(),
-        body: JSON.stringify({ url }),
+        body: JSON.stringify({
+            url,
+            global,
+        }),
     });
     if (!request.ok) {
         const text = await request.text();
-        toastr.warning(text || request.statusText, 'Extension installation failed', { timeOut: 5000 });
+        toastr.warning(text || request.statusText, t`Extension installation failed`, { timeOut: 5000 });
         console.error('Extension installation failed', request.status, request.statusText, text);
         return;
+    }

  * @param {boolean} versionChanged Is this a version change?
  * @param {boolean} enableAutoUpdate Enable auto-update
  */
-async function loadExtensionSettings(settings, versionChanged, enableAutoUpdate) {
+export async function loadExtensionSettings(settings, versionChanged, enableAutoUpdate) {
     if (settings.extension_settings) {
         Object.assign(extension_settings, settings.extension_settings);
+    }

     // Activate offline extensions
     await eventSource.emit(event_types.EXTENSIONS_FIRST_LOAD);
-    extensionNames = await discoverExtensions();
+    const extensions = await discoverExtensions();
+    extensionNames = extensions.map(x => x.name);
+    extensionTypes = Object.fromEntries(extensions.map(x => [x.name, x.type]));
     manifests = await getManifests(extensionNames);
     if (versionChanged && enableAutoUpdate) {

     }, 1);
+}
+const concurrencyLimit = 5;
+let activeRequestsCount = 0;
+const versionCheckQueue = [];
+function enqueueVersionCheck(fn) {
+    return new Promise((resolve, reject) => {
+        versionCheckQueue.push(() => fn().then(resolve).catch(reject));
+        processVersionCheckQueue();
+    });
+}
+function processVersionCheckQueue() {
+    if (activeRequestsCount >= concurrencyLimit || versionCheckQueue.length === 0) {
+        return;
+    }
+    activeRequestsCount++;
+    const fn = versionCheckQueue.shift();
+    fn().finally(() => {
+        activeRequestsCount--;
+        processVersionCheckQueue();
+    });
+}
+/**
+ * Performs a manual check for updates on all 3rd-party extensions.
+ * @param {AbortSignal} abortSignal Signal to abort the operation
+ * @returns {Promise<any[]>}
+ */
+async function checkForUpdatesManual(abortSignal) {
+    const promises = [];
+    for (const id of Object.keys(manifests).filter(x => x.startsWith('third-party')).sort((a, b) => sortManifests(manifests[a], manifests[b]))) {
+        const externalId = id.replace('third-party', '');
+        const promise = enqueueVersionCheck(async () => {
+            try {
+                const data = await getExtensionVersion(externalId, abortSignal);
+                const extensionBlock = document.querySelector(`.extension_block[data-name="${externalId}"]`);
+                if (extensionBlock && data) {
+                    if (data.isUpToDate === false) {
+                        const buttonElement = extensionBlock.querySelector('.btn_update');
+                        if (buttonElement) {
+                            buttonElement.classList.remove('displayNone');
+                        }
+                        const nameElement = extensionBlock.querySelector('.extension_name');
+                        if (nameElement) {
+                            nameElement.classList.add('update_available');
+                        }
+                    }
+                    let branch = data.currentBranchName;
+                    let commitHash = data.currentCommitHash;
+                    let origin = data.remoteUrl;
+                    const originLink = extensionBlock.querySelector('a');
+                    if (originLink) {
+                        try {
+                            const url = new URL(origin);
+                            if (!['https:', 'http:'].includes(url.protocol)) {
+                                throw new Error('Invalid protocol');
+                            }
+                            originLink.href = url.href;
+                            originLink.target = '_blank';
+                            originLink.rel = 'noopener noreferrer';
+                        } catch (error) {
+                            console.log('Error setting origin link', originLink, error);
+                        }
+                    }
+                    const versionElement = extensionBlock.querySelector('.extension_version');
+                    if (versionElement) {
+                        versionElement.textContent += ` (${branch}-${commitHash.substring(0, 7)})`;
+                    }
+                }
+            } catch (error) {
+                console.error('Error checking for extension updates', error);
+            }
+        });
+        promises.push(promise);
+    }
+    return Promise.allSettled(promises);
+}
 /**
  * Checks if there are updates available for 3rd-party extensions.
  * @param {boolean} force Skip nag check

         localStorage.setItem(STORAGE_NAG_KEY, currentDate);
+    }
+    const isCurrentUserAdmin = isAdmin();
     const updatesAvailable = [];
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
+        const isGlobal = getExtensionType(id) === 'global';
+        if (isGlobal && !isCurrentUserAdmin) {
+            console.debug(`Skipping global extension: ${manifest.display_name} (${id}) for non-admin user`);
+            continue;
+        }
         if (manifest.auto_update && id.startsWith('third-party')) {
-            const promise = new Promise(async (resolve, reject) => {
+            const promise = enqueueVersionCheck(async () => {
                 try {
                     const data = await getExtensionVersion(id.replace('third-party', ''));
-                    if (data.isUpToDate === false) {
+                    if (!data.isUpToDate) {
                         updatesAvailable.push(manifest.display_name);
+                    }
-                    resolve();
                 } catch (error) {
                     console.error('Error checking for extension updates', error);
-                    reject();
+                }
             });
             promises.push(promise);

+    }
     const banner = toastr.info('Auto-updating extensions. This may take several minutes.', 'Please wait...', { timeOut: 10000, extendedTimeOut: 10000 });
+    const isCurrentUserAdmin = isAdmin();
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
+        const isGlobal = getExtensionType(id) === 'global';
+        if (isGlobal && !isCurrentUserAdmin) {
+            console.debug(`Skipping global extension: ${manifest.display_name} (${id}) for non-admin user`);
+            continue;
+        }
         if ((forceAll || manifest.auto_update) && id.startsWith('third-party')) {
             console.debug(`Auto-updating 3rd-party extension: ${manifest.display_name} (${id})`);
             promises.push(updateExtension(id.replace('third-party', ''), true));

  * @param {number} contextSize Context size
  * @returns {Promise<boolean>} True if generation should be aborted
  */
-async function runGenerationInterceptors(chat, contextSize) {
+export async function runGenerationInterceptors(chat, contextSize) {
     let aborted = false;
     let exitImmediately = false;

         exitImmediately = immediately;
     };
-    for (const manifest of Object.values(manifests).sort((a, b) => a.loading_order - b.loading_order)) {
+    for (const manifest of Object.values(manifests).filter(x => x.generate_interceptor).sort((a, b) => sortManifests(a, b))) {
         const interceptorKey = manifest.generate_interceptor;
-        if (typeof window[interceptorKey] === 'function') {
+        if (typeof globalThis[interceptorKey] === 'function') {
             try {
-                await window[interceptorKey](chat, contextSize, abort);
+                await globalThis[interceptorKey](chat, contextSize, abort);
             } catch (e) {
                 console.error(`Failed running interceptor for ${manifest.display_name}`, e);
+            }

  * @returns {Promise<void>}
  */
 export async function openThirdPartyExtensionMenu(suggestUrl = '') {
-    const html = await renderTemplateAsync('installExtension');
+    const isCurrentUserAdmin = isAdmin();
-    const input = await callGenericPopup(html, POPUP_TYPE.INPUT, suggestUrl ?? '');
+    const html = await renderTemplateAsync('installExtension', { isCurrentUserAdmin });
+    const okButton = isCurrentUserAdmin ? t`Install just for me` : t`Install`;
+    let global = false;
+    const installForAllButton = {
+        text: t`Install for all users`,
+        appendAtEnd: false,
+        action: async () => {
+            global = true;
+            await popup.complete(POPUP_RESULT.AFFIRMATIVE);
+        },
+    };
+    const customButtons = isCurrentUserAdmin ? [installForAllButton] : [];
+    const popup = new Popup(html, POPUP_TYPE.INPUT, suggestUrl ?? '', { okButton, customButtons });
+    const input = await popup.show();
     if (!input) {
         console.debug('Extension install cancelled');

@@ -1042,11 +1317,9 @@ export async function openThirdPartyExtensionMenu(suggestUrl = '') {
1042	}	1317	}
1043		1318
1044	const url = String(input).trim();	1319	const url = String(input).trim();
1045	await installExtension(url);	1320	await installExtension(url, global);
1046	}	1321	}
1047		1322
1048
1049
1050	export async function initExtensions() {	1323	export async function initExtensions() {
1051	await addExtensionsButtonAndMenu();	1324	await addExtensionsButtonAndMenu();
1052	$('#extensionsMenuButton').css('display', 'flex');	1325	$('#extensionsMenuButton').css('display', 'flex');

     $('#extensions_autoconnect').on('input', autoConnectInputHandler);
     $('#extensions_details').on('click', showExtensionsDetails);
     $('#extensions_notify_updates').on('input', notifyUpdatesInputHandler);
-    $(document).on('click', '.toggle_disable', onDisableExtensionClick);
+    $(document).on('click', '.extensions_info .extension_block .toggle_disable', onDisableExtensionClick);
-    $(document).on('click', '.toggle_enable', onEnableExtensionClick);
+    $(document).on('click', '.extensions_info .extension_block .toggle_enable', onEnableExtensionClick);
-    $(document).on('click', '.btn_update', onUpdateClick);
+    $(document).on('click', '.extensions_info .extension_block .btn_update', onUpdateClick);
-    $(document).on('click', '.btn_delete', onDeleteClick);
+    $(document).on('click', '.extensions_info .extension_block .btn_delete', onDeleteClick);
+    $(document).on('click', '.extensions_info .extension_block .btn_move', onMoveClick);
     /**
      * Handles the click event for the third-party extension import button.

public/scripts/extensions/third-party/.gitkeep+0 -0 Viewed

public/scripts/user.js+1 -1 Viewed

  * Check if the current user is an admin.
  * @returns {boolean} True if the current user is an admin
  */
-function isAdmin() {
+export function isAdmin() {
     if (!currentUser) {
         return false;
+    }

src/constants.js+1 -0 Viewed

     backups: 'backups/',
     sounds: 'public/sounds',
     extensions: 'public/scripts/extensions',
+    globalExtensions: 'public/scripts/extensions/third-party',
 };
 export const SETTINGS_FILE = 'settings.json';

src/endpoints/extensions.js+117 -32 Viewed

             fs.mkdirSync(path.join(request.user.directories.extensions));
+        }
-        const url = request.body.url;
+        if (!fs.existsSync(PUBLIC_DIRECTORIES.globalExtensions)) {
-        const extensionPath = path.join(request.user.directories.extensions, path.basename(url, '.git'));
+            fs.mkdirSync(PUBLIC_DIRECTORIES.globalExtensions);
+        }
+        const { url, global } = request.body;
+        if (global && !request.user.profile.admin) {
+            console.warn(`User ${request.user.profile.handle} does not have permission to install global extensions.`);
+            return response.status(403).send('Forbidden: No permission to install global extensions.');
+        }
+        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
+        const extensionPath = path.join(basePath, sanitize(path.basename(url, '.git')));
         if (fs.existsSync(extensionPath)) {
             return response.status(409).send(`Directory already exists at ${extensionPath}`);

         await git.clone(url, extensionPath, { '--depth': 1 });
         console.log(`Extension has been cloned at ${extensionPath}`);
         const { version, author, display_name } = await getManifest(extensionPath);
         return response.send({ version, author, display_name, extensionPath });
     } catch (error) {
         console.log('Importing custom content failed', error);

+    }
     try {
-        const extensionName = request.body.extensionName;
+        const { extensionName, global } = request.body;
-        const extensionPath = path.join(request.user.directories.extensions, extensionName);
+        if (global && !request.user.profile.admin) {
+            console.warn(`User ${request.user.profile.handle} does not have permission to update global extensions.`);
+            return response.status(403).send('Forbidden: No permission to update global extensions.');
+        }
+        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
+        const extensionPath = path.join(basePath, extensionName);
         if (!fs.existsSync(extensionPath)) {
             return response.status(404).send(`Directory does not exist at ${extensionPath}`);

         const { isUpToDate, remoteUrl } = await checkIfRepoIsUpToDate(extensionPath);
         const currentBranch = await git.cwd(extensionPath).branch();
         if (!isUpToDate) {
             await git.cwd(extensionPath).pull('origin', currentBranch.current);
             console.log(`Extension has been updated at ${extensionPath}`);
         } else {

+    }
 });
+router.post('/move', jsonParser, async (request, response) => {
+    try {
+        const { extensionName, source, destination } = request.body;
+        if (!extensionName || !source || !destination) {
+            return response.status(400).send('Bad Request. Not all required parameters are provided.');
+        }
+        if (!request.user.profile.admin) {
+            console.warn(`User ${request.user.profile.handle} does not have permission to move extensions.`);
+            return response.status(403).send('Forbidden: No permission to move extensions.');
+        }
+        const sourceDirectory = source === 'global' ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
+        const destinationDirectory = destination === 'global' ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
+        const sourcePath = path.join(sourceDirectory, sanitize(extensionName));
+        const destinationPath = path.join(destinationDirectory, sanitize(extensionName));
+        if (!fs.existsSync(sourcePath) || !fs.statSync(sourcePath).isDirectory()) {
+            console.error(`Source directory does not exist at ${sourcePath}`);
+            return response.status(404).send('Source directory does not exist.');
+        }
+        if (fs.existsSync(destinationPath)) {
+            console.error(`Destination directory already exists at ${destinationPath}`);
+            return response.status(409).send('Destination directory already exists.');
+        }
+        if (source === destination) {
+            console.error('Source and destination directories are the same');
+            return response.status(409).send('Source and destination directories are the same.');
+        }
+        fs.cpSync(sourcePath, destinationPath, { recursive: true, force: true });
+        fs.rmSync(sourcePath, { recursive: true, force: true });
+        console.log(`Extension has been moved from ${sourcePath} to ${destinationPath}`);
+        return response.sendStatus(204);
+    } catch (error) {
+        console.log('Moving extension failed', error);
+        return response.status(500).send('Internal Server Error. Try again later.');
+    }
+});
 /**
  * HTTP POST handler function to get the current git commit hash and branch name for a given extension.
  * It checks whether the repository is up-to-date with the remote, and returns the status along with

+    }
     try {
-        const extensionName = request.body.extensionName;
+        const { extensionName, global } = request.body;
-        const extensionPath = path.join(request.user.directories.extensions, extensionName);
+        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
+        const extensionPath = path.join(basePath, sanitize(extensionName));
         if (!fs.existsSync(extensionPath)) {
             return response.status(404).send(`Directory does not exist at ${extensionPath}`);
+        }
+        let currentCommitHash;
+        try {
+            currentCommitHash = await git.cwd(extensionPath).revparse(['HEAD']);
+        } catch (error) {
+            // it is not a git repo, or has no commits yet, or is a bare repo
+            // not possible to update it, most likely can't get the branch name either
+            return response.send({ currentBranchName: null, currentCommitHash, isUpToDate: true, remoteUrl: null });
+        }
         const currentBranch = await git.cwd(extensionPath).branch();
         // get only the working branch
         const currentBranchName = currentBranch.current;
         await git.cwd(extensionPath).fetch('origin');
-        const currentCommitHash = await git.cwd(extensionPath).revparse(['HEAD']);
+        console.log(extensionName, currentBranchName, currentCommitHash);
-        console.log(currentBranch, currentCommitHash);
         const { isUpToDate, remoteUrl } = await checkIfRepoIsUpToDate(extensionPath);
         return response.send({ currentBranchName, currentCommitHash, isUpToDate, remoteUrl });

         return response.status(400).send('Bad Request: extensionName is required in the request body.');
+    }
-    // Sanitize the extension name to prevent directory traversal
-    const extensionName = sanitize(request.body.extensionName);
     try {
-        const extensionPath = path.join(request.user.directories.extensions, extensionName);
+        const { extensionName, global } = request.body;
+        if (global && !request.user.profile.admin) {
+            console.warn(`User ${request.user.profile.handle} does not have permission to delete global extensions.`);
+            return response.status(403).send('Forbidden: No permission to delete global extensions.');
+        }
+        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
+        const extensionPath = path.join(basePath, sanitize(extensionName));
         if (!fs.existsSync(extensionPath)) {
             return response.status(404).send(`Directory does not exist at ${extensionPath}`);

  * If the folder is called third-party, search for subfolders instead
  */
 router.get('/discover', jsonParser, function (request, response) {
-    // get all folders in the extensions folder, except third-party
-    const extensions = fs
-        .readdirSync(PUBLIC_DIRECTORIES.extensions)
-        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.extensions, f)).isDirectory())
-        .filter(f => f !== 'third-party');
-    // get all folders in the third-party folder, if it exists
     if (!fs.existsSync(path.join(request.user.directories.extensions))) {
-        return response.send(extensions);
+        fs.mkdirSync(path.join(request.user.directories.extensions));
+    }
-    const thirdPartyExtensions = fs
+    if (!fs.existsSync(PUBLIC_DIRECTORIES.globalExtensions)) {
-        .readdirSync(path.join(request.user.directories.extensions))
+        fs.mkdirSync(PUBLIC_DIRECTORIES.globalExtensions);
-        .filter(f => fs.statSync(path.join(request.user.directories.extensions, f)).isDirectory());
+    }
-    // add the third-party extensions to the extensions array
-    extensions.push(...thirdPartyExtensions.map(f => `third-party/${f}`));
-    console.log(extensions);
+    // Get all folders in system extensions folder, excluding third-party
+    const builtInExtensions = fs
+        .readdirSync(PUBLIC_DIRECTORIES.extensions)
+        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.extensions, f)).isDirectory())
+        .filter(f => f !== 'third-party')
+        .map(f => ({ type: 'system', name: f }));
-    return response.send(extensions);
+    // Get all folders in local extensions folder
+    const userExtensions = fs
+        .readdirSync(path.join(request.user.directories.extensions))
+        .filter(f => fs.statSync(path.join(request.user.directories.extensions, f)).isDirectory())
+        .map(f => ({ type: 'local', name: `third-party/${f}` }));
+    // Get all folders in global extensions folder
+    // In case of a conflict, the extension will be loaded from the user folder
+    const globalExtensions = fs
+        .readdirSync(PUBLIC_DIRECTORIES.globalExtensions)
+        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.globalExtensions, f)).isDirectory())
+        .map(f => ({ type: 'global', name: `third-party/${f}` }))
+        .filter(f => !userExtensions.some(e => e.name === f.name));
+    // Combine all extensions
+    const allExtensions = [...builtInExtensions, ...userExtensions, ...globalExtensions];
+    console.log(allExtensions);
+    return response.send(allExtensions);
 });

src/users.js+29 -1 Viewed

+}
 /**
+ * Creates a route handler for serving extensions.
+ * @param {(req: import('express').Request) => string} directoryFn A function that returns the directory path to serve files from
+ * @returns {import('express').RequestHandler}
+ */
+function createExtensionsRouteHandler(directoryFn) {
+    return async (req, res) => {
+        try {
+            const directory = directoryFn(req);
+            const filePath = decodeURIComponent(req.params[0]);
+            const existsLocal = fs.existsSync(path.join(directory, filePath));
+            if (existsLocal) {
+                return res.sendFile(filePath, { root: directory });
+            }
+            const existsGlobal = fs.existsSync(path.join(PUBLIC_DIRECTORIES.globalExtensions, filePath));
+            if (existsGlobal) {
+                return res.sendFile(filePath, { root: PUBLIC_DIRECTORIES.globalExtensions });
+            }
+            return res.sendStatus(404);
+        } catch (error) {
+            return res.sendStatus(500);
+        }
+    };
+}
+/**
  * Verifies that the current user is an admin.
  * @param {import('express').Request} request Request object
  * @param {import('express').Response} response Response object

 router.use('/assets/*', createRouteHandler(req => req.user.directories.assets));
 router.use('/user/images/*', createRouteHandler(req => req.user.directories.userImages));
 router.use('/user/files/*', createRouteHandler(req => req.user.directories.files));
-router.use('/scripts/extensions/third-party/*', createRouteHandler(req => req.user.directories.extensions));
+router.use('/scripts/extensions/third-party/*', createExtensionsRouteHandler(req => req.user.directories.extensions));