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

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください

作者: SassyRhombus
バージョン: 1.0.0
作成日: 2026/07/22
更新日: 2026/07/22
大きさ: 11.7KB
ライセンス: 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