src/config.html

<!doctype html>
<html>
    <head>
        <base target="_top" />
    </head>

    <body>
        <form id="configForm">
            <div id="configFields"></div>
            <input type="button" value="Save" onclick="saveConfig()" />
        </form>

        <script type="text/javascript">
            function renderForm({ configSchema, configSettings }) {
                const config = JSON.parse(configSettings || "{}");
                const form = document.getElementById("configFields");
                configSchema.forEach((item) => {
                    const label = createLabel(item);
                    const input = createInput(item, config);
                    form.appendChild(label);
                    form.appendChild(input);
                    form.appendChild(document.createElement("br"));
                });
            }

            async function saveConfig() {
                const config = {};
                const { elements } = document.getElementById("configForm");
                for (let element of elements) {
                    switch (element.type) {
                        case "checkbox":
                            config[element.name] = Boolean(element.checked);
                            break;
                        case "text":
                            config[element.name] = String(element.value);
                            break;
                        case "number":
                            config[element.name] = Number(element.value);
                            break;
                    }
                }
                await google.script.run.saveConfig(JSON.stringify(config));
                google.script.host.close();
            }

            async function loadConfig() {
                await google.script.run
                    .withSuccessHandler(renderForm)
                    .getConfig();
            }

            loadConfig();

            function createLabel(item) {
                const label = document.createElement("label");
                label.setAttribute("for", item.key);
                label.textContent = item.label + ":";
                return label;
            }

            function createInput(item, config) {
                const input = document.createElement("input");
                input.id = item.key;
                input.name = item.key;
                switch (item.type) {
                    case "boolean":
                        input.type = "checkbox";
                        input.checked = config[item.key] || false;
                        return input;
                    case "string":
                        input.type = "text";
                        input.value = config[item.key] || "";
                        return input;
                    case "number":
                        input.type = "number";
                        input.value = config[item.key] || "";
                        return input;
                    default:
                        throw new Error("Unsupported input type: " + item.type);
                }
            }
        </script>
    </body>
</html>