easydiffusion/ui/media/js/plugins.js

const PLUGIN_API_VERSION = "1.0"

const PLUGIN_CATALOG = 'https://raw.githubusercontent.com/easydiffusion/easydiffusion-plugins/main/plugins.json'
const PLUGIN_CATALOG_GITHUB = 'https://github.com/easydiffusion/easydiffusion-plugins/blob/main/plugins.json'

const PLUGINS = {
    /**
     * Register new buttons to show on each output image.
     *
     * Example:
     * PLUGINS['IMAGE_INFO_BUTTONS'].push({
     *   text: 'Make a Similar Image',
     *   on_click: function(origRequest, image) {
     *     let newTaskRequest = getCurrentUserRequest()
     *     newTaskRequest.reqBody = Object.assign({}, origRequest, {
     *       init_image: image.src,
     *       prompt_strength: 0.7,
     *       seed: Math.floor(Math.random() * 10000000)
     *     })
     *     newTaskRequest.seed = newTaskRequest.reqBody.seed
     *     createTask(newTaskRequest)
     *   },
     *   filter: function(origRequest, image) {
     *     // this is an optional function. return true/false to show/hide the button
     *     // if this function isn't set, the button will always be visible
     *     return true
     *   }
     * })
     */
    IMAGE_INFO_BUTTONS: [],
    GET_PROMPTS_HOOK: [],
    MODIFIERS_LOAD: [],
    TASK_CREATE: [],
    OUTPUTS_FORMATS: new ServiceContainer(
        function png() {
            return (reqBody) => new SD.RenderTask(reqBody)
        },
        function jpeg() {
            return (reqBody) => new SD.RenderTask(reqBody)
        },
        function webp() {
            return (reqBody) => new SD.RenderTask(reqBody)
        }
    ),
}
PLUGINS.OUTPUTS_FORMATS.register = function(...args) {
    const service = ServiceContainer.prototype.register.apply(this, args)
    if (typeof outputFormatField !== "undefined") {
        const newOption = document.createElement("option")
        newOption.setAttribute("value", service.name)
        newOption.innerText = service.name
        outputFormatField.appendChild(newOption)
    }
    return service
}

function loadScript(url) {
    const script = document.createElement("script")
    const promiseSrc = new PromiseSource()
    script.addEventListener("error", () => promiseSrc.reject(new Error(`Script "${url}" couldn't be loaded.`)))
    script.addEventListener("load", () => promiseSrc.resolve(url))
    script.src = url + "?t=" + Date.now()

    console.log("loading script", url)
    document.head.appendChild(script)

    return promiseSrc.promise
}

async function loadUIPlugins() {
    try {
        const res = await fetch("/get/ui_plugins")
        if (!res.ok) {
            console.error(`Error HTTP${res.status} while loading plugins list. - ${res.statusText}`)
            return
        }
        const plugins = await res.json()
        const loadingPromises = plugins.map(loadScript)
        return await Promise.allSettled(loadingPromises)
    } catch (e) {
        console.log("error fetching plugin paths", e)
    }
}


/* PLUGIN MANAGER */
/* plugin tab */
document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
    <span id="tab-plugin" class="tab" style="display: none">
        <span><i class="fa fa-puzzle-piece icon"></i> Plugins</span>
    </span>
`)

document.querySelector('#tab-content-wrapper')?.insertAdjacentHTML('beforeend', `
    <div id="tab-content-plugin" class="tab-content">
        <div id="plugin" class="tab-content-inner">
            Loading...
        </div>
    </div>
`)

const tabPlugin = document.querySelector('#tab-plugin')
if (tabPlugin) {
    linkTabContents(tabPlugin)
}

const plugin = document.querySelector('#plugin')
plugin.innerHTML = `
<div id="plugin-manager" class="tab-content-inner">
    <i id="plugin-notification-button" class="fa-solid fa-message">
        <span class="plugin-notification-pill" id="notification-pill" style="display: none"></span>
    </i>
    <div id="plugin-notification-list" style="display: none">
        <h1>Notifications</h1>
        <div class="plugin-manager-intro">The latest plugin updates are listed below</div>
        <div class="notifications-table"></div>
        <div class="no-notification">No new notifications</div>
    </div>
    <div id="plugin-manager-section">
        <h1>Plugin Manager</h1>
        <div class="plugin-manager-intro">Changes take effect after reloading the page</div>
        <div class="plugins-table"></div>
    </div>
