☰

Logging Handler & UI Overlay

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

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.org/scripts/588114/1882370/Logging%20Handler%20%20UI%20Overlay.js

如何安装

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴、Greasemonkey 油猴子 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 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