diff --git a/src/ext/UWServer.ts b/src/ext/UWServer.ts
index 582976d..98aca12 100644
--- a/src/ext/UWServer.ts
+++ b/src/ext/UWServer.ts
@@ -6,7 +6,7 @@ import Settings from './lib/Settings';
 import Logger, { baseLoggingOptions } from './lib/Logger';
 import { sleep } from '../common/js/utils';
 import EventBus, { EventBusCommand } from './lib/EventBus';
-import { ComponentLogger } from './lib/logging/ComponentLogger.js';
+import { ComponentLogger } from './lib/logging/ComponentLogger';
 
 
 const BASE_LOGGING_STYLES = {
diff --git a/src/ext/lib/aard/Aard.ts b/src/ext/lib/aard/Aard.ts
index 4833b8b..541ded1 100644
--- a/src/ext/lib/aard/Aard.ts
+++ b/src/ext/lib/aard/Aard.ts
@@ -19,6 +19,7 @@ import { AardDetectionSample, generateSampleArray, resetSamples } from './interf
 import { AardStatus, initAardStatus } from './interfaces/aard-status.interface';
 import { AardTestResults, initAardTestResults, resetAardTestResults, resetGuardLine } from './interfaces/aard-test-results.interface';
 import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 
 /**
@@ -221,7 +222,7 @@ import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface';
  */
 export class Aard {
   //#region configuration parameters
-  private logger: Logger;
+  private logger: ComponentLogger;
   private videoData: VideoData;
   private settings: Settings;
   private siteSettings: SiteSettings;
@@ -292,7 +293,7 @@ export class Aard {
 
   //#region lifecycle
   constructor(videoData: VideoData){
-    this.logger = videoData.logger;
+    this.logger = new ComponentLogger(videoData.logAggregator, 'Aard', {});
     this.videoData = videoData;
     this.video = videoData.video;
     this.settings = videoData.settings;
@@ -304,7 +305,7 @@ export class Aard {
     this.arid = (Math.random()*100).toFixed();
 
     // we can tick manually, for debugging
-    this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`);
+    this.logger.log('ctor', `creating new ArDetector. arid: ${this.arid}`);
 
     this.timer = new AardTimer();
     this.init();
@@ -372,14 +373,14 @@ export class Aard {
         if (this.settings.active.arDetect.aardType !== 'webgl') {
           return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
         }
-        console.error('[ultrawidify|Aard::createCanvas] could not create webgl canvas:', e);
+        this.logger.error('createCanvas', 'could not create webgl canvas:', e);
         this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {webglError: true}});
         throw e;
       }
     } else if (this.settings.active.arDetect.aardType === 'legacy') {
       return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
     } else {
-      console.error('[ultrawidify|Aard::createCanvas] invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType);
+      this.logger.error('createCanvas', 'invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType);
       this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {invalidSettings: true}});
       throw 'AARD_INVALID_SETTINGS';
     }
@@ -725,7 +726,7 @@ export class Aard {
         return VideoPlaybackState.Playing;
       }
     } catch (e) {
-      this.logger.log('warn', 'debug', `[ArDetect::getVideoPlaybackState]  There was an error while determining video playback state.`, e);
+      this.logger.warn('getVideoPlaybackState]', `There was an error while determining video playback state.`, e);
       return VideoPlaybackState.Error;
     }
   }
diff --git a/src/ext/lib/comms/CommsServer.ts b/src/ext/lib/comms/CommsServer.ts
index a4573ae..9fb25a7 100644
--- a/src/ext/lib/comms/CommsServer.ts
+++ b/src/ext/lib/comms/CommsServer.ts
@@ -1,3 +1,4 @@
+import { ComponentLogger } from './../logging/ComponentLogger';
 import { EventBusContext } from './../EventBus';
 import Debug from '../../conf/Debug';
 import BrowserDetect from '../../conf/BrowserDetect';
@@ -8,9 +9,13 @@ import EventBus from '../EventBus';
 import { CommsOrigin } from './CommsClient';
 
 
+const BASE_LOGGING_STYLES = {
+  log: "background-color: #11D; color: #aad",
+};
+
 class CommsServer {
   server: any;
-  logger: Logger;
+  logger: ComponentLogger;
   settings: Settings;
   eventBus: EventBus;
 
@@ -61,7 +66,7 @@ class CommsServer {
   //#region lifecycle
   constructor(server) {
     this.server = server;
-    this.logger = server.logger;
+    this.logger = new ComponentLogger(server.logAggregator, 'CommsServer', {styles: BASE_LOGGING_STYLES});
     this.settings = server.settings;
     this.eventBus = server.eventBus;
 
@@ -106,6 +111,7 @@ class CommsServer {
   //#endregion
 
   sendMessage(message, context?) {
+    this.logger.debug('sendMessage', `preparing to send message ${message.command ?? ''} ...`, {message, context});
     // stop messages from returning where they came from, and prevent
     // cross-pollination between content scripts running in different
     // tabs.
@@ -129,11 +135,16 @@ class CommsServer {
 
     // okay I lied! Messages originating from content script can be forwarded to
     // content scripts running in _other_ frames of the tab
+    let forwarded = false;
     if (context?.origin === CommsOrigin.ContentScript) {
       if (context?.comms.forwardTo === 'all-frames') {
+        forwarded = true;
         this.sendToOtherFrames(message, context);
       }
     }
+    if (!forwarded) {
+      this.logger.warn('sendMessage', `message ${message.command ?? ''} was not forwarded to any destination!`,  {message, context});
+    }
   }
 
   /**
@@ -148,10 +159,13 @@ class CommsServer {
    * Does NOT send a message to popup.
    **/
   private sendToAll(message){
+    this.logger.info('sendToAll', "sending message to all content scripts", message);
+
     for(const tid in this.ports){
       const tab = this.ports[tid];
       for(const frame in tab){
         for (const port in tab[frame]) {
+          this.logger.info('sendToAll', `      <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}, port ${port}`, message);
           tab[frame][port].postMessage(message);
         }
       }
@@ -168,9 +182,11 @@ class CommsServer {
   private async sendToFrameContentScripts(message, tab, frame, port?) {
     if (port !== undefined) {
       this.ports[tab][frame][port].postMessage(message);
+      this.logger.info('sendToOtherFrames', `      <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}, port ${port}`, message);
       return;
     }
     for (const framePort in this.ports[tab][frame]) {
+      this.logger.info('sendToOtherFrames', `      <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}`, message);
       this.ports[tab][frame][framePort].postMessage(JSON.parse(JSON.stringify(message)));
     }
   }
@@ -198,7 +214,7 @@ class CommsServer {
   }
 
   private async sendToFrame(message, tab, frame, port?) {
-    this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message);
+    this.logger.info('sendToFrame', `      <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}`, message);
 
     if (isNaN(tab)) {
       if (frame === '__playing') {
@@ -212,33 +228,32 @@ class CommsServer {
       [tab, frame] = frame.split('-');
     }
 
-    this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message);
+    this.logger.info('sendToFrame', `      <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}`, message);
 
     try {
 
       this.sendToFrameContentScripts(message, tab, frame, port);
     } catch (e) {
-      this.logger.log('error', 'comms', `%c[CommsServer::sendToFrame] Sending message failed. Reason:`, "background: #dda; color: #11D", e);
+      this.logger.error('sendToFrame', ` Sending message failed. Reason:`, e);
     }
   }
 
   private async sendToActive(message) {
-    this.logger.log('info', 'comms', "%c[CommsServer::sendToActive] trying to send a message to active tab. Message:", "background: #dda; color: #11D", message);
+    this.logger.info('sendToActive', `      <——— trying to send a message ${message.command ?? ''} to active tab. Message:`, message);
 
     const tabs = await this.activeTab;
 
-    this.logger.log('info', 'comms', "[CommsServer::_sendToActive] currently active tab(s)?", tabs);
-    for (const frame in this.ports[tabs[0].id]) {
-      this.logger.log('info', 'comms', "key?", frame, this.ports[tabs[0].id]);
-    }
+    this.logger.info('sendToActive', "currently active tab(s)?", tabs);
 
     for (const frame in this.ports[tabs[0].id]) {
+      this.logger.info('sendToActive', "sending message to frame:", frame, this.ports[tabs[0].id][frame], '; message:', message);
       this.sendToFrameContentScripts(message, tabs[0].id, frame);
     }
   }
 
 
   private async processReceivedMessage(message, port, sender?: {frameId: string, tabId: string}){
+    this.logger.info('processMessage', `                   ==> Received message ${message.command ?? ''} from content script or port`, "background-color: #11D; color: #aad", message, port, sender);
     // this triggers events
     this.eventBus.send(
       message.command,
@@ -259,7 +274,7 @@ class CommsServer {
   }
 
   private processReceivedMessage_nonpersistent(message, sender){
-    this.logger.log('info', 'comms', "%c[CommsServer.js::processMessage_nonpersistent] Received message from background script!", "background-color: #11D; color: #aad", message, sender);
+    this.logger.info('processMessage_nonpersistent', `                   ==> Received message from background script!`, "background-color: #11D; color: #aad", message, sender);
 
     this.eventBus.send(
       message.command,
diff --git a/src/ext/lib/kbm/KbmBase.ts b/src/ext/lib/kbm/KbmBase.ts
index e8c8103..ed1eec8 100644
--- a/src/ext/lib/kbm/KbmBase.ts
+++ b/src/ext/lib/kbm/KbmBase.ts
@@ -1,11 +1,12 @@
 import EventBus, { EventBusCommand } from '../EventBus';
 import Logger from '../Logger';
+import { ComponentLogger } from '../logging/ComponentLogger';
 import Settings from '../Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 
 export class KbmBase {
   listenFor: string[] = [];
-  logger: Logger;
+  logger: ComponentLogger;
   settings: Settings;
   siteSettings: SiteSettings;
   eventBus: EventBus;
@@ -28,7 +29,7 @@ export class KbmBase {
     },
   }
 
-  constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger) {
+  constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: ComponentLogger) {
     this.logger = logger;
     this.settings = settings;
     this.eventBus = eventBus;
diff --git a/src/ext/lib/kbm/KeyboardHandler.ts b/src/ext/lib/kbm/KeyboardHandler.ts
index 60f9125..ba225de 100644
--- a/src/ext/lib/kbm/KeyboardHandler.ts
+++ b/src/ext/lib/kbm/KeyboardHandler.ts
@@ -8,11 +8,17 @@ import VideoData from '../video-data/VideoData';
 import EventBus, { EventBusCommand } from '../EventBus';
 import KbmBase from './KbmBase';
 import { SiteSettings } from '../settings/SiteSettings';
+import { LogAggregator } from '../logging/LogAggregator';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading KeyboardHandler");
 }
 
+const BASE_LOGGING_STYLES = {
+  log: "color: #ff0"
+};
+
 /**
  * Handles keypresses and mouse movement.
  *
@@ -23,7 +29,6 @@ if(process.env.CHANNEL !== 'stable'){
  */
 export class KeyboardHandler extends KbmBase {
   listenFor: string[] = ['keyup'];
-  logger: Logger;
   settings: Settings;
   siteSettings: SiteSettings;
   eventBus: EventBus;
@@ -45,14 +50,14 @@ export class KeyboardHandler extends KbmBase {
   }
 
   //#region lifecycle
-  constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger) {
-    super(eventBus, siteSettings, settings, logger);
-
+  constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logAggregator: LogAggregator) {
+    const tmpLogger = new ComponentLogger(logAggregator, 'KeyboardHandler', {styles: BASE_LOGGING_STYLES});
+    super(eventBus, siteSettings, settings, tmpLogger);
     this.init();
   }
 
   init() {
-    this.logger.log('info', 'debug', "[KeyboardHandler::init] starting init");
+    this.logger.debug("init", "starting init");
 
     // reset keypressActions when re-initializing, otherwise keypressActions will
     // multiply in an unwanted way
@@ -119,28 +124,28 @@ export class KeyboardHandler extends KbmBase {
   preventAction(event) {
     var activeElement = document.activeElement;
 
-    if (this.logger.canLog('keyboard')) {
-      this.logger.pause(); // temp disable to avoid recursing;
-      const preventAction = this.preventAction(event);
-      this.logger.resume(); // undisable
+    // if (this.logger.canLog('keyboard')) {
+    //   this.logger.pause(); // temp disable to avoid recursing;
+    //   const preventAction = this.preventAction(event);
+    //   this.logger.resume(); // undisable
 
-      this.logger.log('info', 'keyboard', "[KeyboardHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
-      "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1,
-      "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox",
-      "\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text",
-      "\nevent.target.isContentEditable? (yes -> prevent):", event.target.isContentEditable,
-      "\nis keyboard local disabled? (yes -> prevent):", this.keyboardLocalDisabled,
-      // "\nis keyboard enabled in settings? (no -> prevent)", this.settings.keyboardShortcutsEnabled(window.location.hostname),
-      "\nwill the action be prevented? (yes -> prevent)", preventAction,
-      "\n-----------------{ extra debug info }-------------------",
-      "\ntag name? (lowercase):", activeElement.tagName, activeElement.tagName.toLocaleLowerCase(),
-      "\nrole:", activeElement.getAttribute('role'),
-      "\ntype:", activeElement.getAttribute('type'),
-      "\ninsta-fail inputs:", this.inputs,
-      "\nevent:", event,
-      "\nevent.target:", event.target
-      );
-    }
+    //   this.logger.log('info', 'keyboard', "[KeyboardHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
+    //   "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1,
+    //   "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox",
+    //   "\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text",
+    //   "\nevent.target.isContentEditable? (yes -> prevent):", event.target.isContentEditable,
+    //   "\nis keyboard local disabled? (yes -> prevent):", this.keyboardLocalDisabled,
+    //   // "\nis keyboard enabled in settings? (no -> prevent)", this.settings.keyboardShortcutsEnabled(window.location.hostname),
+    //   "\nwill the action be prevented? (yes -> prevent)", preventAction,
+    //   "\n-----------------{ extra debug info }-------------------",
+    //   "\ntag name? (lowercase):", activeElement.tagName, activeElement.tagName.toLocaleLowerCase(),
+    //   "\nrole:", activeElement.getAttribute('role'),
+    //   "\ntype:", activeElement.getAttribute('type'),
+    //   "\ninsta-fail inputs:", this.inputs,
+    //   "\nevent:", event,
+    //   "\nevent.target:", event.target
+    //   );
+    // }
 
     if (this.keyboardLocalDisabled) {
       return true;
@@ -213,19 +218,15 @@ export class KeyboardHandler extends KbmBase {
 
 
   handleKeyup(event) {
-    // if (!this.keyboardEnabled) {
-    //   this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] kbmHandler.keyboardEnabled is set to false. Doing nothing.");
-    //   return;
-    // }
-    this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event);
+    this.logger.info('handleKeyup', "we pressed a key: ", event.key , " | keyup: ", event.keyup, "event:", event);
 
     try {
       if (this.preventAction(event)) {
-        this.logger.log('info', 'keyboard', "[KeyboardHandler::handleKeyup] we are in a text box or something. Doing nothing.");
+        this.logger.info('handleKeyup', "we are in a text box or something. Doing nothing.");
         return;
       }
 
-      this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] Trying to find and execute action for event. Actions/event: ", "color: #ff0", this.keypressActions, event);
+      this.logger.info('handleKeyup', "Trying to find and execute action for event. Actions/event:", this.keypressActions, event);
 
       const isLatin = this.isLatin(event.key);
       for (const command of this.keypressActions) {
@@ -234,7 +235,7 @@ export class KeyboardHandler extends KbmBase {
         }
       }
     } catch (e) {
-      this.logger.log('info', 'debug', '[KeyboardHandler::handleKeyup] Failed to handle keyup!', e);
+      this.logger.debug('handleKeyup', 'Failed to handle keyup!', e);
     }
   }
 
diff --git a/src/ext/lib/kbm/PlayerMouseHandler.ts b/src/ext/lib/kbm/PlayerMouseHandler.ts
index 677af47..a484b59 100644
--- a/src/ext/lib/kbm/PlayerMouseHandler.ts
+++ b/src/ext/lib/kbm/PlayerMouseHandler.ts
@@ -1,5 +1,7 @@
+import { LogAggregator } from './../logging/LogAggregator';
 import EventBus, { EventBusCommand } from '../EventBus';
 import Logger from '../Logger';
+import { ComponentLogger } from '../logging/ComponentLogger';
 import Settings from '../Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 import KbmBase from './KbmBase';
@@ -9,6 +11,10 @@ if(process.env.CHANNEL !== 'stable'){
 }
 
 
+const BASE_LOGGING_STYLES = {
+  log: "color: #ff0"
+};
+
 /**
  * Handles keypress
  */
@@ -36,21 +42,21 @@ export class MouseHandler extends KbmBase {
   }
 
   //#region lifecycle
-  constructor(playerElement: HTMLElement, eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger) {
-    super(eventBus, siteSettings, settings, logger);
+  constructor(playerElement: HTMLElement, eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logAggregator: LogAggregator) {
+    const tmpLogger = new ComponentLogger(logAggregator, 'MouseHandler', {styles: BASE_LOGGING_STYLES});
+
+    super(eventBus, siteSettings, settings, tmpLogger);
 
-    this.logger = logger;
     this.settings = settings;
     this.siteSettings = siteSettings;
     this.eventBus = eventBus;
     this.playerElement = playerElement;
 
     this.init();
-
   }
 
   init() {
-    this.logger.log('info', 'debug', '[MouseHandler::init] starting init');
+    // this.logger.debug('init', 'starting init');
   }
 
   load() {
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index 5d8fc42..24f36ff 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -14,6 +14,7 @@ import { SiteSettings } from '../settings/SiteSettings';
 import PageInfo from './PageInfo';
 import { RunLevel } from '../../enum/run-level.enum';
 import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -69,7 +70,7 @@ class PlayerData {
   private playerCssClass = 'uw-ultrawidify-player-css';
 
   //#region helper objects
-  logger: Logger;
+  logger: ComponentLogger;
   videoData: VideoData;
   pageInfo: PageInfo;
   siteSettings: SiteSettings;
@@ -193,7 +194,7 @@ class PlayerData {
   constructor(videoData) {
     try {
       // set all our helper objects
-      this.logger = videoData.logger;
+      this.logger = new ComponentLogger(videoData.logAggregator, 'PlayerData', {styles: Debug.getLoggingStyles()});
       this.videoData = videoData;
       this.videoElement = videoData.video;
       this.pageInfo = videoData.pageInfo;
@@ -457,13 +458,13 @@ class PlayerData {
 
   private handleDimensionChanges(newDimensions: PlayerDimensions, oldDimensions: PlayerDimensions) {
     if (this.runLevel === RunLevel.Off ) {
-      this.logger.log('info', 'debug', "[PlayerDetect] player size changed, but PlayerDetect is in disabled state. The player element is probably too small.");
+      this.logger.info('handleDimensionChanges', "player size changed, but PlayerDetect is in disabled state. The player element is probably too small.");
       return;
     }
 
     // this 'if' is just here for debugging — real code starts later. It's safe to collapse and
     // ignore the contents of this if (unless we need to change how logging works)
-    this.logger.log('info', 'debug', "[PlayerDetect] player size potentially changed.\n\nold dimensions:", oldDimensions, '\nnew dimensions:', newDimensions);
+    this.logger.info('handleDimensionChanges', "player size potentially changed.\n\nold dimensions:", oldDimensions, '\nnew dimensions:', newDimensions);
 
     // if size doesn't match, trigger onPlayerDimensionChange
     if (
diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index a79b384..94fc4c2 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -19,6 +19,8 @@ import { Aard } from '../aard/Aard';
 import { Stretch } from '../../../common/interfaces/StretchInterface';
 import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
 import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
+import { LogAggregator } from '../logging/LogAggregator';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 /**
  * VideoData — handles CSS for the video element.
@@ -67,7 +69,8 @@ class VideoData {
   //#endregion
 
   //#region helper objects
-  logger: Logger;
+  logger: ComponentLogger;
+  logAggregator: LogAggregator
   settings: Settings; // AARD needs it
   siteSettings: SiteSettings;
   pageInfo: PageInfo;
@@ -117,7 +120,9 @@ class VideoData {
    * @param pageInfo
    */
   constructor(video, settings: Settings, siteSettings: SiteSettings, pageInfo: PageInfo){
-    this.logger = pageInfo.logger;
+    this.logAggregator = pageInfo.logAggregator;
+    this.logger = new ComponentLogger(this.logAggregator, 'VideoData', {});
+
     this.arSetupComplete = false;
     this.video = video;
     this.destroyed = false;
@@ -167,7 +172,7 @@ class VideoData {
       if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) {
         return; // onVideoLoaded is a lie in this case
       }
-      this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
+      this.logger.info('onVideoLoaded', '%c ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
 
       this.hasDrm = hasDrm(this.video);
       this.eventBus.send(
@@ -179,12 +184,12 @@ class VideoData {
       this.videoDimensionsLoaded = true;
       try {
         await this.setupStageTwo();
-        this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— videoData setup stage two complete ———————————', 'color: #0f9');
+        this.logger.info('onVideoLoaded', '%c——————————— videoData setup stage two complete ———————————', 'color: #0f9');
       } catch (e) {
-        this.logger.log('error', 'init', '%c[VideoData::onVideoLoaded] ——————————— Setup stage two failed. ———————————\n', 'color: #f00', e);
+        this.logger.error('onVideoLoaded', '%c ——————————— Setup stage two failed. ———————————\n', 'color: #f00', e);
       }
     } else if (!this.videoDimensionsLoaded) {
-      this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132");
+      this.logger.debug('onVideoLoaded', "%cRecovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132");
 
       this.restoreCrop();
       this.videoDimensionsLoaded = true;
@@ -213,11 +218,11 @@ class VideoData {
 
   //#region <video> event handlers
   onLoadedData() {
-    this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
+    this.logger.info('onLoadedData', 'Video fired event "loaded data!"');
     this.onVideoLoaded();
   }
   onLoadedMetadata() {
-    this.logger.log('info', 'init', '[VideoData::ctor->video.onloadedmetadata] Video fired event "loaded metadata!"');
+    this.logger.log('onLoadedData', 'Video fired event "loaded metadata!"');
     this.onVideoLoaded();
   }
   onTimeUpdate() {
@@ -231,7 +236,7 @@ class VideoData {
    * Sets up event listeners for this video
    */
   async setupEventListeners() {
-    this.logger.log('info', 'init', '%c[VideoData::setupEventListeners] ——————————— Starting event listener setup! ———————————', 'color: #0f9');
+    this.logger.info('setupEventListeners', '%c——————————— Starting event listener setup! ———————————', 'color: #0f9');
 
     // this is in case extension loads before the video
     this.video.addEventListener('loadeddata', this.onLoadedData.bind(this));
@@ -240,7 +245,7 @@ class VideoData {
     // this one is in case extension loads after the video is loaded
     this.video.addEventListener('timeupdate', this.onTimeUpdate.bind(this));
 
-    this.logger.log('info', 'init', '%c[VideoData::setupEventListeners] ——————————— Event listeners setup complete! ———————————', 'color: #0f9');
+    this.logger.info('setupEventListeners', '%c——————————— Event listeners setup complete! ———————————', 'color: #0f9');
   }
 
   /**
@@ -264,7 +269,7 @@ class VideoData {
     }
 
 
-    this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid);
+    this.logger.info('setupStageTwo', 'Created videoData with vdid', this.vdid);
 
 
     // Everything is set up at this point. However, we are still purely "read-only" at this point. Player CSS should not be changed until
@@ -363,7 +368,7 @@ class VideoData {
    * cleans up handlers and stuff when the show is over
    */
   destroy() {
-    this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
+    this.logger.info('destroy', `<vdid:${this.vdid}> received destroy command`);
 
     if (this.video) {
       this.video.classList.remove(this.userCssClassName);
@@ -403,7 +408,8 @@ class VideoData {
       return;
     }
     if (this.currentEnvironment !== this.player.environment) {
-      console.warn('environment changed to:', this.player.environment);
+      this.logger.warn('onEnvironmentChanged', 'environment changed from:', this.currentEnvironment, 'to:', this.player.environment);
+
       this.currentEnvironment = this.player.environment;
       if (this.siteSettings.data.enable[this.player.environment] === ExtensionMode.Disabled) {
         this.setRunLevel(RunLevel.Off);
@@ -473,10 +479,10 @@ class VideoData {
 
   restoreCrop() {
     if (!this.resizer) {
-      this.logger.log('warn', 'debug', '[VideoData::restoreCrop] Resizer has not been initialized yet. Crop will not be restored.');
+      this.logger.warn('restoreCrop', 'Resizer has not been initialized yet. Crop will not be restored.');
       return;
     }
-    this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.')
+    this.logger.info('restoreCrop', 'Attempting to reset aspect ratio.');
     // if we have default crop set for this page, apply this.
     // otherwise, reset crop
 
@@ -489,7 +495,7 @@ class VideoData {
         this.stopArDetection();
         this.startArDetection();
       } catch (e) {
-        this.logger.log('warn', 'debug', '[VideoData::restoreCrop] Autodetection not resumed. Reason:', e);
+        this.logger.warn('restoreCrop', 'Autodetection not resumed. Reason:', e);
       }
     }
   }
@@ -516,13 +522,13 @@ class VideoData {
     let confirmAspectRatioRestore = false;
 
     if (!this.video) {
-      this.logger.log('error', 'debug', '[VideoData::onVideoMutation] mutation was triggered, but video element is missing. Something is fishy. Terminating this uw instance.');
+      this.logger.error('onVideoMutation', 'mutation was triggered, but video element is missing. Something is fishy. Terminating this uw instance.');
       this.destroy();
       return;
     }
 
     if (!this.enabled) {
-      this.logger.log('info', 'info', '[VideoData::onVideoMutation] mutation was triggered, but the extension is disabled. Is the player window too small?');
+      this.logger.info('onVideoMutation', 'mutation was triggered, but the extension is disabled. Is the player window too small?');
       return;
     }
 
@@ -552,8 +558,8 @@ class VideoData {
   onVideoDimensionsChanged(mutationList, observer) {
     if (!mutationList || this.video === undefined) {  // something's wrong
       if (observer && this.video) {
-        this.logger.log(
-          'warn', 'debug',
+        this.logger.warn(
+          'onVideoDimensionChanged',
           'onVideoDimensionChanged encountered a weird state. video and observer exist, but mutationlist does not.\n\nmutationList:', mutationList,
           '\nobserver:', observer,
           '\nvideo:', this.video,
@@ -573,7 +579,7 @@ class VideoData {
    */
   private _processDimensionsChanged() {
     if (!this.player) {
-      this.logger.log('warn', 'debug', `[VideoData::_processDimensionsChanged] Player is not defined. This is super haram.`, this.player);
+      this.logger.warn('_processDimensionsChanged', `Player is not defined. This is super haram.`, this.player);
       return;
     }
     // adding player observer taught us that if element size gets triggered by a class, then
@@ -706,7 +712,7 @@ class VideoData {
 
 
   startArDetection() {
-    this.logger.log('info', 'debug', "[VideoData::startArDetection] starting AR detection")
+    this.logger.info('startArDetection', 'starting AR detection');
     if(this.destroyed || this.invalid) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
@@ -725,7 +731,7 @@ class VideoData {
       }
       this.aard.startCheck();
     } catch (e) {
-      this.logger.log('warn', 'debug', '[VideoData::startArDetection()] Could not start aard for some reason. Was the function was called too early?', e);
+      this.logger.warn('startArDetection', 'Could not start aard for some reason. Was the function was called too early?', e);
     }
   }
 
@@ -754,17 +760,16 @@ class VideoData {
   checkVideoSizeChange(){
     const videoWidth = this.video.offsetWidth;
     const videoHeight = this.video.offsetHeight;
-    // this 'if' is just here for debugging — real code starts later. It's safe to collapse and
-    // ignore the contents of this if (unless we need to change how logging works)
-    if (this.logger.canLog('debug')){
+
+    {
       if(! this.video) {
-        this.logger.log('info', 'videoDetect', "[VideoDetect] player element isn't defined");
+        this.logger.warn('checkVideoSizeChange', "player element isn't defined");
       }
       if ( this.video &&
-           ( this.dimensions?.width != videoWidth ||
-             this.dimensions?.height != videoHeight )
+            ( this.dimensions?.width != videoWidth ||
+              this.dimensions?.height != videoHeight )
       ) {
-        this.logger.log('info', 'debug', "[VideoDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.video.offsetWidth, this.video.offsetHeight);
+        this.logger.debug('checkVideoSizeChange', "player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.video.offsetWidth, this.video.offsetHeight);
       }
     }
 
diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts
index 415f8ea..2184a2c 100644
--- a/src/ext/lib/video-transform/Resizer.ts
+++ b/src/ext/lib/video-transform/Resizer.ts
@@ -21,6 +21,7 @@ import { RunLevel } from '../../enum/run-level.enum';
 import * as _ from 'lodash';
 import getElementStyles from '../../util/getElementStyles';
 import { Stretch } from '../../../common/interfaces/StretchInterface';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 if(Debug.debug) {
   console.log("Loading: Resizer.js");
@@ -46,7 +47,7 @@ class Resizer {
   //#endregion
 
   //#region helper objects
-  logger: Logger;
+  logger: ComponentLogger;
   settings: Settings;
   siteSettings: SiteSettings;
   scaler: Scaler;
@@ -180,7 +181,7 @@ class Resizer {
   constructor(videoData) {
     this.resizerId = (Math.random()*100).toFixed(0);
     this.videoData = videoData;
-    this.logger = videoData.logger;
+    this.logger = new ComponentLogger(videoData.logAggregator, 'Resizer');
     this.video = videoData.video;
     this.settings = videoData.settings;
     this.siteSettings = videoData.siteSettings;
@@ -234,7 +235,7 @@ class Resizer {
   }
 
   destroy(){
-    this.logger.log('info', ['debug', 'init'], `[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
+    this.logger.info('destroy', `<rid:${this.resizerId}> received destroy command.`);
     this.destroyed = true;
   }
 
