Refactor extension management and assets download menu (#5583) * feat: refactor extension and asset management * feat: refactor name selector * fix: make text localizable * fix: handle abort errors in extension version checks * fix: replace returns with throws * fix: remove debug prefix from toast * fix: preserve file names of imported characters

97392a4ca0357f089c9e6e7250d76fc73d5cc3ea

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

Signed

Parents: e5ae782705ee392bede099d3155931bde552d6b1

public/scripts/extensions.js+242 -114 Viewed

-import { DOMPurify, Popper } from '../lib.js';
+import { Popper } from '../lib.js';
 import { eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, animation_duration, CLIENT_VERSION } from '../script.js';
 import { POPUP_RESULT, POPUP_TYPE, Popup } from './popup.js';
 import { renderTemplate, renderTemplateAsync } from './templates.js';
-import { delay, deleteValueByPath, equalsIgnoreCaseAndAccents, isSubsetOf, sanitizeSelector, setValueByPath, versionCompare } from './utils.js';
+import { delay, deleteValueByPath, equalsIgnoreCaseAndAccents, escapeHtml, isSubsetOf, sanitizeSelector, setValueByPath, versionCompare } from './utils.js';
 import { getContext } from './st-context.js';
 import { isAdmin } from './user.js';
 import { addLocaleData, getCurrentLocale, t } from './i18n.js';

+}
 /**
+ * Generates a CSS selector for an extension based on its name, allowing omission of a common prefix.
+ * @param {string} name Name of the extension, with or without the "third-party" prefix
+ * @param {object} [options] Optional parameters
+ * @param {string} [options.prefix] Optional prefix to ignore when generating the selector (e.g. "third-party")
+ * @returns {string} CSS selector for the extension, with the prefix removed if it was present and specified in options
+ */
+function getNameSelector(name, { prefix = 'third-party' } = {}) {
+    const nameWithoutPrefix = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+    return CSS.escape(nameWithoutPrefix);
+}
+/**
  * Discovers extensions from the API.
  * @returns {Promise<{name: string, type: string}[]>}
  */

+            }
             toggleContainer
-                .find(`.extension_block[data-name="${name.replace('third-party', '')}"] .extension_toggle input`)
+                .find(`.extension_block[data-name="${getNameSelector(name)}"] .extension_toggle input`)
                 .prop('checked', enable)
                 .toggleClass('toggle_enable', !enable)
                 .toggleClass('toggle_disable', enable)

@@ -865,7 +877,7 @@ function addExtensionLocale(name, manifest) {
865	}	877	}
866		878
867	/**	879	/**
868	* Generates HTML string for displaying an extension in the UI.	880	* Generates an element for displaying an extension in the UI.
869	*	881	*
870	* @param {string} name - The name of the extension.	882	* @param {string} name - The name of the extension.
871	* @param {object} manifest - The manifest of the extension.	883	* @param {object} manifest - The manifest of the extension.

  * @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 {string} - The HTML string that represents the extension.
+ * @return {HTMLElement} - The element that represents the extension.
  */
-function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
+function generateExtensionElement(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
     function getExtensionIcon() {
         const type = getExtensionType(name);
+        const icon = document.createElement('i');
+        icon.classList.add('fa-sm', 'fa-fw', 'fa-solid');
         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>';
+                icon.classList.add('fa-server');
+                icon.title = t`This is a global extension, available for all users.`;
+                break;
             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>';
+                icon.classList.add('fa-user');
+                icon.title = t`This is a local extension, available only for you.`;
+                break;
             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>';
+                icon.classList.add('fa-cog');
+                icon.title = t`This is a built-in extension. It cannot be deleted and updates with the app.`;
+                break;
             default:
-                return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
+                icon.classList.add('fa-question');
+                icon.title = t`Unknown extension type.`;
+                break;
+        }
+        return icon;
+    }
     const isUserAdmin = isAdmin();
-    const extensionIcon = getExtensionIcon();
     const displayName = manifest.display_name;
     const displayVersion = manifest.version || '';
     const externalId = name.replace('third-party', '');