</div>`
const pluginsTable = document.querySelector("#plugin-manager-section .plugins-table")
const pluginNotificationTable = document.querySelector("#plugin-notification-list .notifications-table")
const pluginNoNotification = document.querySelector("#plugin-notification-list .no-notification")

/* notification center */
const pluginNotificationButton = document.getElementById("plugin-notification-button");
const pluginNotificationList = document.getElementById("plugin-notification-list");
const notificationPill = document.getElementById("notification-pill");
const pluginManagerSection = document.getElementById("plugin-manager-section");
let pluginNotifications;

// Add event listener to show/hide the action center
pluginNotificationButton.addEventListener("click", function () {
    // Hide the notification pill when the action center is opened
    notificationPill.style.display = "none"
    pluginNotifications.lastUpdated = Date.now()

    // save the notifications
    setStorageData('notifications', JSON.stringify(pluginNotifications))

    renderPluginNotifications()

    if (pluginNotificationList.style.display === "none") {
        pluginNotificationList.style.display = "block"
        pluginManagerSection.style.display = "none"
    } else {
        pluginNotificationList.style.display = "none"
        pluginManagerSection.style.display = "block"
    }
})

document.addEventListener("tabClick", (e) => {
    if (e.detail.name == 'plugin') {
        pluginNotificationList.style.display = "none"
        pluginManagerSection.style.display = "block"
    }
})

async function addPluginNotification(pluginNotifications, messageText, error) {
    const now = Date.now()
    pluginNotifications.entries.unshift({ date: now, text: messageText, error: error }); // add new entry to the beginning of the array
    if (pluginNotifications.entries.length > 50) {
        pluginNotifications.entries.length = 50 // limit array length to 50 entries
    }
    pluginNotifications.lastUpdated = now
    notificationPill.style.display = "block"
    // save the notifications
    await setStorageData('notifications', JSON.stringify(pluginNotifications))
}

function timeAgo(inputDate) {
    const now = new Date();
    const date = new Date(inputDate);
    const diffInSeconds = Math.floor((now - date) / 1000);
    const units = [
        { name: 'year', seconds: 31536000 },
        { name: 'month', seconds: 2592000 },
        { name: 'week', seconds: 604800 },
        { name: 'day', seconds: 86400 },
        { name: 'hour', seconds: 3600 },
        { name: 'minute', seconds: 60 },
        { name: 'second', seconds: 1 }
    ];

    for (const unit of units) {
        const unitValue = Math.floor(diffInSeconds / unit.seconds);
        if (unitValue > 0) {
            return `${unitValue} ${unit.name}${unitValue > 1 ? 's' : ''} ago`;
        }
    }

    return 'just now';
}

function convertSeconds(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const remainingSeconds = seconds % 60;

    let timeParts = [];
    if (hours === 1) {
        timeParts.push(`${hours} hour`);
    } else if (hours > 1) {
        timeParts.push(`${hours} hours`);
    }
    if (minutes === 1) {
        timeParts.push(`${minutes} minute`);
    } else if (minutes > 1) {
        timeParts.push(`${minutes} minutes`);
    }
    if (remainingSeconds === 1) {
        timeParts.push(`${remainingSeconds} second`);
    } else if (remainingSeconds > 1) {
        timeParts.push(`${remainingSeconds} seconds`);
    }

    return timeParts.join(', and ');
}

function renderPluginNotifications() {
    pluginNotificationTable.innerHTML = ''

    if (pluginNotifications.entries?.length > 0) {
        pluginNoNotification.style.display = "none"
        pluginNotificationTable.style.display = "block"
    }
    else {
        pluginNoNotification.style.display = "block"
        pluginNotificationTable.style.display = "none"
    }
    for (let i = 0; i < pluginNotifications.entries?.length; i++) {
        const date = pluginNotifications.entries[i].date
        const text = pluginNotifications.entries[i].text
        const error = pluginNotifications.entries[i].error
        const newRow = document.createElement('div')

        newRow.innerHTML = `
            <div${error === true ? ' class="notification-error"' : ''}>${text}</div>
            <div><small>${timeAgo(date)}</small></div>
        `;
        pluginNotificationTable.appendChild(newRow)
    }
}

/* search box */
function filterPlugins() {
    let search = pluginFilter.value.toLowerCase();
    let searchTerms = search.split(' ');
    let labels = pluginsTable.querySelectorAll("label.plugin-name");

    for (let i = 0; i < labels.length; i++) {
        let label = labels[i].innerText.toLowerCase();
        let match = true;

        for (let j = 0; j < searchTerms.length; j++) {
            let term = searchTerms[j].trim();
            if (term && label.indexOf(term) === -1) {
                match = false;
                break;
            }
        }

        if (match) {
            labels[i].closest('.plugin-container').style.display = "flex";
        } else {
            labels[i].closest('.plugin-container').style.display = "none";
        }
    }
}

// Call debounce function on filterImageModifierList function with 200ms wait time. Thanks JeLuf!
const debouncedFilterPlugins = debounce(filterPlugins, 200);

// add the searchbox
pluginsTable.insertAdjacentHTML('beforebegin', `<input type="text" id="plugin-filter" placeholder="Search for..." autocomplete="off"/>`)
const pluginFilter = document.getElementById("plugin-filter") // search box

// Add the debounced function to the keyup event listener
pluginFilter.addEventListener('keyup', debouncedFilterPlugins);

// select the text on focus
pluginFilter.addEventListener('focus', function (event) {
    pluginFilter.select()
});

// empty the searchbox on escape                
pluginFilter.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
        pluginFilter.value = '';
        filterPlugins();
    }
});

// focus on the search box upon tab selection
document.addEventListener("tabClick", (e) => {
    if (e.detail.name == 'plugin') {
        pluginFilter.focus()
    }
})

// refresh link
pluginsTable.insertAdjacentHTML('afterend', `<p id="refresh-plugins"><small><a id="refresh-plugins-link">Refresh plugins</a></small></p>
    <p><small>(Plugin developers, add your plugins to <a href='${PLUGIN_CATALOG_GITHUB}' target='_blank'>plugins.json</a>)</small></p>`)
const refreshPlugins = document.getElementById("refresh-plugins")
refreshPlugins.addEventListener("click", async function (event) {
    event.preventDefault()
    await initPlugins(true)
})

function showPluginToast(message, duration = 5000, error = false, addNotification = true) {
    if (addNotification === true) {
        addPluginNotification(pluginNotifications, message, error)
    }
    try {
        showToast(message, duration, error)
    } catch (error) {
        console.error('Error while trying to show toast:', error);
    }
}

function matchPluginFileNames(fileName1, fileName2) {
    const regex = /^(.+?)(?:-\d+(\.\d+)*)?\.plugin\.js$/;
    const match1 = fileName1.match(regex);
    const match2 = fileName2.match(regex);

    if (match1 && match2 && match1[1] === match2[1]) {
        return true; // the two file names match
    } else {
        return false; // the two file names do not match
    }
}

function extractFilename(filepath) {
    // Normalize the path separators to forward slashes and make the file names lowercase
    const normalizedFilePath = filepath.replace(/\\/g, "/").toLowerCase();

    // Strip off the path from the file name
    const fileName = normalizedFilePath.substring(normalizedFilePath.lastIndexOf("/") + 1);

    return fileName
}

function checkFileNameInArray(paths, filePath) {
    // Strip off the path from the file name
    const fileName = extractFilename(filePath);

    // Check if the file name exists in the array of paths
    return paths.some(path => {
        // Strip off the path from the file name
        const baseName = extractFilename(path);

        // Check if the file names match and return the result as a boolean
        return matchPluginFileNames(fileName, baseName);
    });
}

function isGitHub(url) {
    return url.startsWith("https://raw.githubusercontent.com/") === true
}

/* fill in the plugins table */
function getIncompatiblePlugins(pluginId) {
    const enabledPlugins = plugins.filter(plugin => plugin.enabled && plugin.id !== pluginId);
    const incompatiblePlugins = enabledPlugins.filter(plugin => plugin.compatIssueIds?.includes(pluginId));
    const pluginNames = incompatiblePlugins.map(plugin => plugin.name);
    if (pluginNames.length === 0) {
        return null;
    }
    const pluginNamesList = pluginNames.map(name => `<li>${name}</li>`).join('');
    return `<ul>${pluginNamesList}</ul>`;
}

async function initPluginTable(plugins) {
    pluginsTable.innerHTML = ''
    plugins.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
    plugins.forEach(plugin => {
        const name = plugin.name
        const author = plugin.author ? ', by ' + plugin.author : ''
        const version = plugin.version ? ' (version: ' + plugin.version + ')' : ''
        const warning = getIncompatiblePlugins(plugin.id) ? `<span class="plugin-warning${plugin.enabled ? '' : ' hide'}">This plugin might conflict with:${getIncompatiblePlugins(plugin.id)}</span>` : ''
        const note = plugin.description ? `<small>${plugin.description.replaceAll('\n', '<br>')}</small>` : `<small>No description</small>`;
        const icon = plugin.icon ? `<i class="fa ${plugin.icon}"></i>` : '<i class="fa fa-puzzle-piece"></i>';
        const newRow = document.createElement('div')
        const localPluginFound = checkFileNameInArray(localPlugins, plugin.url)

        newRow.innerHTML = `
            <div>${icon}</div>
            <div><label class="plugin-name">${name}${author}${version}</label>${warning}${note}<span class='plugin-source'>Source: <a href="${plugin.url}" target="_blank">${extractFilename(plugin.url)}</a><span></div>
            <div>
                ${localPluginFound ? "<span class='plugin-installed-locally'>Installed locally</span>" :
                (plugin.localInstallOnly ? '<span class="plugin-installed-locally">Download and<br />install manually</span>' :
                    (isGitHub(plugin.url) ?
                        '<input id="plugin-' + plugin.id + '" name="plugin-' + plugin.id + '" type="checkbox">' :
                        '<button id="plugin-' + plugin.id + '-install" class="tertiaryButton"></button>'
                    )
                )
            }
            </div>`;
        newRow.classList.add('plugin-container')
        //console.log(plugin.id, plugin.localInstallOnly)
        pluginsTable.appendChild(newRow)
        const pluginManualInstall = pluginsTable.querySelector('#plugin-' + plugin.id + '-install')
        updateManualInstallButtonCaption()

        // checkbox event handler
        const pluginToggle = pluginsTable.querySelector('#plugin-' + plugin.id)
        if (pluginToggle !== null) {
            pluginToggle.checked = plugin.enabled // set initial state of checkbox
            pluginToggle.addEventListener('change', async () => {
                const container = pluginToggle.closest(".plugin-container");
                const warningElement = container.querySelector(".plugin-warning");

                // if the plugin got enabled, download the plugin's code
                plugin.enabled = pluginToggle.checked
                if (plugin.enabled) {
                    const pluginSource = await getDocument(plugin.url);
                    if (pluginSource !== null) {
                        // Store the current scroll position before navigating away
                        const currentPosition = window.pageYOffset;
                        initPluginTable(plugins)
                        // When returning to the page, set the scroll position to the stored value
                        window.scrollTo(0, currentPosition);
                        warningElement?.classList.remove("hide");
                        plugin.code = pluginSource
                        loadPlugins([plugin])
                        console.log(`Plugin ${plugin.name} installed`);
                        showPluginToast("Plugin " + plugin.name + " installed");
                    }
                    else {
                        plugin.enabled = false
                        pluginToggle.checked = false
                        console.error(`Couldn't download plugin ${plugin.name}`);
                        showPluginToast("Failed to install " + plugin.name + " (Couldn't fetch " + extractFilename(plugin.url) + ")", 5000, true);
                    }
                } else {
                    warningElement?.classList.add("hide");
                    // Store the current scroll position before navigating away
                    const currentPosition = window.pageYOffset;
                    initPluginTable(plugins)
                    // When returning to the page, set the scroll position to the stored value
                    window.scrollTo(0, currentPosition);
                    console.log(`Plugin ${plugin.name} uninstalled`);
                    showPluginToast("Plugin " + plugin.name + " uninstalled");
                }
                await setStorageData('plugins', JSON.stringify(plugins))
            })
        }

        // manual install event handler
        if (pluginManualInstall !== null) {
            pluginManualInstall.addEventListener('click', async () => {
                pluginDialogOpenDialog(inputOK, inputCancel)
                pluginDialogTextarea.value = plugin.code ? plugin.code : ''
                pluginDialogTextarea.select()
                pluginDialogTextarea.focus()
            })
        }
        // Dialog OK
        async function inputOK() {
            let pluginSource = pluginDialogTextarea.value
            // remove empty lines and trim existing lines
            plugin.code = pluginSource
            if (pluginSource.trim() !== '') {
                plugin.enabled = true
                console.log(`Plugin ${plugin.name} installed`);
                showPluginToast("Plugin " + plugin.name + " installed");
            }
            else {
                plugin.enabled = false
                console.log(`No code provided for plugin ${plugin.name}, disabling the plugin`);
                showPluginToast("No code provided for plugin " + plugin.name + ", disabling the plugin");
            }
            updateManualInstallButtonCaption()
            await setStorageData('plugins', JSON.stringify(plugins))
        }
        // Dialog Cancel
        async function inputCancel() {
            plugin.enabled = false
            console.log(`Installation of plugin ${plugin.name} cancelled`);
            showPluginToast("Cancelled installation of " + plugin.name);
        }
        // update button caption
        function updateManualInstallButtonCaption() {
            if (pluginManualInstall !== null) {
                pluginManualInstall.innerHTML = plugin.code === undefined || plugin.code.trim() === '' ? 'Install' : 'Edit'
            }
        }
    })
    prettifyInputs(pluginsTable)
    filterPlugins()
}

