⚠️ Remember to grant the following directives:
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addElement
// --- Implementation Example ---
// ==UserScript==
// @name New Userscript
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addElement
// @noframes
// ==/UserScript==
(function () {
"use strict";
// --- Implementation Example ---
const languages = {
de: { name: "German", flag: "DE" },
en: { name: "English", flag: "GB" },
fr: { name: "French", flag: "FR" },
};
function getFlag(code) {
if (!code || code === "UN") return "🌐";
return code
.toUpperCase()
.split("")
.map((char) => String.fromCodePoint(0x1f1e6 + char.charCodeAt(0) - 65))
.join("");
}
const languageOptions = Object.entries(languages).map(([code, lang]) => ({
value: code,
label: `${getFlag(lang.flag)} ${lang.name}`,
}));
const config = new ScriptConfig({
title: "Script settings",
storageKey: "translateOptions",
theme: {
accent: "#1d9bf0",
hover: "#1a8cd8",
},
fields: {
targetLanguage: {
type: "select",
label: "Target language",
default: "en",
options: languageOptions,
searchable: true,
},
autoTranslate: {
type: "boolean",
label: "Autotranslate",
default: true,
},
ignoredLanguages: {
type: "multiselect",
label: "Ignored languages",
default: [],
options: languageOptions,
},
translationService: {
type: "select",
label: "Translation service",
default: "google",
searchable: true,
options: [
{ value: "google", label: "Google" },
{ value: "deepl", label: "DeepL" },
{ value: "deeplFree", label: "DeepL Free" },
],
},
translationDelay: {
type: "range",
label: "Translation delay",
default: 50,
min: 0,
max: 100,
step: 5,
},
},
onSave: (newSettings) => {
console.log("Settings updated:", newSettings);
},
});
config.open();
})();
