☰

Logging Handler & UI Overlay

Logger that optionally mirror to a on-page UI overlay shared by every page match-common userscript

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.greasyfork.org/scripts/588114/1882370/Logging%20Handler%20%20UI%20Overlay.js

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
SassyRhombus
版本
1.0.0
建立日期
2026-07-22
更新日期
2026-07-22
尺寸
11.7 KB
授權條款
BSD-0

Overview

One logging call, two sinks: the browser console and a translucent, click-through log panel pinned to the top-right of the page.

  • exposed as a global (LoggingUI.create) for @require
  • the panel is a page-level singleton, keyed off its DOM id. Userscripts run in separate sandboxes and cannot see each other's variables, but they do share the document -- so the first instance to need the panel builds it and every later instance adopts the node that is already there. n scripts on a page therefore produce one panel, not n stacked copies.
  • every line carries a timestamp and the caller's short tag; the tag is coloured from a hash of itself, so each participating script is distinguishable at a glance without any central registry of colours
  • severities are debug/info/warn/error, coloured white/blue/yellow/red, and map onto console.debug/info/warn/error
  • the panel body is dimmed until hovered, so it never competes with the page

Toggle scoping:

  • the panel is shared page state. Flipping it from any instance shows/hides the one panel for all of them, and stamps the new state onto the panel node; other instances observe that stamp and follow, persisting it as their own preference so the choice survives a reload no matter which script's menu command was used.
  • the console mirror is per-instance: each script decides independently whether it also talks to devtools.

Persistence is best-effort. GM_getValue and GM_setValue are used when the calling script granted them; without the grants the toggles simply live for the lifetime of the page.

Usage

// @require https://update.greasyfork.org/...
// @grant   GM_getValue
// @grant   GM_setValue
// @grant   GM_registerMenuCommand

const logger = LoggingUI.create({
    name: '$NAME',             // console prefix
    tag: 'gcr',                // panel prefix
    console: true,             // default console mirror
    panel: true,               // default panel visibility
    panelSink: !IS_PROFILE,    // this instance may write
});

logger.registerMenuCommands();  // optional: two GM menu toggles

logger.info('feed seeded with %d comments', n);
logger.warn('poll failed:', err);

API

method(s) note
logger.debug info
logger.log(...args) alias of info
logger.consoleEnabled getter/setter (boolean)
logger.panelEnabled getter/setter (boolean, page-wide)
logger.toggleConsole() / togglePanel() flip and persist, returns new state
logger.registerMenuCommands(opts) register the two GM menu toggles
logger.clear() empty the shared panel
logger.element the panel node, or null