/* version management. Thanks Madrang! */
const parseVersion = function (versionString, options = {}) {
    if (typeof versionString === "undefined") {
        throw new Error("versionString is undefined.");
    }
    if (typeof versionString !== "string") {
        throw new Error("versionString is not a string.");
    }
    const lexicographical = options && options.lexicographical;
    const zeroExtend = options && options.zeroExtend;
    let versionParts = versionString.split('.');
    function isValidPart(x) {
        const re = (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/);
        return re.test(x);
    }

    if (!versionParts.every(isValidPart)) {
        throw new Error("Version string is invalid.");
    }

    if (zeroExtend) {
        while (versionParts.length < 4) {
            versionParts.push("0");
        }
    }
    if (!lexicographical) {
        versionParts = versionParts.map(Number);
    }
    return versionParts;
};

const versionCompare = function (v1, v2, options = {}) {
    if (typeof v1 == "undefined") {
        throw new Error("vi is undefined.");
    }
    if (typeof v2 === "undefined") {
        throw new Error("v2 is undefined.");
    }

    let v1parts;
    if (typeof v1 === "string") {
        v1parts = parseVersion(v1, options);
    } else if (Array.isArray(v1)) {
        v1parts = [...v1];
        if (!v1parts.every(p => typeof p === "number" && p !== NaN)) {
            throw new Error("v1 part array does not only contains numbers.");
        }
    } else {
        throw new Error("v1 is of an unexpected type: " + typeof v1);
    }

    let v2parts;
    if (typeof v2 === "string") {
        v2parts = parseVersion(v2, options);
    } else if (Array.isArray(v2)) {
        v2parts = [...v2];
        if (!v2parts.every(p => typeof p === "number" && p !== NaN)) {
            throw new Error("v2 part array does not only contains numbers.");
        }
    } else {
        throw new Error("v2 is of an unexpected type: " + typeof v2);
    }

    while (v1parts.length < v2parts.length) {
        v1parts.push("0");
    }
    while (v2parts.length < v1parts.length) {
        v2parts.push("0");
    }

    for (let i = 0; i < v1parts.length; ++i) {
        if (v2parts.length == i) {
            return 1;
        }
        if (v1parts[i] == v2parts[i]) {
            continue;
        } else if (v1parts[i] > v2parts[i]) {
            return 1;
        } else {
            return -1;
        }
    }
    return 0;
};