-    let originHtml = '';
-    if (isExternal) {
+    // Root block
-        originHtml = '<a>';
+    const block = document.createElement('div');
+    block.classList.add('extension_block');
+    block.dataset.name = externalId;
+    // Toggle
+    const toggleDiv = document.createElement('div');
+    toggleDiv.classList.add('extension_toggle');
+    const toggle = document.createElement('input');
+    toggle.type = 'checkbox';
+    toggle.dataset.name = name;
+    if (isActive || isDisabled) {
+        toggle.title = t`Click to toggle`;
+        toggle.classList.add(isActive ? 'toggle_disable' : 'toggle_enable');
+        if (checkboxClass) toggle.classList.add(checkboxClass);
+        toggle.checked = isActive;
+    } else {
+        toggle.title = t`Cannot enable extension`;
+        toggle.classList.add('extension_missing');
+        if (checkboxClass) toggle.classList.add(checkboxClass);
+        toggle.disabled = true;
+    }
+    toggleDiv.appendChild(toggle);
+    block.appendChild(toggleDiv);
+    // Icon
+    const iconDiv = document.createElement('div');
+    iconDiv.classList.add('extension_icon');
+    iconDiv.appendChild(getExtensionIcon());
+    block.appendChild(iconDiv);
+    // Text block
+    const textBlock = document.createElement('div');
+    textBlock.classList.add('flexGrow', 'extension_text_block');
+    const statusSpan = document.createElement('span');
+    statusSpan.className = isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing';
+    const nameSpan = document.createElement('span');
+    nameSpan.classList.add('extension_name');
+    nameSpan.textContent = displayName;
+    const authorSpan = document.createElement('span');
+    authorSpan.classList.add('extension_author');
-    let toggleElement = isActive || isDisabled ?
+    const versionSpan = document.createElement('span');
-        '<input type="checkbox" title="' + t`Click to toggle` + `" data-name="${name}" class="${isActive ? 'toggle_disable' : 'toggle_enable'} ${checkboxClass}" ${isActive ? 'checked' : ''}>` :
+    versionSpan.classList.add('extension_version');
-        `<input type="checkbox" title="Cannot enable extension" data-name="${name}" class="extension_missing ${checkboxClass}" disabled>`;
+    versionSpan.textContent = displayVersion;
-    let deleteButton = isExternal ? `<button class="btn_delete menu_button" data-name="${externalId}" data-i18n="[title]Delete" title="Delete"><i class="fa-fw fa-solid fa-trash-can"></i></button>` : '';
+    statusSpan.append(nameSpan, authorSpan, versionSpan);
-    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>` : '';
-    let moveButton = isExternal && isUserAdmin ? `<button class="btn_move menu_button" data-name="${externalId}" data-i18n="[title]Move" title="Move"><i class="fa-solid fa-folder-tree fa-fw"></i></button>` : '';
-    let branchButton = isExternal && isUserAdmin ? `<button class="btn_branch menu_button" data-name="${externalId}" data-i18n="[title]Switch branch" title="Switch branch"><i class="fa-solid fa-code-branch fa-fw"></i></button>` : '';
-    let cleanButton = isExternal && hasExtensionHook(externalId, 'clean') ? `<button class="btn_clean menu_button" data-name="${externalId}" data-i18n="[title]Clean extension data" title="Clean extension data"><i class="fa-fw fa-solid fa-broom"></i></button>` : '';
-    let modulesInfo = '';
     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(', '));
+            const modulesDiv = document.createElement('div');
-            modulesInfo = '<div class="extension_modules">' + t`Optional modules:` + ` <span class="optional">${optionalString}</span></div>`;
+            modulesDiv.classList.add('extension_modules');
+            const optionalSpan = document.createElement('span');
+            optionalSpan.classList.add('optional');
+            optionalSpan.textContent = [...optional].join(', ');
+            modulesDiv.append(t`Optional modules:`, ' ', optionalSpan);
+            statusSpan.appendChild(modulesDiv);
+        }
-    } else if (!isDisabled) { // Neither active nor disabled
+    } 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(', '));
+            const modulesDiv = document.createElement('div');
-            modulesInfo = `<div class="extension_modules">Missing modules: <span class="failure">${requirementsString}</span></div>`;
+            modulesDiv.classList.add('extension_modules');
+            const failureSpan = document.createElement('span');
+            failureSpan.classList.add('failure');
+            failureSpan.textContent = [...requirements].join(', ');
+            modulesDiv.append(t`Missing modules:`, ' ', failureSpan);
+            statusSpan.appendChild(modulesDiv);
+        }
+    }
     // if external, wrap the name in a link to the repo
+    if (isExternal) {
+        const originLink = document.createElement('a');
+        originLink.appendChild(statusSpan);
+        textBlock.appendChild(originLink);
+    } else {
+        textBlock.appendChild(statusSpan);
+    }
+    block.appendChild(textBlock);
+    // Actions
+    const actionsDiv = document.createElement('div');
+    actionsDiv.classList.add('extension_actions', 'flex-container', 'alignItemsCenter');
+    /**
+     * Helper function to create an action button for an extension.
+     * @param {string} cls Class name
+     * @param {string} dataName Name of the extension
+     * @param {string} title Title of the button
+     * @param {string} iconClasses Classes for the icon
+     * @returns {HTMLButtonElement} The created button element
+     */
+    function makeActionButton(cls, dataName, title, iconClasses) {
+        const btn = document.createElement('button');
+        btn.classList.add(cls, 'menu_button');
+        btn.dataset.name = dataName;
+        btn.title = title;
+        const icon = document.createElement('i');
+        icon.classList.add(...iconClasses.split(' '));
+        btn.appendChild(icon);
+        return btn;
+    }
+    if (isExternal) {
+        const updateBtn = makeActionButton('btn_update', externalId, t`Update available`, 'fa-solid fa-download fa-fw');
+        updateBtn.classList.add('displayNone');
+        actionsDiv.appendChild(updateBtn);
+    }
+    if (isExternal && hasExtensionHook(externalId, 'clean')) {
+        actionsDiv.appendChild(makeActionButton('btn_clean', externalId,  t`Clean extension data`, 'fa-fw fa-solid fa-broom'));
+    }
+    if (isExternal && isUserAdmin) {
+        actionsDiv.appendChild(makeActionButton('btn_branch', externalId, t`Switch branch`, 'fa-solid fa-code-branch fa-fw'));
+        actionsDiv.appendChild(makeActionButton('btn_move', externalId, t`Move`, 'fa-solid fa-folder-tree fa-fw'));
+    }
+    if (isExternal) {
+        actionsDiv.appendChild(makeActionButton('btn_delete', externalId, t`Delete`, 'fa-fw fa-solid fa-trash-can'));
+    }
+    block.appendChild(actionsDiv);
-    let extensionHtml = `
+    return block;
-        <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_author"></span>
-                    <span class="extension_version">${DOMPurify.sanitize(displayVersion)}</span>
-                    ${modulesInfo}
-                </span>
-                ${isExternal ? '</a>' : ''}
-            </div>
-            <div class="extension_actions flex-container alignItemsCenter">
-                ${updateButton}
-                ${cleanButton}
-                ${branchButton}
-                ${moveButton}
-                ${deleteButton}
-            </div>
-        </div>`;
-    return extensionHtml;
+}
 /**
- * Gets extension data and generates the corresponding HTML for displaying the extension.
+ * Gets extension data and generates the corresponding element 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 {object} - An object with 'isExternal' indicating whether the extension is external, and 'extensionHtml' for the extension's HTML string.
+ * @return {{isExternal: boolean, extensionElement: HTMLElement}} - An object with 'isExternal' indicating whether the extension is external, and 'extensionElement' for the extension's HTML element.
  */
 function getExtensionData(extension) {
     const name = extension[0];

     const isExternal = name.startsWith('third-party');
     const checkboxClass = isDisabled ? 'checkbox_disabled' : '';
+    const extensionElement = generateExtensionElement(name, manifest, isActive, isDisabled, isExternal, checkboxClass);
-    const extensionHtml = generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass);
+    return { isExternal, extensionElement };
-    return { isExternal, extensionHtml };
+}
 /**
  * Gets the module information to be displayed.
+ *
- * @return {string} - The HTML string for the module information.
+ * @return {HTMLElement} - The element containing the module information.
  */
 function getModuleInformation() {
-    let moduleInfo = modules.length ? `<p>${DOMPurify.sanitize(modules.join(', '))}</p>` : '<p class="failure">' + t`Not connected to the API!` + '</p>';
+    const container = document.createElement('div');
-    return `
-        <h3>` + t`Modules provided by your Extras API:` + `</h3>
+    const heading = document.createElement('h3');
-        ${moduleInfo}
+    heading.textContent = t`Modules provided by your Extras API:`;
-    `;
+    container.appendChild(heading);
+    const moduleInfo = document.createElement('p');
+    if (modules.length) {
+        moduleInfo.textContent = modules.join(', ');
+    } else {
+        moduleInfo.classList.add('failure');
+        moduleInfo.textContent = t`Not connected to the API!`;
+    }
+    container.appendChild(moduleInfo);
+    return container;
+}
 /**
- * Generates HTML for the extension load errors.
+ * Generates HTMLElement for the extension load errors.
- * @returns {string} HTML string containing the errors that occurred while loading extensions.
+ * @returns {HTMLElement} - The element containing the extension load errors.
  */
-function getExtensionLoadErrorsHtml() {
+function getExtensionLoadErrors() {
     if (extensionLoadErrors.size === 0) {
-        return '';
+        return document.createElement('div');
+    }
     const container = document.createElement('div');

@@ -1012,7 +1116,7 @@ function getExtensionLoadErrorsHtml() {
1012	container.appendChild(errorElement);	1116	container.appendChild(errorElement);
1013	}	1117	}
1014		1118
1015	return container.outerHTML;	1119	return container;
1016	}	1120	}
1017		1121
1018	/**	1122	/**

             initialScrollTop = oldPopup.content.scrollTop;
             await oldPopup.completeCancelled();
+        }
-        const htmlErrors = getExtensionLoadErrorsHtml();
+        const errors = getExtensionLoadErrors();
-        const htmlDefault = $('<div class="marginBot10"><h3>' + t`Built-in Extensions:` + '</h3></div>');
+        const defaultContainer = document.createElement('div');
-        const htmlExternal = $(`<div class="marginBot10">
+        defaultContainer.classList.add('marginBot10');
-            <div class="flex-container alignitemscenter spaceBetween flexnowrap marginBot10">
+        const defaultHeading = document.createElement('h3');
-                <h3 class="margin0">${t`Installed Extensions:`}</h3>
+        defaultHeading.textContent = t`Built-in Extensions:`;
-                <div class="flex-container third_party_toolbar"></div>
+        defaultContainer.appendChild(defaultHeading);
-            </div>
-        </div>`);
+        const externalContainer = document.createElement('div');
+        externalContainer.classList.add('marginBot10');
-        const htmlLoading = $(`<div class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
+        const externalHeader = document.createElement('div');
-            <i class="fa-solid fa-spinner fa-spin"></i>
+        externalHeader.classList.add('flex-container', 'alignitemscenter', 'spaceBetween', 'flexnowrap', 'marginBot10');
-            <span>` + t`Loading third-party extensions... Please wait...` + `</span>
+        const externalHeading = document.createElement('h3');
-        </div>`);
+        externalHeading.classList.add('margin0');
+        externalHeading.textContent = t`Installed Extensions:`;
-        htmlExternal.append(htmlLoading);
+        const thirdPartyToolbar = document.createElement('div');
+        thirdPartyToolbar.classList.add('flex-container', 'third_party_toolbar');
+        externalHeader.append(externalHeading, thirdPartyToolbar);
+        externalContainer.appendChild(externalHeader);
+        const loadingEl = document.createElement('div');
+        loadingEl.classList.add('flex-container', 'alignItemsCenter', 'justifyCenter', 'marginTop10', 'marginBot5');
+        const loadingIcon = document.createElement('i');
+        loadingIcon.classList.add('fa-solid', 'fa-spinner', 'fa-spin');
+        const loadingSpan = document.createElement('span');
+        loadingSpan.textContent = t`Loading third-party extensions... Please wait...`;
+        loadingEl.append(loadingIcon, loadingSpan);
+        externalContainer.appendChild(loadingEl);
         const sortOrderKey = 'extensions_sortByName';
         const sortByName = accountStorage.getItem(sortOrderKey) === 'true';

         let extensionsToToggle = [];
         extensions.forEach(value => {
-            const { isExternal, extensionHtml } = value;
+            const { isExternal, extensionElement } = value;
-            const container = isExternal ? htmlExternal : htmlDefault;
+            const container = isExternal ? externalContainer : defaultContainer;
-            container.append(extensionHtml);
+            container.appendChild(extensionElement);
         });
-        const html = $('<div></div>')
+        const extensionsMenu = $('<div></div>')
             .addClass('extensions_info')
-            .append(htmlErrors)
+            .append(errors)
-            .append(htmlDefault)
+            .append(defaultContainer)
-            .append(htmlExternal)
+            .append(externalContainer)
             .append(getModuleInformation());
+        {

             const toggleAllExtensionsButton = document.createElement('div');
             toggleAllExtensionsButton.classList.add('menu_button', 'menu_button_icon');
             toggleAllExtensionsButton.title = t`Bulk toggle third-party extensions.`;
-            toggleAllExtensionsButton.innerHTML = `
+            const toggleAllLabel = document.createElement('span');
-                <span>${t`Toggle extensions`}</span>
+            toggleAllLabel.textContent = t`Toggle extensions`;
-                <div class="fa-solid fa-circle-info opacity50p"></div>
+            const toggleAllIcon = document.createElement('div');
-            `;
+            toggleAllIcon.classList.add('fa-solid', 'fa-circle-info', 'opacity50p');
+            toggleAllExtensionsButton.append(toggleAllLabel, toggleAllIcon);
             const restoreBulkToggledExtensionsButton = document.createElement('div');
             restoreBulkToggledExtensionsButton.classList.add('menu_button', 'menu_button_icon', 'fa-solid', 'fa-arrow-right-rotate', 'displayNone');
             restoreBulkToggledExtensionsButton.title = t`Restore toggled extensions.\n\nIt does not restore extensions toggled individually.`;
             toggleAllExtensionsButton.addEventListener('click', () => {
-                extensionsToToggle = onToggleAllExtensions(extensionsToToggle, htmlExternal);
+                extensionsToToggle = onToggleAllExtensions(extensionsToToggle, $(externalContainer));
                 for (const extension of extensionsToToggle) {
                     const { name } = extension;
-                    htmlExternal
+                    $(externalContainer)
-                        .find(`.extension_block[data-name="${name.replace('third-party', '')}"] .extension_toggle input`)
+                        .find(`.extension_block[data-name="${getNameSelector(name)}"] .extension_toggle input`)
                         .off('click')
                         .one('click', () => {
                             extensionsToToggle = extensionsToToggle.filter(ext => ext.name !== name);

                     const { name } = extension;
                     const isDisabled = extension_settings.disabledExtensions.includes(name);
-                    htmlExternal
+                    $(externalContainer)
-                        .find(`.extension_block[data-name="${name.replace('third-party', '')}"] .extension_toggle input`)
+                        .find(`.extension_block[data-name="${getNameSelector(name)}"] .extension_toggle input`)
                         .prop('checked', !isDisabled)
                         .toggleClass('toggle_enable', isDisabled)
                         .toggleClass('toggle_disable', !isDisabled)

             });
             toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
-            htmlExternal.find('.third_party_toolbar').append(restoreBulkToggledExtensionsButton, toggleAllExtensionsButton);
+            thirdPartyToolbar.append(restoreBulkToggledExtensionsButton, toggleAllExtensionsButton);
-            html.prepend(toolbar);
+            extensionsMenu.prepend(toolbar);
+        }
         let waitingForSave = false;
-        const popup = new Popup(html, POPUP_TYPE.TEXT, '', {
+        const popup = new Popup(extensionsMenu, POPUP_TYPE.TEXT, '', {
             okButton: t`Close`,
             wide: true,
             large: true,

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

     /** @type {import('./popup.js').CustomPopupInput[]} */
     const customInputs = hasCleanHook ? [{ id: 'extension_delete_cleanup', label: t`Also clean up extension data`, defaultState: false }] : null;
-    const popup = new Popup(t`Are you sure you want to delete ${extensionName}?`, POPUP_TYPE.CONFIRM, '', { customInputs });
+    const popup = new Popup(t`Are you sure you want to delete ${escapeHtml(extensionName)}?`, POPUP_TYPE.CONFIRM, '', { customInputs });
     const confirmation = await popup.show();
     if (confirmation === POPUP_RESULT.AFFIRMATIVE) {
         const shouldClean = hasCleanHook && Boolean(popup.inputResults?.get('extension_delete_cleanup'));

 async function onCleanClick() {
     const extensionName = $(this).data('name');
-    const confirmation = await Popup.show.confirm(t`Clean extension data`, t`Are you sure you want to clean up data for ${extensionName}? This action cannot be undone.`);
+    const confirmation = await Popup.show.confirm(t`Clean extension data`, t`Are you sure you want to clean up data for ${escapeHtml(extensionName)}? This action cannot be undone.`);
     if (!confirmation) {
         return;
+    }

     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 ${escapeHtml(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.`;
+        : t`Are you sure you want to move ${escapeHtml(extensionName)} to the global extensions? This will make it available for all users.`;
     const confirmation = await Popup.show.confirm(confirmationHeader, confirmationText);

@@ -1493,6 +1611,9 @@ async function getExtensionVersion(extensionName, abortSignal) {
1493	const data = await response.json();	1611	const data = await response.json();
1494	return data;	1612	return data;
1495	} catch (error) {	1613	} catch (error) {
		1614	if (error instanceof Error && error.name === 'AbortError') {
		1615	return;
		1616	}
1496	console.error('Error:', error);	1617	console.error('Error:', error);
1497	}	1618	}
1498	}	1619	}

         const promise = enqueueVersionCheck(async () => {
             try {
                 const data = await getExtensionVersion(externalId, abortSignal);
-                const extensionBlock = document.querySelector(`.extension_block[data-name="${externalId}"]`);
+                if (!data) {
+                    return;
+                }
+                const selector = getNameSelector(externalId, { prefix: '' });
+                const extensionBlock = document.querySelector(`.extension_block[data-name="${selector}"]`);
                 if (extensionBlock && data) {
                     if (data.isUpToDate === false) {
                         const buttonElement = extensionBlock.querySelector('.btn_update');

             const promise = enqueueVersionCheck(async () => {
                 try {
                     const data = await getExtensionVersion(id.replace('third-party', ''));
+                    if (!data) {
+                        return;
+                    }
                     if (!data.isUpToDate) {
                         updatesAvailable.push(manifest.display_name);
+                    }

public/scripts/extensions/assets/index.js+306 -199 Viewed

 import { getRequestHeaders, processDroppedFiles, eventSource, event_types } from '../../../script.js';
 import { deleteExtension, EMPTY_AUTHOR, extensionNames, getAuthorFromUrl, getContext, installExtension, renderExtensionTemplateAsync, isOfficialExtension } from '../../extensions.js';
 import { POPUP_TYPE, Popup, callGenericPopup } from '../../popup.js';
-import { executeSlashCommandsWithOptions } from '../../slash-commands.js';
 import { accountStorage } from '../../util/AccountStorage.js';
-import { flashHighlight, getStringHash, isValidUrl } from '../../utils.js';
+import { escapeHtml, flashHighlight, getStringHash, isValidUrl } from '../../utils.js';
 import { t, translate } from '../../i18n.js';
+import { SlashCommandParser } from '/scripts/slash-commands/SlashCommandParser.js';
 export { MODULE_NAME };
 const MODULE_NAME = 'assets';

     'blip': t`Blip sounds`,
 };
-async function downloadAssetsList(url) {
+/**
-    updateCurrentAssets().then(async function () {
+ * Creates the download/delete button element for a single asset, with all interaction handlers attached.
-        fetch(url, { cache: 'no-cache' })
+ * @param {object} asset The asset data object, containing at least id, name, description and url fields
-            .then(response => response.json())
+ * @param {string} assetType Asset type, e.g. 'extension', 'character', 'ambient', 'bgm', 'blip'
-            .then(async function (json) {
+ * @param {number} index Index of the asset in the list of available assets of the same type, used to create a unique element ID
-                availableAssets = {};
+ * @returns {JQuery} The button element
-                $('#assets_menu').empty();
+ */
+function createAssetButton(asset, assetType, index) {
-                console.debug(DEBUG_PREFIX, 'Received assets dictionary', json);
+    const elemId = `assets_install_${assetType}_${index}`;
+    const element = $('<div />', { id: elemId, class: 'asset-download-button right_menu_button' });
+    const label = $('<i class="fa-fw fa-solid fa-download fa-lg"></i>');
+    element.append(label);
+    console.debug(DEBUG_PREFIX, 'Checking asset', asset.id, asset.url);
+    const assetInstall = async function () {
+        element.off('click');
+        label.removeClass('fa-download');
+        this.classList.add('asset-download-button-loading');
+        const result = await installAsset(asset.url, assetType, asset.id);
+        if (!result) {
+            this.classList.remove('asset-download-button-loading');
+            label.addClass('fa-download');
+            label.removeClass('fa-spinner');
+            label.removeClass('fa-spin');
+            element.on('click', assetInstall);
+            return;
+        }
+        label.addClass('fa-check');
+        this.classList.remove('asset-download-button-loading');
+        element.on('click', assetDelete);
+        element.on('mouseenter', function () {
+            label.removeClass('fa-check');
+            label.addClass('fa-trash');
+            label.addClass('redOverlayGlow');
+        }).on('mouseleave', function () {
+            label.addClass('fa-check');
+            label.removeClass('fa-trash');
+            label.removeClass('redOverlayGlow');
+        });
+    };
-                for (const i of json) {
+    const assetDelete = async function () {
-                    //console.log(DEBUG_PREFIX,i)
+        if (assetType === 'character') {
-                    if (availableAssets[i.type] === undefined)
+            toastr.error('Go to the characters menu to delete a character.', 'Character deletion not supported');
-                        availableAssets[i.type] = [];
+            await SlashCommandParser.commands.go.callback(null, asset.id);
+            return;
+        }
+        element.off('click');
+        await deleteAsset(assetType, asset.id);
+        label.removeClass('fa-check');
+        label.removeClass('redOverlayGlow');
+        label.removeClass('fa-trash');
+        label.addClass('fa-download');
+        element.off('mouseenter').off('mouseleave');
+        element.on('click', assetInstall);
+    };
+    if (isAssetInstalled(assetType, asset.id)) {
+        console.debug(DEBUG_PREFIX, 'installed, checked');
+        label.toggleClass('fa-download');
+        label.toggleClass('fa-check');
+        element.on('click', assetDelete);
+        element.on('mouseenter', function () {
+            label.removeClass('fa-check');
+            label.addClass('fa-trash');
+            label.addClass('redOverlayGlow');
+        }).on('mouseleave', function () {
+            label.addClass('fa-check');
+            label.removeClass('fa-trash');
+            label.removeClass('redOverlayGlow');
+        });
+    } else {
+        console.debug(DEBUG_PREFIX, 'not installed, unchecked');
+        element.prop('checked', false);
+        element.on('click', assetInstall);
+    }
-                    availableAssets[i.type].push(i);
+    return element;
-                }
+}
-                console.debug(DEBUG_PREFIX, 'Updated available assets to', availableAssets);
+/**
-                // First extensions, then everything else
+ * Creates the full visual block element for a single asset.
-                const assetTypes = Object.keys(availableAssets).sort((a, b) => (a === 'extension') ? -1 : (b === 'extension') ? 1 : 0);
+ * @param {object} asset The asset data object, containing at least id, name, description and url fields
+ * @param {string} assetType Asset type, e.g. 'extension', 'character', 'ambient', 'bgm', 'blip'
+ * @param {JQuery} element The button element from createAssetButton
+ * @returns {JQuery} The asset block element
+ */
+function createAssetBlock(asset, assetType, element) {
+    console.debug(DEBUG_PREFIX, 'Created element for ', asset.id);
+    const displayName = DOMPurify.sanitize(asset.name || asset.id);
+    const description = DOMPurify.sanitize(asset.description || '');
+    const url = isValidUrl(asset.url) ? asset.url : '';
+    const title = assetType === 'extension' ? t`Extension repo/guide:` + ` ${url}` : t`Preview in browser`;
+    const previewIcon = (assetType === 'extension' || assetType === 'character') ? 'fa-arrow-up-right-from-square' : 'fa-headphones-simple';
+    const toolTag = assetType === 'extension' && asset.tool;
+    const author = url && assetType === 'extension' ? getAuthorFromUrl(url) : EMPTY_AUTHOR;
+    const nameSpan = $('<span>', { class: 'asset-name flex-container alignitemscenter' })
+        .append($('<b>').text(displayName))
+        .append($('<a>', { class: 'asset_preview', href: url, target: '_blank', title: title })
+            .append($('<i>', { class: `fa-solid fa-sm ${previewIcon}` })));
+    if (toolTag) {
+        const tagSpan = $('<span>', { class: 'tag', title: t`Adds a function tool` })
+            .append($('<i>', { class: 'fa-solid fa-sm fa-wrench' }))
+            .append(document.createTextNode(` ${t`Tool`}`));
+        nameSpan.append(tagSpan);
+    }
-                $('#assets_type_select').empty();
+    nameSpan.append($('<span>', { class: 'expander' }));
-                $('#assets_search').val('');
-                $('#assets_type_select').append($('<option />', { value: '', text: t`All` }));
-                for (const type of assetTypes) {
+    if (author.name) {
-                    const text = translate(KNOWN_TYPES[type] || type);
+        nameSpan.append($('<a>', { href: author.url, target: '_blank', class: 'asset-author-info' })
-                    const option = $('<option />', { value: type, text: text });
+            .append($('<i>', { class: 'fa-solid fa-at fa-xs' }))
-                    $('#assets_type_select').append(option);
+            .append($('<span>').text(author.name)));
-                }
+    }
-                if (assetTypes.includes('extension')) {
+    const infoDiv = $('<div>', { class: 'flex-container flexFlowColumn flexNoGap wide100p overflowHidden' })
-                    $('#assets_type_select').val('extension');
+        .append(nameSpan)
-                }
+        .append($('<small>', { class: 'asset-description' }).text(description));
-                $('#assets_type_select').off('change').on('change', filterAssets);
+    const assetBlock = $('<i></i>').append(element).append(infoDiv);
-                $('#assets_search').off('input').on('input', filterAssets);
-                for (const assetType of assetTypes) {
-                    let assetTypeMenu = $('<div />', { id: 'assets_audio_ambient_div', class: 'assets-list-div' });
-                    assetTypeMenu.attr('data-type', assetType);
-                    assetTypeMenu.append(`<h3>${KNOWN_TYPES[assetType] || assetType}</h3>`).hide();
-                    if (assetType == 'extension') {
-                        assetTypeMenu.append(await renderExtensionTemplateAsync('assets', 'installation'));
-                    }
-                    for (const asset of availableAssets[assetType].sort((a, b) => a?.name && b?.name && a.name.localeCompare(b.name))) {
-                        const i = availableAssets[assetType].indexOf(asset);
-                        const elemId = `assets_install_${assetType}_${i}`;
-                        let element = $('<div />', { id: elemId, class: 'asset-download-button right_menu_button' });
-                        const label = $('<i class="fa-fw fa-solid fa-download fa-lg"></i>');
-                        element.append(label);
-                        //if (DEBUG_TONY_SAMA_FORK_MODE)
-                        //    asset["url"] = asset["url"].replace("https://github.com/SillyTavern/","https://github.com/Tony-sama/"); // DBG
-                        console.debug(DEBUG_PREFIX, 'Checking asset', asset.id, asset.url);
-                        const assetInstall = async function () {
-                            element.off('click');
-                            label.removeClass('fa-download');
-                            this.classList.add('asset-download-button-loading');
-                            const result = await installAsset(asset.url, assetType, asset.id);
-                            if (!result) {
-                                this.classList.remove('asset-download-button-loading');
-                                label.addClass('fa-download');
-                                label.removeClass('fa-spinner');
-                                label.removeClass('fa-spin');
-                                element.on('click', assetInstall);
-                                return;
-                            }
-                            label.addClass('fa-check');
-                            this.classList.remove('asset-download-button-loading');
-                            element.on('click', assetDelete);
-                            element.on('mouseenter', function () {
-                                label.removeClass('fa-check');
-                                label.addClass('fa-trash');
-                                label.addClass('redOverlayGlow');
-                            }).on('mouseleave', function () {
-                                label.addClass('fa-check');
-                                label.removeClass('fa-trash');
-                                label.removeClass('redOverlayGlow');
-                            });
-                        };
-                        const assetDelete = async function () {
-                            if (assetType === 'character') {
-                                toastr.error('Go to the characters menu to delete a character.', 'Character deletion not supported');
-                                await executeSlashCommandsWithOptions(`/go ${asset.id}`);
-                                return;
-                            }
-                            element.off('click');
-                            await deleteAsset(assetType, asset.id);
-                            label.removeClass('fa-check');
-                            label.removeClass('redOverlayGlow');
-                            label.removeClass('fa-trash');
-                            label.addClass('fa-download');
-                            element.off('mouseenter').off('mouseleave');
-                            element.on('click', assetInstall);
-                        };
-                        if (isAssetInstalled(assetType, asset.id)) {
-                            console.debug(DEBUG_PREFIX, 'installed, checked');
-                            label.toggleClass('fa-download');
-                            label.toggleClass('fa-check');
-                            element.on('click', assetDelete);
-                            element.on('mouseenter', function () {
-                                label.removeClass('fa-check');
-                                label.addClass('fa-trash');
-                                label.addClass('redOverlayGlow');
-                            }).on('mouseleave', function () {
-                                label.addClass('fa-check');
-                                label.removeClass('fa-trash');
-                                label.removeClass('redOverlayGlow');
-                            });
-                        } else {
-                            console.debug(DEBUG_PREFIX, 'not installed, unchecked');
-                            element.prop('checked', false);
-                            element.on('click', assetInstall);
-                        }
-                        console.debug(DEBUG_PREFIX, 'Created element for ', asset.id);
-                        const displayName = DOMPurify.sanitize(asset.name || asset.id);
-                        const description = DOMPurify.sanitize(asset.description || '');
-                        const url = isValidUrl(asset.url) ? asset.url : '';
-                        const title = assetType === 'extension' ? t`Extension repo/guide:` + ` ${url}` : t`Preview in browser`;
-                        const previewIcon = (assetType === 'extension' || assetType === 'character') ? 'fa-arrow-up-right-from-square' : 'fa-headphones-simple';
-                        const toolTag = assetType === 'extension' && asset.tool;
-                        const author = url && assetType === 'extension' ? getAuthorFromUrl(url) : EMPTY_AUTHOR;
-                        const assetBlock = $('<i></i>')
-                            .append(element)
-                            .append(`<div class="flex-container flexFlowColumn flexNoGap wide100p overflowHidden">
-                                        <span class="asset-name flex-container alignitemscenter">
-                                            <b>${displayName}</b>
-                                            <a class="asset_preview" href="${url}" target="_blank" title="${title}">
-                                                <i class="fa-solid fa-sm ${previewIcon}"></i>
-                                            </a>` +
-                                            (toolTag ? '<span class="tag" title="' + t`Adds a function tool` + '"><i class="fa-solid fa-sm fa-wrench"></i> ' +
-                                            t`Tool` + '</span>' : '') +
-                                            '<span class="expander"></span>' +
-                                            (author.name ? `<a href="${author.url}" target="_blank" class="asset-author-info"><i class="fa-solid fa-at fa-xs"></i><span>${author.name}</span></a>` : '') +
-                                        `</span>
-                                        <small class="asset-description">
-                                            ${description}
-                                        </small>
-                                     </div>`);
-                        assetBlock.find('.tag').on('click', function (e) {
-                            const a = document.createElement('a');
-                            a.href = 'https://docs.sillytavern.app/for-contributors/function-calling/';
-                            a.target = '_blank';
-                            a.click();
-                        });
-                        if (assetType === 'character') {
-                            if (asset.highlight) {
-                                assetBlock.find('.asset-name').append('<i class="fa-solid fa-sm fa-trophy"></i>');
-                            }
-                            assetBlock.find('.asset-name').prepend(`<div class="avatar"><img src="${asset.url}" alt="${displayName}"></div>`);
-                        }
-                        assetBlock.addClass('asset-block');
-                        if (assetType === 'extension') {
-                            const extensionBlockList = isOfficialExtension(asset.url)
-                                ? assetTypeMenu.find('.assets-list-extensions-official .assets-list-extensions')
-                                : assetTypeMenu.find('.assets-list-extensions-community .assets-list-extensions');
-                            extensionBlockList.append(assetBlock);
-                        } else {
-                            assetTypeMenu.append(assetBlock);
-                        }
-                    }
-                    assetTypeMenu.appendTo('#assets_menu');
-                    assetTypeMenu.on('click', 'a.asset_preview', previewAsset);
-                }
-                filterAssets();
+    assetBlock.find('.tag').on('click', function (e) {
-                $('#assets_filters').show();
+        const a = document.createElement('a');
-                $('#assets_menu').show();
+        a.href = 'https://docs.sillytavern.app/for-contributors/function-calling/';
-            })
+        a.target = '_blank';
-            .catch((error) => {
+        a.click();
-                // Info hint if the user maybe... likely accidently was trying to install an extension and we wanna help guide them? uwu :3
-                const installButton = $('#third_party_extension_button');
-                flashHighlight(installButton, 10_000);
-                toastr.info('Click the flashing button at the top right corner of the menu.', 'Trying to install a custom extension?', { timeOut: 10_000 });
-                // Error logged after, to appear on top
-                console.error(error);
-                toastr.error('Problem with assets URL', DEBUG_PREFIX + 'Cannot get assets list');
-                $('#assets-connect-button').addClass('fa-plug-circle-exclamation');
-                $('#assets-connect-button').addClass('redOverlayGlow');
-            });
     });
+    if (assetType === 'character') {
+        if (asset.highlight) {
+            nameSpan.append($('<i>', { class: 'fa-solid fa-sm fa-trophy' }));
+        }
+        nameSpan.prepend($('<div>', { class: 'avatar' }).append($('<img>', { src: asset.url, alt: displayName })));
+    }
+    assetBlock.addClass('asset-block');
+    return assetBlock;
+}
+/**
+ * Builds and appends the menu section for a single asset type.
+ * @param {string} assetType Asset type, e.g. 'extension', 'character', 'ambient', 'bgm', 'blip'
+ * @returns {Promise<void>}
+ */
+async function buildAssetTypeSection(assetType) {
+    const assetTypeMenu = $('<div />', { id: `assets_${assetType}_div`, class: 'assets-list-div' });
+    assetTypeMenu.attr('data-type', assetType);
+    assetTypeMenu.append($('<h3>').text(KNOWN_TYPES[assetType] || assetType)).hide();
+    if (assetType == 'extension') {
+        assetTypeMenu.append(await renderExtensionTemplateAsync('assets', 'installation'));
+    }
+    for (const asset of availableAssets[assetType].sort((a, b) => a?.name && b?.name && a.name.localeCompare(b.name))) {
+        const i = availableAssets[assetType].indexOf(asset);
+        const element = createAssetButton(asset, assetType, i);
+        const assetBlock = createAssetBlock(asset, assetType, element);
+        if (assetType === 'extension') {
+            const extensionBlockList = isOfficialExtension(asset.url)
+                ? assetTypeMenu.find('.assets-list-extensions-official .assets-list-extensions')
+                : assetTypeMenu.find('.assets-list-extensions-community .assets-list-extensions');
+            extensionBlockList.append(assetBlock);
+        } else {
+            assetTypeMenu.append(assetBlock);
+        }
+    }
+    assetTypeMenu.appendTo('#assets_menu');
+    assetTypeMenu.on('click', 'a.asset_preview', previewAsset);
+}
+/**
+ * Parses the fetched assets JSON and renders the full assets menu.
+ * @param {object[]} json Array of asset objects, each containing at least id, name, description, url and type fields
+ */
+async function populateAssetsMenu(json) {
+    availableAssets = {};
+    $('#assets_menu').empty();
+    console.debug(DEBUG_PREFIX, 'Received assets dictionary', json);
+    for (const i of json) {
+        if (availableAssets[i.type] === undefined)
+            availableAssets[i.type] = [];
+        availableAssets[i.type].push(i);
+    }
+    console.debug(DEBUG_PREFIX, 'Updated available assets to', availableAssets);
+    // First extensions, then everything else
+    const assetTypes = Object.keys(availableAssets).sort((a, b) => (a === 'extension') ? -1 : (b === 'extension') ? 1 : 0);
+    $('#assets_type_select').empty();
+    $('#assets_search').val('');
+    $('#assets_type_select').append($('<option />', { value: '', text: t`All` }));
+    for (const type of assetTypes) {
+        const text = translate(KNOWN_TYPES[type] || type);
+        const option = $('<option />', { value: type, text: text });
+        $('#assets_type_select').append(option);
+    }
+    if (assetTypes.includes('extension')) {
+        $('#assets_type_select').val('extension');
+    }
+    $('#assets_type_select').off('change').on('change', filterAssets);
+    $('#assets_search').off('input').on('input', filterAssets);
+    for (const assetType of assetTypes) {
+        await buildAssetTypeSection(assetType);
+    }
+    filterAssets();
+    $('#assets_filters').show();
+    $('#assets_menu').show();
+}
+/**
+ * Downloads the assets list from the given URL and populates the menu. Shows error message if something goes wrong.
+ * @param {URL} url URL to fetch from
+ */
+async function downloadAssetsList(url) {
+    await updateCurrentAssets();
+    try {
+        const response = await fetch(url, { cache: 'no-cache' });
+        if (!response.ok) {
+            throw new Error('Cannot download the assets list.');
+        }
+        const json = await response.json();
+        if (!Array.isArray(json)) {
+            throw new Error('Assets list is not an array');
+        }
+        await populateAssetsMenu(json);
+    } catch (error) {
+        // Info hint if the user maybe... likely accidentally was trying to install an extension and we wanna help guide them? uwu :3
+        const installButton = $('#third_party_extension_button');
+        flashHighlight(installButton, 10_000);
+        toastr.info('Click the flashing button at the top right corner of the menu.', 'Trying to install a custom extension?', { timeOut: 10_000 });
+        // Error logged after, to appear on top
+        console.error(error);
+        toastr.error('Problem with assets URL', 'Cannot get assets list');
+        $('#assets-connect-button').addClass('fa-plug-circle-exclamation');
+        $('#assets-connect-button').addClass('redOverlayGlow');
+    }
+}
+/**
+ * Previews the asset by opening its URL. If it's an audio asset, it plays a preview sound. Otherwise, it opens the URL in a new tab.
+ * @param {JQuery.Event} e Click event
+ */
 function previewAsset(e) {
     const href = $(this).attr('href');
     const audioExtensions = ['.mp3', '.ogg', '.wav'];

+    }
+}
+/**
+ * Checks if the asset is already installed.
+ * For extensions, it checks if the extension name is in the list of installed extensions.
+ * For characters, it checks if any character has the same avatar URL.
+ * For other asset types, it checks if any installed asset of the same type has a URL that includes the filename.
+ * @param {string} assetType Type of the asset, e.g. 'extension', 'character', 'ambient', 'bgm', 'blip'
+ * @param {string} filename Name or ID of the asset
+ * @returns {boolean} True if the asset is installed, false otherwise
+ */
 function isAssetInstalled(assetType, filename) {
     let assetList = currentAssets[assetType];

     return false;
+}
+/**
+ * Installs the asset by sending a request to the server to download it. If it's an extension, it uses the existing installExtension function.
+ * @param {string} url URL of the asset to download
+ * @param {string} assetType Type of the asset, e.g. 'extension', 'character', 'ambient', 'bgm', 'blip'
+ * @param {string} filename Name or ID of the asset
+ * @returns {Promise<boolean>} True if the asset was successfully installed, false otherwise
+ */
 async function installAsset(url, assetType, filename) {
     console.debug(DEBUG_PREFIX, 'Downloading ', url);
     const category = assetType;

                 console.debug(DEBUG_PREFIX, 'Importing character ', filename);
                 const blob = await result.blob();
                 const file = new File([blob], filename, { type: blob.type });
-                await processDroppedFiles([file]);
+                const fileNameMap = new Map([[file, filename]]);
+                await processDroppedFiles([file], fileNameMap);
                 console.debug(DEBUG_PREFIX, 'Character downloaded.');
+            }
             return true;

+    }
+}
+/**
+ * Deletes the asset by sending a request to the server to delete it. If it's an extension, it uses the existing deleteExtension function.
+ * @param {string} assetType Type of the asset, e.g. 'extension', 'character', 'ambient', 'bgm', 'blip'
+ * @param {string} filename Name or ID of the asset
+ * @returns {Promise<boolean>} True if the asset was successfully deleted, false otherwise
+ */
 async function deleteAsset(assetType, filename) {
     console.debug(DEBUG_PREFIX, 'Deleting ', assetType, filename);
     const category = assetType;

             console.debug(DEBUG_PREFIX, 'Deleting extension ', filename);
             await deleteExtension(filename);
             console.debug(DEBUG_PREFIX, 'Extension deleted.');
+            return true;
+        }
         const body = { category, filename };

         });
         if (result.ok) {
             console.debug(DEBUG_PREFIX, 'Deletion success.');
+            return true;
+        }
+        return false;
     } catch (err) {
         console.log(err);
-        return [];
+        return false;
+    }
+}
+/**
+ * Opens the character browser popup, which shows all available characters and allows downloading them.
+ * @param {boolean} forceDefault If true, it uses the default ASSETS_JSON_URL instead of the one from the input field.
+ * @returns {Promise<void>}
+ */
 async function openCharacterBrowser(forceDefault) {
     const url = forceDefault ? ASSETS_JSON_URL : String($('#assets-json-url-field').val());
+    if (!isValidUrl(url)) {
+        toastr.error('Please enter a valid URL');
+        return;
+    }
     const fetchResult = await fetch(url, { cache: 'no-cache' });
+    if (!fetchResult.ok) {
+        toastr.error('Cannot download the assets list.');
+        return;
+    }
     const json = await fetchResult.json();
-    const characters = json.filter(x => x.type === 'character');
+    if (!Array.isArray(json)) {
+        toastr.error('Assets list is not an array');
+        return;
+    }
+    const characters = json.filter(x => x && x.type === 'character');
     if (!characters.length) {
         toastr.error('No characters found in the assets list', 'Character browser');
         return;

@@ -395,7 +494,10 @@ async function openCharacterBrowser(forceDefault) {
395	}	494	}
396	});	495	});
397		496
398	checkMark.toggle(isInstalled);	497	checkMark.toggle(isInstalled).on('click', async () => {
		498	toastr.error('Go to the characters menu to delete a character.', 'Character deletion not supported');
		499	await SlashCommandParser.commands.go.callback(null, character.id);
		500	});
