Simple Tampermonkey script config library
目前為
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/470224/1448594/Tampermonkey%20Config.js
GM_configSimple config lib for Tampermonkey scripts. (Greasy Fork镜像) (GitHub)
prop.input)prop.processor)prop.formatter)This library needs the following permissions to work:
// @grant GM_setValue // Save your config
// @grant GM_getValue // Get your config
// @grant GM_deleteValue // Automatically delete your config (Optional. If granted, this lib will delete user config that is equal to default value)
// @grant GM_registerMenuCommand // Register menu
// @grant GM_unregisterMenuCommand // Update menu
// @grant GM_addValueChangeListener // Listen for config changes
Delete the comment if you copied and pasted the code, or there might be errors. You may want to delete @grant none (if present). If you used window object in your script, try @grant unsafeWindow and then let window = unsafeWindow.
console.log(GM_config.version); // *Print version*
The first step is to define your config description, which is a dictionary and each of its key (apart from possible $default) represents the id of a config item.
$defaultBy using $default, you can easily create a lot of config items of the same type. If $default is not specified in config description, following values will be used to fill unspecified fields in a config item:
{
input: "prompt",
processor: "same",
formatter: "normal"
}
If you'd like to modify the default value, you may provide $default in your config description to override the above default values. e.g.:
const config_desc = {
"$default": {
value: true,
input: "current",
processor: "not",
formatter: "boolean"
},
switch_true: {
name: "Switch true"
},
switch_false: {
name: "Switch false",
value: false
}
}
prop.nameThe display name of the config item. Expected type: string.
prop.valueThe default value of the config item, can be of any type. Note that you should consider its validity, because this lib will not check default value's validity for you.
prop.input
(prop, orig) => input
How to get user input. Expected a string (built-in input method) or a function (invoked when user clicks the menu item). It accepts the name of config item and returns user input. If not specified by both prop.input and $default.input, prompt will be used, i.e. ask for user input using prompt(). Note that "user input value" does not necessarily have to be actually input by user, it can be provided by script. (e.g. built-in input method current).
Built-in input methods:
prompt: Ask for user input using prompt() (default value)current: Current value will be used as user input (Usually used with prop.processor=not so as to create a switch, or with custom processor to create a generator)prop.processor
(input) => stored
How to process user input. Expected a string (built-in processor) or a function. It accepts user input and returns value to be stored. Throw error if user input is invalid. If not specified by both prop.formatter and $default.formatter, same will be used, i.e. return user input directly. A common use case is to convert user input to integers or floats.
Built-in processors:
same: Return user input directlynot: Invert boolean value (Usually used with prop.input=current so as to create a switch)int: Convert to integerint_range-min-max: Convert to integer in range [min, max]
-, because there might be errors.<min> and <max> can be any integer. Not provided inferred as no limit on that side.float: Convert to floatfloat_range-min-max: Convert to float in range [min, max]
-, because there might be errors.<min> and <max> can be any float. Not provided inferred as no limit on that side.prop.formatter
(name, value) => string
How to display the menu item. Expected a string (built-in formatter) or a function. It accepts the name of config item and its current value, and returns the text to be displayed on the menu. If not specified by both prop.formatter and $default.formatter, normal will be used.
Built-in formatters:
normal: Display in the format of name: valueboolean: Display method aimed for boolean values. true will be displayed as name: ✔, false will be displayed as name: ✘.const config_desc = {
// Switch
enabled: {
name: "Enabled",
value: true,
input: "current",
processor: "not",
formatter: "boolean"
},
// Integer
value: {
name: "Value",
value: -10,
processor: "int"
// Omitted default values: input="prompt", formatter="normal"
},
// Natural number
price: {
name: "Price",
value: 114,
processor: "int_range-1-",
},
// Float and positive number is basically the same as above. Use `float` and `float_range-0-`
// String
name: {
name: "Name",
value: "Crazy Thur."
// Omitted default values: input="prompt", processor="same", formatter="normal"
},
// Just invokes a function when clicked
action: {
name: "Some action",
value: "",
input: () => {
// Do something
return "";
},
formatter: (name) => name
},
}
Supports prop.accessKey, prop.autoClose, prop.title (Require TM >=4.20.0). See Tampermonkey docs for details.
After defining your config description, you can register the menu item by constructing a GM_config instance. The constructor accepts the following two arguments:
config_desc: Your config descriptionoptions: Options (optional)
immediate: Whether to register the menu items immediately.
true, the menu item will be registered immediately. (default value)false, the user need to click "Show configuration" to register it.debug: Whether to enable debug mode. If set to true, debug information will be printed to console. Default value is false. (Can be modified by config.debug at any time)const config = new GM_config(config_desc, { immediate: false }); // *Register menu*
console.log(config.get("price")); // *You may now start using the config 🎉*
After registering the menu, you can get/set config by accessing the GM_config instance. e.g:
console.log(config.get("price")); // *Get config*
config.set("price", 100); // *Modify config* (The menu will be updated automatically)
Alternatively, operate on config.proxy to get/set config. e.g:
console.log(config.proxy.price); // *Get config*
config.proxy.price = 100; // *Modify config* (The menu will be updated automatically)
You can listen for config get/set by calling config.addEventListener(type, listener, options?):
config.addEventListener("set", (e) => {
console.log(e.detail); // *Config is modified*
});
config.addEventListener("get", (e) => {
console.log(e.detail); // *Config is accessed*
});
It should be noted that get event is only triggered when the config is accessed by the script in the current window, while set event is triggered when the config is modified by the script in any window. This feature of set makes multi-tab synchronization possible.
As you might have expected, you can remove the listener by calling config.removeEventListener(type, listener, options?). These two methods are identical to EventTarget.addEventListener and EventTarget.removeEventListener.
e.detail is a dictionary with the following properties:
prop: The id of the config item accessed/modified.before: The value of the config item before the operation.after: The value of the config item after the operation.remote: Indicating whether this modification is caused by the script instance in another tab. Always false for get event.This feature is often used to update your script dynamically when config is modified. In this lib, auto-updating menu is implemented by this feature.
prop.name and current value to prop.input to get user inputprop.processor to get processed valueInstall below code as a script, and see how does it work:
// ==UserScript==
// @name Test Config
// @namespace http://tampermonkey.net/
// @version 0.4
// @description This is an example to demostrate the usage of gf.qytechs.cn/scripts/470224.
// @author PRO
// @match https://gf.qytechs.cn/*
// @icon https://gf.qytechs.cn/vite/assets/blacklogo16-bc64b9f7.png
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @require https://update.gf.qytechs.cn/scripts/470224/1303666/Tampermonkey%20Config.js
// @license gpl-3.0
// ==/UserScript==
(function() {
'use strict';
const config_desc = { // Config description
password: {
name: "Password", // Display name
value: "tmp", // Default value
input: "prompt", // How to get user input (Invoked when user clicks the menu command)
// Built-in values:
// "current": Current value will be passed to `processor` as user input (generator-like)
// "prompt": Use `prompt` to get user input (default value)
// <function>: Custom function to get user input, should return certain value to be processed by `processor`
// (prop, orig) => input
processor: (v) => {
if (v.length < 3) throw "Too short!";
return v;
}
},
enabled: {
name: "Enabled",
value: true,
input: "current",
processor: "not", // Process user inputs, throw error if invalid
// Built-in processors:
// "same": Return user input directly (default value)
// "not": Invert boolean value
// "int": Convert to integer
// "int_range-min-max": Convert to integer in range [min, max], raise error if invalid ("" for no limit)
// "float": Convert to float
// "float_range-min-max": Convert to float in range [min, max], raise error if invalid ("" for no limit)
// <function>: Custom function to process value
// (input) => stored
formatter: "boolean", // Format value to be displayed in menu command
// Built-in formatters:
// "normal": `${name}: ${value}`
// "boolean": `${name}: ${value ? "✔" : "✘"}`
// <function>: Custom function to format value
// (name, value) => string
},
val: {
name: "Float",
value: 11.4,
processor: "float_range-0-" // Convert to float in range [0, +∞)
}
}
const config = new GM_config(config_desc, { immediate: false, debug: true }); // Register menu commands
config.addEventListener("set", (e) => { // Listen to config changes
console.log(e.detail);
});
window.setTimeout(() => { // Change config values, and menu commands will be updated automatically
config.proxy.val += 1; // Remember to validate the value before setting it
}, 5000);
})();
Alternatively, you can try out this lib in action with Greasy Fork镜像 Enhance.
This project is in early development, and the API may change in the future. If you have any suggestions or find any bugs, please feel free to open an issue or pull request.
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址