function filterPluginsByMinEDVersion(plugins, EDVersion) {
    const filteredPlugins = plugins.filter(plugin => {
        if (plugin.minEDVersion) {
            return versionCompare(plugin.minEDVersion, EDVersion) <= 0;
        }
        return true;
    });

    return filteredPlugins;
}

function extractVersionNumber(elem) {
    const versionStr = elem.innerHTML;
    const regex = /v(\d+\.\d+\.\d+)/;
    const matches = regex.exec(versionStr);
    if (matches && matches.length > 1) {
        return matches[1];
    } else {
        return null;
    }
}
const EasyDiffusionVersion = extractVersionNumber(document.querySelector('#top-nav > #logo'))

/* PLUGIN MANAGEMENT */
let plugins
let localPlugins
let initPluginsInProgress = false

async function initPlugins(refreshPlugins = false) {
    let pluginsLoaded
    if (initPluginsInProgress === true) {
        return
    }
    initPluginsInProgress = true

    const res = await fetch('/get/ui_plugins')
    if (!res.ok) {
        console.error(`Error HTTP${res.status} while loading plugins list. - ${res.statusText}`)
    }
    else {
        localPlugins = await res.json()
    }

    if (refreshPlugins === false) {
        // load the notifications
        pluginNotifications = await getStorageData('notifications')            
        if (typeof pluginNotifications === "string") {
            try {
                pluginNotifications = JSON.parse(pluginNotifications)
            } catch (e) {
                console.error("Failed to parse pluginNotifications", e);
                pluginNotifications = {};
                pluginNotifications.entries = [];
            }
        }
        if (pluginNotifications !== undefined) {
            if (pluginNotifications.entries && pluginNotifications.entries.length > 0 && pluginNotifications.entries[0].date && pluginNotifications.lastUpdated <= pluginNotifications.entries[0].date) {
                notificationPill.style.display = "block";
            }
        } else {
            pluginNotifications = {};
            pluginNotifications.entries = [];
        }

        // try and load plugins from local cache
        plugins = await getStorageData('plugins')
        if (plugins !== undefined) {
            plugins = JSON.parse(plugins)

            // remove duplicate entries if any (should not happen)
            plugins = deduplicatePluginsById(plugins)

            // remove plugins that don't meet the min ED version requirement
            plugins = filterPluginsByMinEDVersion(plugins, EasyDiffusionVersion)

            // remove from plugins the entries that don't have mandatory fields (id, name, url)
            plugins = plugins.filter((plugin) => { return plugin.id !== '' && plugin.name !== '' && plugin.url !== ''; });

            // populate the table
            initPluginTable(plugins)
            await loadPlugins(plugins)
            pluginsLoaded = true
        }
        else {
            plugins = []
            pluginsLoaded = false
        }
    }

    // update plugins asynchronously (updated versions will be available next time the UI is loaded)
    if (refreshAllowed()) {
        let pluginCatalog = await getDocument(PLUGIN_CATALOG)
        if (pluginCatalog !== null) {
            let parseError = false;
            try {
                pluginCatalog = JSON.parse(pluginCatalog);
                console.log('Plugin catalog successfully downloaded');
            } catch (error) {
                console.error('Error parsing plugin catalog:', error);
                parseError = true;
            }

            if (!parseError) {
                await downloadPlugins(pluginCatalog, plugins, refreshPlugins)

                // update compatIssueIds
                updateCompatIssueIds()

                // remove plugins that don't meet the min ED version requirement
                plugins = filterPluginsByMinEDVersion(plugins, EasyDiffusionVersion)

                // remove from plugins the entries that don't have mandatory fields (id, name, url)
                plugins = plugins.filter((plugin) => { return plugin.id !== '' && plugin.name !== '' && plugin.url !== ''; });

                // remove from plugins the entries that no longer exist in the catalog
                plugins = plugins.filter((plugin) => { return pluginCatalog.some((p) => p.id === plugin.id) });

                if (pluginCatalog.length > plugins.length) {
                    const newPlugins = pluginCatalog.filter((plugin) => {
                        return !plugins.some((p) => p.id === plugin.id);
                    });

                    newPlugins.forEach((plugin, index) => {
                        setTimeout(() => {
                            showPluginToast(`New plugin "${plugin.name}" is available.`);
                        }, (index + 1) * 1000);
                    });
                }

                let pluginsJson;
                try {
                    pluginsJson = JSON.stringify(plugins); // attempt to parse plugins to JSON
                } catch (error) {
                    console.error('Error converting plugins to JSON:', error);
                }

                if (pluginsJson) { // only store the data if pluginsJson is not null or undefined
                    await setStorageData('plugins', pluginsJson)
                }

                // refresh the display of the plugins table
                initPluginTable(plugins)
                if (pluginsLoaded && pluginsLoaded === false) {
                    loadPlugins(plugins)
                }
            }
        }
    }
    else {
        if (refreshPlugins) {
            showPluginToast('Plugins have been refreshed recently, refresh will be available in ' + convertSeconds(getTimeUntilNextRefresh()), 5000, true, false)
        }
    }
    initPluginsInProgress = false
}