399		501
400	listElement.append(characterElement);	502	listElement.append(characterElement);
401	}	503	}

     const connectButton = windowHtml.find('#assets-connect-button');
     connectButton.on('click', async function () {
-        const url = DOMPurify.sanitize(String(assetsJsonUrl.val()));
+        const urlString = String(assetsJsonUrl.val()).trim();
-        const rememberKey = `Assets_SkipConfirm_${getStringHash(url)}`;
+        if (!isValidUrl(urlString)) {
+            toastr.error('Please enter a valid URL');
+            return;
+        }
+        const url = new URL(urlString);
+        const rememberKey = `Assets_SkipConfirm_${getStringHash(url.href)}`;
         const skipConfirm = accountStorage.getItem(rememberKey) === 'true';
-        const confirmation = skipConfirm || await Popup.show.confirm(t`Loading Asset List`, '<span>' + t`Are you sure you want to connect to the following url?` + `</span><var>${url}</var>`, {
+        const confirmation = skipConfirm || await Popup.show.confirm(t`Loading Asset List`, '<span>' + t`Are you sure you want to connect to the following url?` + `</span><var>${escapeHtml(url.href)}</var>`, {
             customInputs: [{ id: 'assets-remember', label: 'Don\'t ask again for this URL' }],
             onClose: popup => {
                 if (popup.result) {

                 connectButton.addClass('fa-plug-circle-check');
             } catch (error) {
                 console.error('Error:', error);
-                toastr.error(`Cannot get assets list from ${url}`);
+                toastr.error(`Cannot get assets list from ${url.href}`);
                 connectButton.removeClass('fa-plug-circle-check');
                 connectButton.addClass('fa-plug-circle-exclamation');
                 connectButton.removeClass('redOverlayGlow');