Logging Handler & UI Overlay

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

Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/588114/1882370/Logging%20Handler%20%20UI%20Overlay.js

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

Autor
SassyRhombus
Versão
1.0.0
Criado
22/07/2026
Atualizado
22/07/2026
Tamanho
11,7 KB
Licença
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