function updateMetaTagPlugins(plugin) {
    // Update the meta tag with the list of loaded plugins
    let metaTag = document.querySelector('meta[name="plugins"]');
    if (metaTag === null) {
        metaTag = document.createElement('meta');
        metaTag.name = 'plugins';
        document.head.appendChild(metaTag);
    }
    const pluginArray = [...(metaTag.content ? metaTag.content.split(',') : []), plugin.id];
    metaTag.content = pluginArray.join(',');
}

function updateCompatIssueIds() {
    // Loop through each plugin
    plugins.forEach(plugin => {
        // Check if the plugin has `compatIssueIds` property
        if (plugin.compatIssueIds !== undefined) {
            // Loop through each of the `compatIssueIds`
            plugin.compatIssueIds.forEach(issueId => {
                // Find the plugin with the corresponding `issueId`
                const issuePlugin = plugins.find(p => p.id === issueId);
                // If the corresponding plugin is found, initialize its `compatIssueIds` property with an empty array if it's undefined
                if (issuePlugin) {
                    if (issuePlugin.compatIssueIds === undefined) {
                        issuePlugin.compatIssueIds = [];
                    }
                    // If the current plugin's ID is not already in the `compatIssueIds` array, add it
                    if (!issuePlugin.compatIssueIds.includes(plugin.id)) {
                        issuePlugin.compatIssueIds.push(plugin.id);
                    }
                }
            });
        } else {
            // If the plugin doesn't have `compatIssueIds` property, initialize it with an empty array
            plugin.compatIssueIds = [];
        }
    });
}

