popup.html

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="popup.css"> 
        <script src='popup.js'></script>
    </head>
    <body>
        <div class="header">TikTok Download Buttons</div>

        <div class="content">
            <div class="checkbox-container">
                <label>
                    <input type="checkbox" id="download-fallback-tab-focus"> <span>Focus on new tabs</span>
                </label>
                <span>Decides if newly opened tabs (through the fallback) should be auto-focused on or not.</span>
            </div>

            <div class="category-divide">Subfolder</div>

            <div class="textbox-container">
                <span>Subfolder to download videos to. Leaving it empty will download videos to your default directory.</span>
                <input type="text" spellcheck="false" id="download-subfolder-path" placeholder="Subfolder path ...">
            </div>

            <div class="category-divide">Naming</div>

            <div class="textbox-container">
                <span>Naming template to use when saving videos. This will only have an effect when using the API. See <a class="link" target="_blank" href="https://github.com/sixem/tiktok-download-buttons/blob/main/TEMPLATE.md">templating</a>.</a></span>
                <input type="text" spellcheck="false" id="download-naming-template" placeholder="{uploader} - {desc}">
            </div>

            <div class="category-divide">Tips</div>

            <div style="font-size: 105%;">Uncheck "<i>Ask where to save each file before downloading</i>"
                in <span style="text-decoration: underline;">chrome://settings/downloads</span>
                for better download support.</div>
        </div>

        <button id="settings-save">Save</button>

        <div id="version"></div><a href="#" id="website" target="_blank">Website</a>
    </body>
</html>