$Config

Greasy Fork is available in English.

$Config

Allows users to configure scripts

Dit script moet niet direct worden geïnstalleerd - het is een bibliotheek voor andere scripts om op te nemen met de meta-richtlijn // @require https://update.greasyfork.org/scripts/446506/1683593/%24Config.js

Stel een vraag, plaats een beoordeling of rapporteer dit script.

Maker: ctl2
Versie: 0.0.1.20251025124509
Gemaakt op: 15-06-2022
Bijgewerkt op: 25-10-2025
Grootte: 338 KB
Licentie: N.v.t.

Example instance hosted here. Source code available here.

Usage

// @require     https://update.greasyfork.org/scripts/446506/1586074/%24Config.js
// @grant       GM.setValue
// @grant       GM.getValue
// @grant       GM.deleteValue

// Define a config

const $config = new $Config(
    'STORAGE_KEY',
    {
        get: (_, configs) => Object.assign(...configs),
        children: [
            {label: 'a', value: 0, get: ({value: a}) => ({a})},
            {label: 'b', value: 1, get: ({value: b}) => ({b})},
            {label: 'c', value: 2, get: ({value: c}) => ({c})}
        ]
    },
);

// Await config load & handle problems

try {
    await $config.ready;
} catch (error) {
    if (!$config.reset) {
        // There's a problem with the arguments passed to the $Config constructor
        throw error;
    }

    // There's a problem with the user's data (could be from manual editing or a script update)
    if (!window.confirm(`${error.message}\n\nWould you like to erase your data?`)) {
        return;
    }

    $config.reset();
}

// Apply the user's config

function useConfig() {
    const {a, b, c} = $config.get();

    // ...
}

useConfig();

// Set up config editing

const button = document.createElement('button');

button.addEventListener('click', async () => {
    await $config.edit();

    useConfig();
});

Constructor arguments

[string] An identifier used to store data
[Root] A schema for user config data
{
defaultStyle: [DefaultStyle] Instructions for customizing the UI's appearance,
outerStyle: [object] CSS to apply to the UI's root element,
patches: [array<function>] Patches to update old config objects,
}

The third argument and each of its properties are optional

Examples