function deduplicatePluginsById(plugins) {
    const seenIds = new Set();
    const deduplicatedPlugins = [];

    for (const plugin of plugins) {
        if (!seenIds.has(plugin.id)) {
            seenIds.add(plugin.id);
            deduplicatedPlugins.push(plugin);
        } else {
            // favor dupes that have enabled == true
            const index = deduplicatedPlugins.findIndex(p => p.id === plugin.id);
            if (index >= 0) {
                if (plugin.enabled) {
                    deduplicatedPlugins[index] = plugin;
                }
            }
        }
    }

    return deduplicatedPlugins;
}

async function loadPlugins(plugins) {
    for (let i = 0; i < plugins.length; i++) {
        const plugin = plugins[i];
        if (plugin.enabled === true && plugin.localInstallOnly !== true) {
            const localPluginFound = checkFileNameInArray(localPlugins, plugin.url);
            if (!localPluginFound) {
                try {
                    // Indirect eval to work around sloppy plugin implementations
                    const indirectEval = { eval };
                    console.log("Loading plugin " + plugin.name);
                    indirectEval.eval(plugin.code);
                    console.log("Plugin " + plugin.name + " loaded");
                    await updateMetaTagPlugins(plugin); // add plugin to the meta tag
                } catch (err) {
                    showPluginToast("Error loading plugin " + plugin.name + " (" + err.message + ")", null, true);
                    console.error("Error loading plugin " + plugin.name + ": " + err.message);
                }
            } else {
                console.log("Skipping plugin " + plugin.name + " (installed locally)");
            }
        }
    }
}