@@ -251,7 +252,7 @@ class Resizer {
     let ratioOut;
 
     if (!this.videoData.video) {
-      this.logger.log('info', 'debug', "[Scaler.js::modeToAr] No video??",this.videoData.video, "killing videoData");
+      this.logger.info('calculateRatioForLegacyOptions', "No video??", this.videoData.video, "— killing videoData");
       this.videoData.destroy();
       return null;
     }
@@ -260,7 +261,7 @@ class Resizer {
     if (! this.videoData.player.dimensions) {
       ratioOut = screen.width / screen.height;
     } else {
-      this.logger.log('info', 'debug', `[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.videoData.player.dimensions.width ,'x', this.videoData.player.dimensions.height,'aspect ratio:', this.videoData.player.dimensions.width / this.videoData.player.dimensions.height)
+      this.logger.info('calculateRatioForLegacyOptions', `<rid:${this.resizerId}> Player dimensions:`, this.videoData.player.dimensions.width ,'x', this.videoData.player.dimensions.height,'aspect ratio:', this.videoData.player.dimensions.width / this.videoData.player.dimensions.height)
       ratioOut = this.videoData.player.dimensions.width / this.videoData.player.dimensions.height;
     }
 
@@ -276,7 +277,7 @@ class Resizer {
       ar.ratio = ratioOut < fileAr ? ratioOut : fileAr;
     }
     else if(ar.type === AspectRatioType.Reset){
-      this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr);
+      this.logger.info('modeToAr', "Using original aspect ratio -", fileAr);
       ar.ratio = fileAr;
     } else {
       return null;
@@ -350,11 +351,11 @@ class Resizer {
     }
 
     if (!this.video.videoWidth || !this.video.videoHeight) {
-      this.logger.log('warning', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> Video has no width or no height. This is not allowed. Aspect ratio will not be set, and videoData will be uninitialized.');
+      this.logger.warn('setAr', `<rid:${this.resizerId}> Video has no width or no height. This is not allowed. Aspect ratio will not be set, and videoData will be uninitialized.`);
       this.videoData.videoUnloaded();
     }
 
-    this.logger.log('info', 'debug', '%c[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', 'background-color: #4c3a2f, color: #ffa349', ar);
+    this.logger.info('setAr', `<rid:${this.resizerId}> trying to set ar. New ar:`, ar);
 
     let stretchFactors: VideoDimensions | any;
 
@@ -391,7 +392,7 @@ class Resizer {
       // I'm not sure whether they do. Check that.
       ar = this.calculateRatioForLegacyOptions(ar);
       if (! ar) {
-        this.logger.log('info', 'resizer', `[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
+        this.logger.info('setAr', `<rid:${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
         return;
       }
       this.lastAr = {type: ar.type, ratio: ar.ratio};
@@ -406,7 +407,7 @@ class Resizer {
       stretchFactors = this.scaler.calculateCrop(ar);
 
       if (!stretchFactors || stretchFactors.error){
-        this.logger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors?.error);
+        this.logger.error('setAr', ` <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors?.error);
         if (stretchFactors?.error === 'no_video'){
           this.videoData.destroy();
           return;
@@ -427,24 +428,24 @@ class Resizer {
       } else if (this.stretcher.stretch.type === StretchType.FixedSource) {
         this.stretcher.applyStretchFixedSource(stretchFactors);
       }
-      this.logger.log('info', 'debug', "[Resizer::setAr] Processed stretch factors for ",
+      this.logger.info('setAr', "Processed stretch factors for ",
                       this.stretcher.stretch.type === StretchType.NoStretch ? 'stretch-free crop.' :
                         this.stretcher.stretch.type === StretchType.Conditional ? 'crop with conditional StretchType.' : 'crop with fixed stretch',
                       'Stretch factors are:', stretchFactors
       );
     } else if (this.stretcher.stretch.type === StretchType.Hybrid) {
       stretchFactors = this.stretcher.calculateStretch(ar.ratio);
-      this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
+      this.logger.info('setAr', 'Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
     } else if (this.stretcher.stretch.type === StretchType.Fixed) {
       stretchFactors = this.stretcher.calculateStretchFixed(ar.ratio);
     } else if (this.stretcher.stretch.type === StretchType.Basic) {
       stretchFactors = this.stretcher.calculateBasicStretch();
-      this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic StretchType. Stretch factors are:', stretchFactors);
+      this.logger.log('setAr', 'Processed stretch factors for basic StretchType. Stretch factors are:', stretchFactors);
     } else {
       stretchFactors = this.scaler.calculateCrop(ar);
-      this.logger.log(
-        'error', 'debug',
-        '[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong. Pretending stretchMode is set tu NoStretch. Stretch factors are:', stretchFactors,
+      this.logger.error(
+        'setAr',
+        'Okay wtf happened? If you see this, something has gone wrong. Pretending stretchMode is set tu NoStretch. Stretch factors are:', stretchFactors,
         "\n------[ i n f o   d u m p ]------\nstretcher:", this.stretcher,
         '\nargs: ar (corrected for legacy):', ar, 'last ar (optional argument):', lastAr
       );
@@ -501,7 +502,7 @@ class Resizer {
       const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth;
       const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight;
 
-      this.logger.log('info', 'mousemove', "[Resizer::panHandler] mousemove.pageX, pageY:", event.pageX, event.pageY, "\nrelativeX/Y:", relativeX, relativeY)
+      this.logger.info({src: 'panHandler', origin: 'mousemove'}, "mousemove.pageX, pageY:", event.pageX, event.pageY, "\nrelativeX/Y:", relativeX, relativeY);
 
       this.setPan(relativeX, relativeY);
     }
@@ -564,7 +565,7 @@ class Resizer {
    */
   restore() {
     if (!this.manualZoom) {
-      this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'lastAr': this.lastAr} );
+      this.logger.info('restore', `<rid:${this.resizerId}> attempting to restore aspect ratio`, {'lastAr': this.lastAr} );
 
       // this is true until we verify that css has actually been applied
       if(this.lastAr.type === AspectRatioType.Initial){
@@ -749,7 +750,7 @@ class Resizer {
 
   private _computeOffsetsRecursionGuard: boolean = false;
   computeOffsets(stretchFactors: VideoDimensions, ar?: Ar){
-    this.logger.log('info', 'debug', "[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.videoAlignment, '— stretch factors before processing:', stretchFactors);
+    this.logger.info('computeOffsets', `<rid:${this.resizerId}> video will be aligned to `, this.videoAlignment, '— stretch factors before processing:', stretchFactors);
 
     const {realVideoWidth, realVideoHeight, marginX, marginY} = this.computeVideoDisplayedDimensions();
 
@@ -817,8 +818,9 @@ class Resizer {
       }
     }
 
-    this.logger.log(
-      'info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:",
+    this.logger.info(
+      'computeOffsets',
+      `<rid:${this.resizerId}> calculated offsets:`,
       '\n\n---- elements ----',
       '\nplayer element:       ', this.videoData.player.element,
       '\nvideo element:        ', this.videoData.video,
@@ -851,10 +853,10 @@ class Resizer {
         (this.videoData.video.offsetWidth < this.videoData.player.dimensions.width && this.videoData.video.offsetHeight < this.videoData.player.dimensions.height)
       ) && ar?.variant !== ArVariant.Zoom
     ) {
-      this.logger.log('warn', ['debugger', 'resizer'], `[Resizer::_res_computeOffsets] <rid:${this.resizerId}> We are getting some incredibly funny results here.\n\n`,
+      this.logger.warn('computeOffsets', `<rid:${this.resizerId}> We are getting some incredibly funny results here.\n\n`,
         `Video seems to be both wider and taller (or shorter and narrower) than player element at the same time. This is super duper not supposed to happen.\n\n`,
         `Player element needs to be checked.`
-      )
+      );
 
       // sometimes this appears to randomly recurse.
       // There seems to be no way to reproduce it.
@@ -928,13 +930,13 @@ class Resizer {
     // apply extra CSS here. In case of duplicated properties, extraCss overrides
     // default styleString
     if (! this.video) {
-      this.logger.log('warn', 'debug', "[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
+      this.logger.warn('applyCss', `<rid:${this.resizerId}> Video went missing, doing nothing.`);
 
       this.videoData.destroy();
       return;
     }
 
-    this.logger.log('info', ['debug', 'resizer'], "[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
+    this.logger.info('applyCss', `<rid:${this.resizerId}> will apply css.`, {stretchFactors, translate});
 
     // save stuff for quick tests (before we turn numbers into css values):
     this.currentVideoSettings = {
@@ -969,18 +971,18 @@ class Resizer {
 
     // inject new CSS or replace existing one
     if (!this.userCss) {
-      this.logger.log('info', ['debug', 'resizer'], "[Resizer::setStyleString] <rid:"+this.resizerId+"> Setting new css: ", newCssString);
+      this.logger.debug('setStyleString', `<rid:${this.resizerId}> Setting new css: `, newCssString);
 
       this.eventBus.send('inject-css', {cssString: newCssString});
       this.userCss = newCssString;
     } else if (newCssString !== this.userCss) {
-      this.logger.log('info', ['debug', 'resizer'], "[Resizer::setStyleString] <rid:"+this.resizerId+"> Replacing css.\nOld string:", this.userCss, "\nNew string:", newCssString);
+      this.logger.debug('setStyleString', `<rid:${this.resizerId}}> Replacing css.\nOld string:`, this.userCss, "\nNew string:", newCssString)
       // we only replace css if it
       this.eventBus.send('replace-css', {oldCssString: this.userCss, newCssString});
 
       this.userCss = newCssString;
     } else {
-      this.logger.log('info', ['debug', 'resizer'], "[Resizer::setStyleString] <rid:"+this.resizerId+"> Existing css is still valid, doing nothing.");
+      this.logger.debug('setStyleString', `<rid:${this.resizerId}> Existing css is still valid, doing nothing.`);
     }
   }
 
diff --git a/src/ext/lib/video-transform/Scaler.ts b/src/ext/lib/video-transform/Scaler.ts
index a5a8728..565bdcb 100644
--- a/src/ext/lib/video-transform/Scaler.ts
+++ b/src/ext/lib/video-transform/Scaler.ts
@@ -4,6 +4,7 @@ import BrowserDetect from '../../conf/BrowserDetect';
 import VideoData from '../video-data/VideoData';
 import Logger from '../Logger';
 import { Ar, ArVariant } from '../../../common/interfaces/ArInterface';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 
 export enum CropStrategy {
@@ -46,13 +47,13 @@ export type VideoDimensions = {
 class Scaler {
   //#region helper objects
   conf: VideoData;
-  logger: Logger;
+  logger: ComponentLogger;
   //#endregion
 
   // functions
   constructor(videoData) {
     this.conf = videoData;
-    this.logger = videoData.logger;
+    this.logger = new ComponentLogger(videoData.logAggregator, 'Scaler', {});
   }
 
 
@@ -65,7 +66,7 @@ class Scaler {
     let ratioOut;
 
     if (!this.conf.video) {
-      this.logger.log('error', 'debug', "[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
+      this.logger.error('modeToAr', "No video??",this.conf.video, "killing videoData");
       this.conf.destroy();
       return null;
     }
@@ -93,7 +94,7 @@ class Scaler {
       return ratioOut;
     }
     else if (ar.type === AspectRatioType.Reset) {
-      this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
+      this.logger.info('modeToAr', "Using original aspect ratio -", fileAr)
       ar.ar = fileAr;
       return fileAr;
     }
@@ -137,7 +138,7 @@ class Scaler {
     }
 
     if(!this.conf.video){
-      this.logger.log('info', 'debug', "[Scaler::calculateCrop] ERROR — no video detected. Conf:", this.conf, "video:", this.conf.video, "video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
+      this.logger.info('calculateCrop', "ERROR — no video detected. Conf:", this.conf, "video:", this.conf.video, "video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
 
       this.conf.destroy();
       return {error: "no_video"};
@@ -145,7 +146,7 @@ class Scaler {
     if (this.conf.video.videoWidth == 0 || this.conf.video.videoHeight == 0) {
       // that's illegal, but not illegal enough to just blast our shit to high hell
       // mr officer will let you go with a warning this time around
-      this.logger.log('error', 'debug', "[Scaler::calculateCrop] Video has illegal dimensions. Video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
+      this.logger.error('calculateCrop', "Video has illegal dimensions. Video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
 
       return {error: "illegal_video_dimensions"};
     }
@@ -165,16 +166,16 @@ class Scaler {
 
     // handle fuckie-wuckies
     if (!ar.ratio){
-      this.logger.log('error', 'scaler', "[Scaler::calculateCrop] no ar?", ar.ratio, " -- we were given this mode:", ar);
+      this.logger.error('calculateCrop', "no ar?", ar.ratio, " -- we were given this mode:", ar);
       return {error: "no_ar", ratio: ar.ratio};
     }
 
-    this.logger.log('info', 'scaler', "[Scaler::calculateCrop] trying to set ar. args are: ar->",ar.ratio,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
+    this.logger.info('calculateCrop', "trying to set ar. args are: ar->",ar.ratio,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
 
     // If we encounter invalid players, we try to update its dimensions
     // ONCE before throwing an error
     if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){
-      this.logger.log('error', 'scaler', "[Scaler::calculateCrop] ERROR — no (or invalid) this.conf.player.dimensions:",this.conf.player.dimensions);
+      this.logger.error('calculateCrop', "ERROR — no (or invalid) this.conf.player.dimensions:",this.conf.player.dimensions);
       this.conf.player.updatePlayer();
 
       if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){
@@ -191,7 +192,7 @@ class Scaler {
     }
 
 
-    this.logger.log('info', 'scaler', "[Scaler::calculateCrop] ar is " ,ar.ratio, ", file ar is", streamAr, ",ar variant", ar.variant ,"\nthis.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions, this.conf.player.element);
+    this.logger.info('calculateCrop', "ar is " ,ar.ratio, ", file ar is", streamAr, ",ar variant", ar.variant ,"\nthis.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions, this.conf.player.element);
 
     const videoDimensions: VideoDimensions = {
       xFactor: 1,
diff --git a/src/ext/lib/video-transform/Stretcher.ts b/src/ext/lib/video-transform/Stretcher.ts
index b414162..d4fd9de 100644
--- a/src/ext/lib/video-transform/Stretcher.ts
+++ b/src/ext/lib/video-transform/Stretcher.ts
@@ -6,6 +6,7 @@ import VideoData from '../video-data/VideoData';
 import Logger from '../Logger';
 import Settings from '../Settings';
 import { Stretch } from '../../../common/interfaces/StretchInterface';
+import { ComponentLogger } from '../logging/ComponentLogger';
 
 // računa vrednosti za transform-scale (x, y)
 // transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje
@@ -19,7 +20,7 @@ class Stretcher {
 
   //#region helper objects
   conf: VideoData;
-  logger: Logger;
+  logger: ComponentLogger;
   settings: Settings;
   siteSettings: SiteSettings;
   //#endregion
@@ -29,7 +30,7 @@ class Stretcher {
   // functions
   constructor(videoData) {
     this.conf = videoData;
-    this.logger = videoData.logger;
+    this.logger = new ComponentLogger(videoData.logAggregator, 'Stretcher', {});;
     this.siteSettings = videoData.siteSettings;
     this.settings = videoData.settings;
 
@@ -111,7 +112,7 @@ class Stretcher {
     //     * we squeeze X axis, if target AR is narrower than player size
     //     * we squeeze Y axis, if target AR is wider than the player size
 
-    this.logger.log('info', 'stretcher', `[Stretcher::applyStretchFixedSource] here's what we got:
+    this.logger.info('applyStretchFixedSource', `here's what we got:
 postCropStretchFactors: x=${postCropStretchFactors.xFactor} y=${postCropStretchFactors.yFactor}
 fixedStretchRatio:      ${this.stretch.ratio}
 videoAr:                ${streamAr}
@@ -120,7 +121,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
 
     postCropStretchFactors.xFactor *= squeezeFactor;
 
-    this.logger.log('info', 'stretcher', `[Stretcher::applyStretchFixedSource] here's what we'll apply:\npostCropStretchFactors: x=${postCropStretchFactors.x} y=${postCropStretchFactors.y}`);
+    this.logger.info('applyStretchFixedSource', `here's what we'll apply:\npostCropStretchFactors: x=${postCropStretchFactors.x} y=${postCropStretchFactors.y}`);
 
     return postCropStretchFactors;
   }
diff --git a/src/ext/lib/video-transform/Zoom.ts b/src/ext/lib/video-transform/Zoom.ts
index 1500b79..6688fc7 100644
--- a/src/ext/lib/video-transform/Zoom.ts
+++ b/src/ext/lib/video-transform/Zoom.ts
@@ -1,5 +1,4 @@
-import Debug from '../../conf/Debug';
-import Logger from '../Logger';
+import { ComponentLogger } from '../logging/ComponentLogger';
 import VideoData from '../video-data/VideoData';
 
 // calculates zooming and video offsets/panning
@@ -16,7 +15,7 @@ class Zoom {
 
   //#region helper objects
   conf: VideoData;
-  logger: Logger;
+  logger: ComponentLogger;
   //#endregion
 
   //#region misc data
@@ -34,7 +33,7 @@ class Zoom {
 
   constructor(videoData) {
     this.conf = videoData;
-    this.logger = videoData.logger;
+    this.logger = new ComponentLogger(videoData.logAggregator, 'Zoom', {});
   }
 
   reset(){
@@ -66,7 +65,7 @@ class Zoom {
     this.scale = Math.pow(2, this.logScale);
     this.scaleY = Math.pow(2, this.logScaleY);
 
-    this.logger.log('info', 'debug', "[Zoom::zoomStep] changing zoom by", amount, ". New zoom level:", this.scale);
+    this.logger.info('zoomStep', "changing zoom by", amount, ". New zoom level:", this.scale);
     this.processZoom();
   }
 
@@ -100,12 +99,12 @@ class Zoom {
     if (!stretchFactors) {
       return;
     }
-    this.logger.log('info', 'debug', "[Zoom::setZoom] Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
+    this.logger.info('setZoom', "Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
 
     stretchFactors.xFactor *= this.scale;
     stretchFactors.yFactor *= this.scale;
 
-    this.logger.log('info', 'debug', "[Zoom::setZoom] Applying zoom. Stretch factors post:", stretchFactors);
+    this.logger.info('setZoom', "Applying zoom. Stretch factors post:", stretchFactors);
   }
 }
 
diff --git a/src/install/first-time/App.vue b/src/install/first-time/App.vue
index 0e56988..991f645 100644
--- a/src/install/first-time/App.vue
+++ b/src/install/first-time/App.vue
@@ -53,9 +53,9 @@
 </template>
 
 <script>
-import Debug from '../../ext/conf/Debug';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
-import Logger from '../../ext/lib/Logger';
+import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 
 export default {
   data () {
@@ -75,6 +75,7 @@ export default {
       settings: {},
       settingsInitialized: false,
       logger: {},
+      logAggregator: {},
       siteTabDisabled: false,
       videoTabDisabled: false,
       canShowVideoTab: {canShow: true, warning: true},
@@ -82,7 +83,8 @@ export default {
     }
   },
   async created() {
-    this.logger = new Logger();
+    this.logAggregator = new LogAggregator('');
+    this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
     await this.logger.init({
         allowLogging: true,
     });
diff --git a/src/install/updated/App.vue b/src/install/updated/App.vue
index 809c74f..f510fe7 100644
--- a/src/install/updated/App.vue
+++ b/src/install/updated/App.vue
@@ -54,9 +54,9 @@
 </template>
 
 <script>
-import Debug from '../../ext/conf/Debug';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
-import Logger from '../../ext/lib/Logger';
+import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 
 export default {
   data () {
@@ -75,6 +75,7 @@ export default {
       currentZoom: 1,
       settings: {},
       settingsInitialized: false,
+      logAggregator: {},
       logger: {},
       siteTabDisabled: false,
       videoTabDisabled: false,
@@ -83,7 +84,9 @@ export default {
     }
   },
   async created() {
-    this.logger = new Logger();
+    this.logAggregator = new LogAggregator('');
+    this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
+
     await this.logger.init({
         allowLogging: true,
     });
diff --git a/src/options/App.vue b/src/options/App.vue
index ed3821e..80cb9b9 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -123,7 +123,8 @@ import ConfirmPopup from './common/ConfirmationPopup';
 import About from './about'
 import AutodetectionSettings  from './AutodetectionSettings';
 // import SuperAdvancedSettings from './'
-import Logger from '../ext/lib/Logger';
+import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 
 export default {
   name: "Ultrawidify",
@@ -132,6 +133,7 @@ export default {
       selectedTab: "general",
       selectedTabTitle: "General settings",
       settings: {},
+      logAggregator: {},
       logger: {},
       settingsInitialized: false,
       editActionPopupVisible: false,
@@ -145,7 +147,8 @@ export default {
     }
   },
   async created () {
-    this.logger = new Logger();
+    this.logAggregator = new LogAggregator('');
+    this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
     await this.logger.init({
         allowLogging: true,
     });