async function getFileHash(url) {
    const regex = /^https:\/\/raw\.githubusercontent\.com\/(?<owner>[^/]+)\/(?<repo>[^/]+)\/(?<branch>[^/]+)\/(?<filePath>.+)$/;
    const match = url.match(regex);
    if (!match) {
        console.error('Invalid GitHub repository URL.');
        return Promise.resolve(null);
    }
    const owner = match.groups.owner;
    const repo = match.groups.repo;
    const branch = match.groups.branch;
    const filePath = match.groups.filePath;
    const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${filePath}?ref=${branch}`;

    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}, url: ${apiUrl}`);
        }
        const data = await response.json();
        return data.sha;
    } catch (error) {
        console.error('Error fetching data from url:', apiUrl, 'Error:', error);
        return null;
    }
}

// only allow two refresh per hour
function getTimeUntilNextRefresh() {
    const lastRuns = JSON.parse(localStorage.getItem('lastRuns') || '[]');
    const currentTime = new Date().getTime();
    const numRunsLast60Min = lastRuns.filter(run => currentTime - run <= 60 * 60 * 1000).length;

    if (numRunsLast60Min >= 2) {
        return 3600 - Math.round((currentTime - lastRuns[lastRuns.length - 1]) / 1000);
    }

    return 0;
}

function refreshAllowed() {
    const timeUntilNextRefresh = getTimeUntilNextRefresh();

    if (timeUntilNextRefresh > 0) {
        console.log(`Next refresh available in ${timeUntilNextRefresh} seconds`);
        return false;
    }

    const lastRuns = JSON.parse(localStorage.getItem('lastRuns') || '[]');
    const currentTime = new Date().getTime();
    lastRuns.push(currentTime);
    localStorage.setItem('lastRuns', JSON.stringify(lastRuns));
    return true;
}

async function downloadPlugins(pluginCatalog, plugins, refreshPlugins) {
    // download the plugins as needed
    for (const plugin of pluginCatalog) {
        //console.log(plugin.id, plugin.url)
        const existingPlugin = plugins.find(p => p.id === plugin.id);
        // get the file hash in the GitHub repo
        let sha
        if (isGitHub(plugin.url) && existingPlugin?.enabled === true) {
            sha = await getFileHash(plugin.url)
        }
        if (plugin.localInstallOnly !== true && isGitHub(plugin.url) && existingPlugin?.enabled === true && (refreshPlugins || (existingPlugin.sha !== undefined && existingPlugin.sha !== null && existingPlugin.sha !== sha) || existingPlugin?.code === undefined)) {
            const pluginSource = await getDocument(plugin.url);
            if (pluginSource !== null && pluginSource !== existingPlugin.code) {
                console.log(`Plugin ${plugin.name} updated`);
                showPluginToast("Plugin " + plugin.name + " updated", 5000);
                // Update the corresponding plugin
                const updatedPlugin = {
                    ...existingPlugin,
                    icon: plugin.icon ? plugin.icon : "fa-puzzle-piece",
                    id: plugin.id,
                    name: plugin.name,
                    description: plugin.description,
                    url: plugin.url,
                    localInstallOnly: Boolean(plugin.localInstallOnly),
                    version: plugin.version,
                    code: pluginSource,
                    author: plugin.author,
                    sha: sha,
                    compatIssueIds: plugin.compatIssueIds
                };
                // Replace the old plugin in the plugins array
                const pluginIndex = plugins.indexOf(existingPlugin);
                if (pluginIndex >= 0) {
                    plugins.splice(pluginIndex, 1, updatedPlugin);
                } else {
                    plugins.push(updatedPlugin);
                }
            }
        }
        else if (existingPlugin !== undefined) {
            // Update the corresponding plugin's metadata
            const updatedPlugin = {
                ...existingPlugin,
                icon: plugin.icon ? plugin.icon : "fa-puzzle-piece",
                id: plugin.id,
                name: plugin.name,
                description: plugin.description,
                url: plugin.url,
                localInstallOnly: Boolean(plugin.localInstallOnly),
                version: plugin.version,
                author: plugin.author,
                compatIssueIds: plugin.compatIssueIds
            };
            // Replace the old plugin in the plugins array
            const pluginIndex = plugins.indexOf(existingPlugin);
            plugins.splice(pluginIndex, 1, updatedPlugin);
        }
        else {
            plugins.push(plugin);
        }
    }
}

async function getDocument(url) {
    try {
        let response = await fetch(url === PLUGIN_CATALOG ? PLUGIN_CATALOG : url, { cache: "no-cache" });
        if (!response.ok) {
            throw new Error(`Response error: ${response.status} ${response.statusText}`);
        }
        let document = await response.text();
        return document;
    } catch (error) {
        showPluginToast("Couldn't fetch " + extractFilename(url) + " (" + error + ")", null, true);
        console.error(error);
        return null;
    }
}

/* MODAL DIALOG */
const pluginDialogDialog = document.createElement("div");
pluginDialogDialog.id = "pluginDialog-input-dialog";
pluginDialogDialog.style.display = "none";

pluginDialogDialog.innerHTML = `
    <div class="pluginDialog-dialog-overlay"></div>
    <div class="pluginDialog-dialog-box">
        <div class="pluginDialog-dialog-header">
            <h2>Paste the plugin's code here</h2>
            <button class="pluginDialog-dialog-close-button">&times;</button>
        </div>
        <div class="pluginDialog-dialog-content">
            <textarea id="pluginDialog-input-textarea" spellcheck="false" autocomplete="off"></textarea>
        </div>
        <div class="pluginDialog-dialog-buttons">
            <button id="pluginDialog-input-ok">OK</button>
            <button id="pluginDialog-input-cancel">Cancel</button>
        </div>
    </div>
`;

document.body.appendChild(pluginDialogDialog);

const pluginDialogOverlay = document.querySelector(".pluginDialog-dialog-overlay");
const pluginDialogOkButton = document.getElementById("pluginDialog-input-ok");
const pluginDialogCancelButton = document.getElementById("pluginDialog-input-cancel");
const pluginDialogCloseButton = document.querySelector(".pluginDialog-dialog-close-button");
const pluginDialogTextarea = document.getElementById("pluginDialog-input-textarea");
let callbackOK
let callbackCancel

function pluginDialogOpenDialog(inputOK, inputCancel) {
    pluginDialogDialog.style.display = "block";
    callbackOK = inputOK
    callbackCancel = inputCancel
}

function pluginDialogCloseDialog() {
    pluginDialogDialog.style.display = "none";
}

function pluginDialogHandleOkClick() {
    const userInput = pluginDialogTextarea.value;
    // Do something with the user input
    callbackOK()
    pluginDialogCloseDialog();
}

function pluginDialogHandleCancelClick() {
    callbackCancel()
    pluginDialogCloseDialog();
}

function pluginDialogHandleOverlayClick(event) {
    if (event.target === pluginDialogOverlay) {
        pluginDialogCloseDialog();
    }
}

function pluginDialogHandleKeyDown(event) {
    if ((event.key === "Enter" && event.ctrlKey) || event.key === "Escape") {
        event.preventDefault();
        if (event.key === "Enter" && event.ctrlKey) {
            pluginDialogHandleOkClick();
        } else {
            pluginDialogCloseDialog();
        }
    }
}

pluginDialogTextarea.addEventListener("keydown", pluginDialogHandleKeyDown);
pluginDialogOkButton.addEventListener("click", pluginDialogHandleOkClick);
pluginDialogCancelButton.addEventListener("click", pluginDialogHandleCancelClick);
pluginDialogCloseButton.addEventListener("click", pluginDialogCloseDialog);
pluginDialogOverlay.addEventListener("click", pluginDialogHandleOverlayClick);