diff --git a/src/ext/conf/ExtConfPatches.js b/src/ext/conf/ExtConfPatches.js
index d6b87f3..d0ee11c 100644
--- a/src/ext/conf/ExtConfPatches.js
+++ b/src/ext/conf/ExtConfPatches.js
@@ -2,6 +2,46 @@
 // version: {ExtensionConf object, but only properties that get overwritten}
 
 const ExtensionConfPatch = {
+  '4.3.0': {
+    sites: {
+      "old.reddit.com" : {
+        type: 'testing',
+        DOM: {
+          player: {
+            manual: true,
+            useRelativeAncestor: false,
+            querySelectors: '.media-preview-content'
+          }
+        },
+        css: '',
+      },
+      "www.reddit.com" : {
+        type: 'testing',
+        DOM: {
+          player: {
+            manual: true,
+            useRelativeAncestor: false,
+            querySelectors: '.media-preview-content'
+          }
+        },
+        css: '',
+      },
+      "www.youtube.com" : {
+        DOM: {
+          player: {
+            manual: true,
+            querySelectors: "#movie_player, #player",
+            additionalCss: "",
+            useRelativeAncestor: false,
+            playerNodeCss: "",
+          }
+        }
+      },
+      "www.netflix.com" : {
+        arPersistance: true
+      }
+    }
+  },
   '4.2.1': {
     sites: {
       "old.reddit.com" : {
diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js
index 9a4d4ec..ebfea0a 100644
--- a/src/ext/conf/ExtensionConf.js
+++ b/src/ext/conf/ExtensionConf.js
@@ -915,6 +915,7 @@ whatsNewChecked: true,
       stretch: Stretch.Default,
       videoAlignment: VideoAlignment.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
+      arPersistence: true,              // persist aspect ratio between different videos
       autoarPreventConditions: {        // prevents autoar on following conditions
         videoStyleString: {             // if video style string thing does anything of what follows
           containsProperty: {           // if video style string has any of these properties (listed as keys)
diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js
index 44cb9bd..dfd2ded 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.js
@@ -4,18 +4,17 @@ import ExtensionMode from '../../common/enums/extension-mode.enum';
 
 class ActionHandler {
 
-  constructor(pageInfo) {
+  constructor(pageInfo, logger) {
     this.pageInfo = pageInfo;
     this.settings = pageInfo.settings;
     
     this.inputs = ['input', 'select', 'button', 'textarea'];
     this.keyboardLocalDisabled = false;
+    this.logger = logger;
   }
 
   init() {
-    if (Debug.debug) {
-      console.log("[ActionHandler::init] starting init");
-    }
+    this.logger.log('info', 'debug', "[ActionHandler::init] starting init");
 
     this.keyUpActions = [];
     this.keyDownActions = [];
@@ -105,15 +104,13 @@ class ActionHandler {
     document.addEventListener('keyup', (event) => ths.handleKeyup(event) );
 
     this.pageInfo.setActionHandler(this);
-    if (Debug.debug) {
-      console.log("[ActionHandler::init] initialization complete");
-    }
+
+    this.logger.log('info', 'debug', "[ActionHandler::init] initialization complete");
   }
 
   registerHandleMouse(videoData) {
-    if (Debug.debug && Debug.mousemove) {
-      console.log("[ActionHandler::registerHandleMouse] registering handle mouse for videodata:", videoData)
-    }
+    this.logger.log('info', ['actionHandler', 'mousemove'], "[ActionHandler::registerHandleMouse] registering handle mouse for videodata:", videoData)
+
     var ths = this;
     if (videoData.player && videoData.player.element) {
       videoData.player.element.addEventListener('mousemove', (event) => ths.handleMouseMove(event, videoData));
@@ -133,10 +130,10 @@ class ActionHandler {
   preventAction() {
     var activeElement = document.activeElement;
 
-    if(Debug.debug && Debug.keyboard) {
-      Debug.debug = false; // temp disable to avoid recursing;
+    if(this.logger.canLog('keyboard')) {
+      this.logger.pause(); // temp disable to avoid recursing;
       
-      console.log("[ActionHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
+      this.logger.log('info', 'keyboard', "[ActionHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
       "is full screen? (yes->allow):", PlayerData.isFullScreen(),
       "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1,
       "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox",
@@ -151,7 +148,7 @@ class ActionHandler {
       "insta-fail inputs:", this.inputs
       );
 
-      Debug.debug = true; // undisable
+      this.logger.resume(); // undisable
     }
 
     // lately youtube has allowed you to read and write comments while watching video in
@@ -187,15 +184,11 @@ class ActionHandler {
   }
 
   execAction(actions, event, videoData) {
-    if(Debug.debug  && Debug.keyboard ){
-      console.log("%c[ActionHandler::execAction] Trying to find and execute action for event. Actions/event: ", "color: #ff0", actions, event);
-    }
+    this.logger.log('info', 'keyboard', "%c[ActionHandler::execAction] Trying to find and execute action for event. Actions/event: ", "color: #ff0", actions, event);
 
     for (var action of actions) {
       if (this.isActionMatch(action.shortcut, event)) {
-        if(Debug.debug  && Debug.keyboard ){
-          console.log("%c[ActionHandler::execAction] found an action associated with keypress/event: ", "color: #ff0", action);
-        }
+        this.logger.log('info', 'keyboard', "%c[ActionHandler::execAction] found an action associated with keypress/event: ", "color: #ff0", action);
 
         for (var cmd of action.cmd) {
           if (action.scope === 'page') {
@@ -243,14 +236,10 @@ class ActionHandler {
 
 
   handleKeyup(event) {
-    if(Debug.debug  && Debug.keyboard ){
-      console.log("%c[ActionHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event);
-    }
+    this.logger.log('info', 'keyboard', "%c[ActionHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event);
 
     if (this.preventAction()) {
-      if (Debug.debug && Debug.keyboard) {
-        console.log("[ActionHandler::handleKeyup] we are in a text box or something. Doing nothing.");
-      }
+      this.logger.log('info', 'keyboard', "[ActionHandler::handleKeyup] we are in a text box or something. Doing nothing.");
       return;
     }
 
@@ -263,9 +252,7 @@ class ActionHandler {
     }
 
     if (this.preventAction()) {
-      if (Debug.debug && Debug.keyboard) {
-        console.log("[ActionHandler::handleKeydown] we are in a text box or something. Doing nothing.");
-      }
+      this.logger.log('info', 'keyboard', "[ActionHandler::handleKeydown] we are in a text box or something. Doing nothing.");
       return;
     }
 
@@ -273,9 +260,7 @@ class ActionHandler {
   }
 
   handleMouseMove(event, videoData) {
-    if (Debug.debug && Debug.mousemove) {
-      console.log("[ActionHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData);
-    }
+    this.logger.log('info', 'keyboard', "[ActionHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData);
     videoData.panHandler(event);
     this.execAction(this.mouseMoveActions, event, videoData)
   }
diff --git a/src/ext/lib/Logger.js b/src/ext/lib/Logger.js
index fe3546c..d6786b5 100644
--- a/src/ext/lib/Logger.js
+++ b/src/ext/lib/Logger.js
@@ -3,6 +3,7 @@ class Logger {
     this.conf = conf;
     this.history = [];
     this.startTime = performance.now();
+    this.temp_disable = false;
   }
 
   clear() {
@@ -39,7 +40,34 @@ class Logger {
     return logfileStr;
   }
 
+  pause() {
+    this.temp_disable = true;
+  }
+  resume() {
+    this.temp_disable = false;
+  }
+
   canLog(component) {
+    return this.canLogFile(component) || this.canLogConsole(component);
+  }
+
+  canLogFile(component) {
+    if (!this.conf.fileOptions.enabled || this.temp_disable) {
+      return false;
+    }
+    if (component.length ) {
+      for (const c in component) {
+        if (this.conf.fileOptions[component]) {
+          return this.conf.fileOptions[component];
+        }
+      }
+    } 
+    return this.conf.fileOptions[component];
+  }
+  canLogConsole(component) {
+    if (!this.conf.consoleOptions.enabled || this.temp_disable) {
+      return false;
+    }
     if (component.length) {
       for (const c in component) {
         if (this.conf.fileOptions[component]) {
@@ -58,7 +86,7 @@ class Logger {
       return;
     }
     if (this.conf.logToFile) {
-      if (this.canLog(component)) {
+      if (this.canLogFile(component)) {
         let ts = performance.now();
         if (ts <= this.history[this.history.length - 1]) {
           ts = this.history[this.history.length - 1] + 0.00001;
@@ -71,7 +99,7 @@ class Logger {
       }
     }
     if (this.conf.logToConsole) {
-      if (this.canLog(component)) {
+      if (this.canLogConsole(component)) {
         console.log(...message);
       }
     }
diff --git a/src/ext/lib/comms/CommsClient.js b/src/ext/lib/comms/CommsClient.js
index 5b2a5e1..d8d5b82 100644
--- a/src/ext/lib/comms/CommsClient.js
+++ b/src/ext/lib/comms/CommsClient.js
@@ -2,7 +2,7 @@ import Debug from '../../conf/Debug';
 import BrowserDetect from '../../conf/BrowserDetect';
 
 class CommsClient {
-  constructor(name, settings) {
+  constructor(name, settings, logger) {
     if (BrowserDetect.firefox) {
       this.port = browser.runtime.connect({name: name});
     } else if (BrowserDetect.chrome) {
@@ -18,6 +18,7 @@ class CommsClient {
     this.settings = settings;
     this.pageInfo = undefined;
     this.commsId = (Math.random() * 20).toFixed(0);
+    this.logger = logger;
   }
   
   destroy() {
@@ -32,9 +33,7 @@ class CommsClient {
 
     this.pageInfo = pageInfo;
 
-    if(Debug.debug) {
-      console.log(`[CommsClient::setPageInfo] <${this.commsId}>`, "SETTING PAGEINFO —", this.pageInfo, this)
-    }
+    this.logger.log('info', 'debug', `[CommsClient::setPageInfo] <${this.commsId}>`, "SETTING PAGEINFO —", this.pageInfo, this)
 
     var ths = this;
     this._listener = m => ths.processReceivedMessage(m);
@@ -46,17 +45,13 @@ class CommsClient {
   }
 
   processReceivedMessage(message){
-    if(Debug.debug && Debug.comms){
-      console.log(`[CommsClient.js::processMessage] <${this.commsId}> Received message from background script!`, message);
-    }
+    this.logger.log('info', 'comms', `[CommsClient.js::processMessage] <${this.commsId}> Received message from background script!`, message);
 
     if (!this.pageInfo || !this.settings.active) {
-      if(Debug.debug && Debug.comms){
-        console.log(`[CommsClient.js::processMessage] <${this.commsId}> this.pageInfo (or settings) not defined. Extension is probably disabled for this site.\npageInfo:`, this.pageInfo,
-                    "\nsettings.active:", this.settings.active,
-                    "\nnobj:", this
-        );
-      }
+      this.logger.log('info', 'comms', `[CommsClient.js::processMessage] <${this.commsId}> this.pageInfo (or settings) not defined. Extension is probably disabled for this site.\npageInfo:`, this.pageInfo,
+                      "\nsettings.active:", this.settings.active,
+                      "\nnobj:", this
+      );
       return;
     }
 
@@ -135,13 +130,11 @@ class CommsClient {
   }
 
   async requestSettings(){
-    if(Debug.debug){
-      console.log("%c[CommsClient::requestSettings] sending request for congif!", "background: #11D; color: #aad");
-    }
+    this.logger.log('info', 'comms', "%c[CommsClient::requestSettings] sending request for congif!", "background: #11D; color: #aad");
+   
     var response = await this.sendMessage_nonpersistent({cmd: 'get-config'});
-    if(Debug.debug){
-      console.log("%c[CommsClient::requestSettings] received settings response!", "background: #11D; color: #aad", response);
-    }
+   
+    this.logger.log('info', 'comms', "%c[CommsClient::requestSettings] received settings response!", "background: #11D; color: #aad", response);
 
     if(! response || response.extensionConf){
       return Promise.resolve(false);
@@ -156,9 +149,7 @@ class CommsClient {
   }
 
   registerVideo(){
-    if (Debug.debug && Debug.comms) {
-      console.log(`[CommsClient::registerVideo] <${this.commsId}>`, "Registering video for current page.");
-    }
+    this.logger.log('info', 'comms', `[CommsClient::registerVideo] <${this.commsId}>`, "Registering video for current page.");
     if (this.pageInfo) {
       if (this.pageInfo.hasVideo()) { 
         this.port.postMessage({cmd: "has-video"});
@@ -173,9 +164,7 @@ class CommsClient {
   }
 
   unregisterVideo(){
-    if (Debug.debug && Debug.comms) {
-      console.log(`[CommsClient::unregisterVideo] <${this.commsId}>`, "Unregistering video for current page.");
-    }
+    this.logger.log('info', 'comms', `[CommsClient::unregisterVideo] <${this.commsId}>`, "Unregistering video for current page.");
     this.port.postMessage({cmd: "noVideo"});  // ayymd
   }
 
diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js
index 5aeac23..ad470b6 100644
--- a/src/ext/lib/video-data/PageInfo.js
+++ b/src/ext/lib/video-data/PageInfo.js
@@ -9,7 +9,7 @@ if(Debug.debug)
 
 
 class PageInfo {
-  constructor(comms, settings, extensionMode, readOnly = false){
+  constructor(comms, settings, logger, extensionMode, readOnly = false){
     this.hasVideos = false;
     this.siteDisabled = false;
     this.videos = [];
@@ -20,6 +20,8 @@ class PageInfo {
     this.extensionMode = extensionMode;
     this.readOnly = readOnly;
 
+    this.logger = logger;
+
     if (comms){ 
       this.comms = comms;
     }
@@ -42,9 +44,7 @@ class PageInfo {
   }
 
   destroy() {
-    if(Debug.debug || Debug.init){
-      console.log("[PageInfo::destroy] destroying all videos!")
-    }
+    this.logger.log('info', ['debug', 'init'], "[PageInfo::destroy] destroying all videos!")
     if(this.rescanTimer){
       clearTimeout(this.rescanTimer);
     }
@@ -118,9 +118,7 @@ class PageInfo {
       this.hasVideos = false;
   
       if(rescanReason == RescanReason.PERIODIC){
-        if (Debug.debug && Debug.videoRescan && Debug.periodic) {
-          console.log("[PageInfo::rescan] Scheduling normal rescan:")
-        }
+        this.logger.log('info', 'videoRescan', "[PageInfo::rescan] Scheduling normal rescan.")
         this.scheduleRescan(RescanReason.PERIODIC);
       }
       return;
@@ -169,18 +167,14 @@ class PageInfo {
       if (videoExists) {
         continue;
       } else {
-        if (Debug.debug && Debug.periodic && Debug.videoRescan) {
-          console.log("[PageInfo::rescan] found new video candidate:", video, "NOTE:: Video initialization starts here:\n--------------------------------\n")
-        }
+        this.logger.log('info', 'videoRescan', "[PageInfo::rescan] found new video candidate:", video, "NOTE:: Video initialization starts here:\n--------------------------------\n")
         
-        v = new VideoData(video, this.settings, this);
+        v = new VideoData(video, this.settings, this, logger);
         // console.log("[PageInfo::rescan] v is:", v)
         v.initArDetection();
         this.videos.push(v);
 
-        if(Debug.debug && Debug.periodic && Debug.videoRescan){
-          console.log("[PageInfo::rescan] END VIDEO INITIALIZATION\n\n\n-------------------------------------\nvideos[] is now this:", this.videos,"\n\n\n\n\n\n\n\n")
-        }
+        this.logger.log('info', 'videoRescan', "END VIDEO INITIALIZATION\n\n\n-------------------------------------\nvideos[] is now this:", this.videos,"\n\n\n\n\n\n\n\n")
       }
     }
 
@@ -212,9 +206,7 @@ class PageInfo {
       // if we encounter a fuckup, we can assume that no videos were found on the page. We destroy all videoData
       // objects to prevent multiple initalization (which happened, but I don't know why). No biggie if we destroyed
       // videoData objects in error — they'll be back in the next rescan
-      if (Debug.debug) {
-        console.log("rescan error: — destroying all videoData objects",e);
-      }
+      this.logger.log('error', 'debug', "rescan error: — destroying all videoData objects",e);
       for (const v of this.videos) {
         v.destroy();
       }
@@ -249,9 +241,7 @@ class PageInfo {
         ths = null;
       }, this.settings.active.pageInfo.timeouts.rescan, RescanReason.PERIODIC)
     } catch(e) {
-      if(Debug.debug){
-        console.log("[PageInfo::scheduleRescan] scheduling rescan failed. Here's why:",e)
-      }
+      this.logger.log('error', 'debug', "[PageInfo::scheduleRescan] scheduling rescan failed. Here's why:",e)
     }
   }
 
@@ -269,17 +259,13 @@ class PageInfo {
       ths = null;
     }, this.settings.active.pageInfo.timeouts.urlCheck)
     } catch(e){
-      if(Debug.debug){
-        console.error("[PageInfo::scheduleUrlCheck] scheduling URL check failed. Here's why:",e)
-      }
+      this.logger.log('error', 'debug', "[PageInfo::scheduleUrlCheck] scheduling URL check failed. Here's why:",e)
     }
   }
 
   ghettoUrlCheck() {
     if (this.lastUrl != window.location.href){
-      if(Debug.debug && Debug.periodic){
-        console.log("[PageInfo::ghettoUrlCheck] URL has changed. Triggering a rescan!");
-      }
+      this.logger.log('error', 'videoRescan', "[PageInfo::ghettoUrlCheck] URL has changed. Triggering a rescan!");
       
       this.rescan(RescanReason.URL_CHANGE);
       this.lastUrl = window.location.href;
@@ -343,7 +329,7 @@ class PageInfo {
 
   startArDetection(playingOnly){
     if (Debug.debug) {
-      console.log('[PageInfo::startArDetection()] starting automatic ar detection!')
+      this.logger.log('info', 'debug', '[PageInfo::startArDetection()] starting automatic ar detection!')
     }
     if (playingOnly) {
       for(var vd of this.videos){
@@ -373,16 +359,12 @@ class PageInfo {
   }
 
   setAr(ar, playingOnly){
-    if (Debug.debug) {
-      console.log('[PageInfo::setAr] aspect ratio:', ar, "playing only?", playingOnly)
-    }
+    this.logger.log('info', 'debug', '[PageInfo::setAr] aspect ratio:', ar, "playing only?", playingOnly)
 
     if (ar.type !== AspectRatio.Automatic) {
       this.stopArDetection(playingOnly);
     } else {
-      if (Debug.debug) {
-        console.log('[PageInfo::setAr] aspect ratio is auto');
-      }
+      this.logger.log('info', 'debug', '[PageInfo::setAr] aspect ratio is auto');
 
       try {
         for (var vd of this.videos) {
@@ -391,7 +373,7 @@ class PageInfo {
           }
         }
       } catch (e) {
-        console.log("???", e);
+        this.logger.log('error', 'debug', "???", e);
       }
       this.initArDetection(playingOnly);
       this.startArDetection(playingOnly);
diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 1b654bf..4f51bba 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -33,7 +33,7 @@ if(Debug.debug)
 */
 
 class PlayerData {
-  constructor(videoData) {
+  constructor(videoData, logger) {
     this.videoData = videoData;
     this.video = videoData.video;
     this.settings = videoData.settings;
@@ -41,6 +41,7 @@ class PlayerData {
     this.element = undefined;
     this.dimensions = undefined;
     this.overlayNode = undefined;
+    this.logger = logger;
 
     if (this.extensionMode === ExtensionMode.Enabled) {
       this.getPlayerDimensions();
@@ -117,9 +118,7 @@ class PlayerData {
   }
 
   unmarkPlayer() {
-    if (Debug.debug) {
-      console.log("[PlayerData::unmarkPlayer] unmarking player!")
-    }
+    this.logger.log('info', 'debug', "[PlayerData::unmarkPlayer] unmarking player!")
     if (this.playerIdElement) {
       this.playerIdElement.remove();
     }
@@ -146,9 +145,7 @@ class PlayerData {
         try{
           ths.ghettoWatcher();
         } catch(e) {
-          if (Debug.debug) {
-            console.log("[PlayerData::scheduleGhettoWatcher] Scheduling failed. Error:",e)
-          }
+          this.logger.log('info', 'debug', "[PlayerData::scheduleGhettoWatcher] Scheduling failed. Error:",e)
 
           ths.scheduleGhettoWatcher(1000);
         }
@@ -160,9 +157,7 @@ class PlayerData {
 
   ghettoWatcherFull() {
     if(this.checkPlayerSizeChange()){
-      if(Debug.debug){
-        console.log("[uw::ghettoOnChange] change detected");
-      }
+      this.logger.log('info', 'debug', "[uw::ghettoOnChange] change detected");
 
       this.getPlayerDimensions();
       if(! this.element ){
@@ -179,9 +174,7 @@ class PlayerData {
     // trick it into doing that
 
     if(this.dimensions.fullscreen != PlayerData.isFullScreen()) {
-      if(Debug.debug){
-        console.log("[PlayerData::ghettoWatcher] fullscreen switch detected (basic change detection failed)");
-      }
+      this.logger.log('info', 'debug', "[PlayerData::ghettoWatcher] fullscreen switch detected (basic change detection failed)");
 
       this.getPlayerDimensions();
 
@@ -238,9 +231,7 @@ class PlayerData {
     let element = this.video.parentNode;
 
     if(! element ){
-      if(Debug.debug) {
-        console.log("[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
-      }
+      this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
       if(this.element) {
         const ths = this;
       }
@@ -306,16 +297,11 @@ class PlayerData {
         
           grows = trustCandidateAfterGrows;
         
-          if(Debug.debug){
-            console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
-          }
+          this.logger.log('info', 'debug', "Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
         }
       }
       else if(grows --<= 0){
-        
-        if(Debug.debug && Debug.playerDetect){
-          console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
-        }
+        this.logger.log('info', 'playerDetect', "Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
         break;
       }
       
@@ -334,9 +320,7 @@ class PlayerData {
     const element = this.getPlayer(isFullScreen);
 
     if(! element ){
-      if(Debug.debug) {
-        console.log("[PlayerDetect::getPlayerDimensions] element is not valid, doing nothing.", element)
-      }
+      this.logger.log('error', 'debug', "[PlayerDetect::getPlayerDimensions] element is not valid, doing nothing.", element)
       this.element = undefined;
       this.dimensions = undefined;
       return;
@@ -367,7 +351,7 @@ class PlayerData {
   }
 
   checkPlayerSizeChange(){
-    if(Debug.debug){
+    if (this.logger.canLog('debug')){
       if(this.element == undefined){
         // return true;
       }
@@ -378,18 +362,18 @@ class PlayerData {
 
       if (this.dimensions && this.dimensions.fullscreen){
         if(! PlayerData.isFullScreen()){
-          console.log("[PlayerDetect] player size changed. reason: exited fullscreen");
+          this.logger.log('info', 'debug', "[PlayerDetect] player size changed. reason: exited fullscreen");
         }
       }
-      if(! this.element && Debug.debug && Debug.playerDetect) {
-        console.log("[PlayerDetect] player element isnt defined");
+      if(! this.element) {
+        this.logger.log('info', 'playerDetect', "[PlayerDetect] player element isnt defined");
       }
 
       if ( this.element && 
            ( this.dimensions.width != this.element.offsetWidth ||
              this.dimensions.height != this.element.offsetHeight )
       ) {
-        console.log("[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.element.offsetWidth, this.element.offsetHeight);
+        this.logger.log('info', 'debug', "[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.element.offsetWidth, this.element.offsetHeight);
       }
     }
     
@@ -417,9 +401,7 @@ class PlayerData {
       return false;
     }
 
-    if(Debug.debug) {
-      console.log("[PlayerData::checkFullscreenChange] this.dimensions is not defined. Assuming fs change happened and setting default values.")
-    }
+    this.logger.log('info', 'debug', "[PlayerData::checkFullscreenChange] this.dimensions is not defined. Assuming fs change happened and setting default values.")
 
     this.dimensions = {
       fullscreen: isFs,
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index f738985..9c84d99 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -5,35 +5,31 @@ import ArDetector from '../ar-detect/ArDetector';
 
 class VideoData {
   
-  constructor(video, settings, pageInfo){
+  constructor(video, settings, pageInfo, logger){
     this.arSetupComplete = false;
     this.video = video;
     this.destroyed = false;
     this.settings = settings;
     this.pageInfo = pageInfo;
     this.extensionMode = pageInfo.extensionMode;
-
+    this.logger = logger;
 
     // POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
     // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)    
-    this.player = new PlayerData(this);
-    this.resizer = new Resizer(this);
+    this.player = new PlayerData(this, logger);
+    this.resizer = new Resizer(this, logger);
 
-    this.arDetector = new ArDetector(this);  // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting
+    this.arDetector = new ArDetector(this, logger);  // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting
     // player dimensions need to be in:
     // this.player.dimensions
 
     // apply default align and stretch
-    if (Debug.init) {
-      console.log("%c[VideoData::ctor] Initial resizer reset!", {background: '#afd', color: '#132'});
-    }
+    this.logger.log('info', 'debug', "%c[VideoData::ctor] Initial resizer reset!", {background: '#afd', color: '#132'});
     this.resizer.reset();
 
     
     this.vdid = (Math.random()*100).toFixed();
-    if (Debug.init) {
-      console.log("[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode);
-    }
+    this.logger.log('info', 'init', "[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode);
 
     this.pageInfo.initMouseActionHandler(this);
   }
@@ -61,9 +57,7 @@ class VideoData {
   }
   
   startArDetection() {
-    if (Debug.debug) {
-      console.log("[VideoData::startArDetection] starting AR detection")
-    }
+    this.logger.log('info', 'debug', "[VideoData::startArDetection] starting AR detection")
     if(this.destroyed) {
       throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
     }
@@ -87,9 +81,7 @@ class VideoData {
   }
 
   destroy() {
-    if(Debug.debug || Debug.init){ 
-      console.log(`[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
-    }
+    this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
 
     this.pause();
     this.destroyed = true;
@@ -133,9 +125,7 @@ class VideoData {
         this.player.start();
       }
     } catch (e) {
-      if(Debug.debug){
-        console.log("[VideoData.js::resume] cannot resume for reasons. Will destroy videoData. Error here:", e);
-      }
+      this.logger.log('error', 'debug', "[VideoData.js::resume] cannot resume for reasons. Will destroy videoData. Error here:", e);
       this.destroy();
     }
   }
diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 33977a3..fa2b773 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -14,15 +14,17 @@ if(Debug.debug) {
 
 class Resizer {
   
-  constructor(videoData) {
+  constructor(videoData, logger) {
     this.conf = videoData;
     this.video = videoData.video;
     this.settings = videoData.settings;
     this.extensionMode = videoData.extensionMode;
 
-    this.scaler = new Scaler(this.conf);
-    this.stretcher = new Stretcher(this.conf); 
-    this.zoom = new Zoom(this.conf);
+    this.logger = logger;
+
+    this.scaler = new Scaler(this.conf, logger);
+    this.stretcher = new Stretcher(this.conf, logger); 
+    this.zoom = new Zoom(this.conf, logger);
 
     this.cssCheckDisabled = false;
 
@@ -50,7 +52,7 @@ class Resizer {
     this.resizerId = (Math.random(99)*100).toFixed(0);
 
     if (this.settings.active.pan) {
-      console.log("can pan:", this.settings.active.miscSettings.mousePan.enabled, "(default:", this.settings.active.miscSettings.mousePan.enabled, ")")
+      this.logger.log('info', 'debug', "can pan:", this.settings.active.miscSettings.mousePan.enabled, "(default:", this.settings.active.miscSettings.mousePan.enabled, ")")
       this.canPan = this.settings.active.miscSettings.mousePan.enabled;
     } else {
       this.canPan = false;
@@ -68,9 +70,7 @@ class Resizer {
   }
 
   destroy(){
-    if(Debug.debug || Debug.init){
-      console.log(`[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
-    }
+    this.logger.log('info', ['debug', 'init'], `[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
     this.destroyed = true;
     this.stopCssWatcher();
   }
@@ -86,9 +86,7 @@ class Resizer {
     var ratioOut;
 
     if (!this.conf.video) {
-      if (Debug.debug) {
-        console.log("[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
-      }
+      this.logger.log('info', 'debug', "[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
       this.conf.destroy();
       return null;
     }
@@ -97,9 +95,7 @@ class Resizer {
     if (! this.conf.player.dimensions) {
       ratioOut = screen.width / screen.height;
     } else {
-      if (Debug.debug && Debug.resizer) {
-        console.log(`[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.conf.player.dimensions.width ,'x', this.conf.player.dimensions.height,'aspect ratio:', this.conf.player.dimensions.width / this.conf.player.dimensions.height)
-      }
+      this.logger.log('info', 'debug', `[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.conf.player.dimensions.width ,'x', this.conf.player.dimensions.height,'aspect ratio:', this.conf.player.dimensions.width / this.conf.player.dimensions.height)
       ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
     }
     
@@ -118,9 +114,7 @@ class Resizer {
       ar.ratio = ratioOut < fileAr ? ratioOut : fileAr;
     }
     else if(ar.type === AspectRatio.Reset){
-      if(Debug.debug){
-        console.log("[Scaler.js::modeToAr] Using original aspect ratio -", fileAr);
-      }
+      this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr);
       ar.ratio = fileAr;
     } else {
       return null;
@@ -135,9 +129,7 @@ class Resizer {
       return;
     }
   
-    if(Debug.debug){
-      console.log('[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', ar)
-    }
+    this.logger.log('info', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', ar)
 
     if (ar == null) {
       return;
@@ -166,17 +158,13 @@ class Resizer {
                     // check if property value is on the list of allowed values
                     // if it's not, we aren't allowed to start aard
                     if (bannedProperties[prop].allowedValues.indexOf(styleValue) === -1) {
-                      if (Debug.debug) {
-                        console.log("%c[Resizer::setAr] video style contains forbidden css property/value combo: ", "color: #900, background: #100", prop, " — we aren't allowed to start autoar.")
-                      }
+                      this.logger.log('error', 'debug', "%c[Resizer::setAr] video style contains forbidden css property/value combo: ", "color: #900, background: #100", prop, " — we aren't allowed to start autoar.")
                       return;
                     }
                   } else {
                     // no allowed values, no problem. We have forbidden property
                     // and this means aard can't start.
-                    if (Debug.debug) {
-                      console.log("%c[Resizer::setAr] video style contains forbidden css property: ", "color: #900, background: #100", prop, " — we aren't allowed to start autoar.")
-                    }
+                    this.logger.log('info', 'debug', "%c[Resizer::setAr] video style contains forbidden css property: ", "color: #900, background: #100", prop, " — we aren't allowed to start autoar.")
                     return;
                   }
                 }
@@ -195,9 +183,7 @@ class Resizer {
       // I'm not sure whether they do. Check that.
       ar = this.calculateRatioForLegacyOptions(ar);
       if (! ar) {
-        if (Debug.debug && Debug.resizer) {
-          console.log(`[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
-        }
+        this.logger.log('info', 'resizer', `[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
         return;
       }
       this.lastAr = {type: ar.type, ratio: ar.ratio}
@@ -238,16 +224,12 @@ class Resizer {
       var stretchFactors = this.scaler.calculateCrop(ar);
 
       if(! stretchFactors || stretchFactors.error){
-        if(Debug.debug){
-          console.log("[Resizer::setAr] <rid:"+this.resizerId+"> failed to set AR due to problem with calculating crop. Error:", (stretchFactors ? stretchFactors.error : stretchFactors));
-        }
+        this.logger.log('error', 'debug', "[Resizer::setAr] <rid:"+this.resizerId+"> failed to set AR due to problem with calculating crop. Error:", (stretchFactors ? stretchFactors.error : stretchFactors));
         if (stretchFactors.error === 'no_video'){
           this.conf.destroy();
         }
         if (stretchFactors.error === 'illegal_video_dimensions') {
-          if(Debug.debug){
-            console.log("[Resizer::setAr] <rid:"+this.resizerId+"> Illegal video dimensions found. We will pause everything.");
-          }
+          this.logger.log('error', 'debug', "[Resizer::setAr] <rid:"+this.resizerId+"> Illegal video dimensions found. We will pause everything.");
           // if we get illegal video dimensions, cssWatcher goes nuts. This is harmful,
           // so we stop it until that sorts itself out
           this.stopCssWatcher();
@@ -260,25 +242,17 @@ class Resizer {
          this.stretcher.applyConditionalStretch(stretchFactors, ar.ratio);
       }
 
-      if (Debug.debug) {
-        console.log("[Resizer::setAr] Processed stretch factors for ", this.stretcher.mode === Stretch.NoStretch ? 'stretch-free crop.' : 'crop with conditional stretch.', 'Stretch factors are:', stretchFactors);
-      }
+      this.logger.log('info', 'debug', "[Resizer::setAr] Processed stretch factors for ", this.stretcher.mode === Stretch.NoStretch ? 'stretch-free crop.' : 'crop with conditional stretch.', 'Stretch factors are:', stretchFactors);
 
     } else if (this.stretcher.mode === Stretch.Hybrid) {
       var stretchFactors = this.stretcher.calculateStretch(ar.ratio);
-      if (Debug.debug) {
-        console.log('[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
-      }
+      this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
     } else if (this.stretcher.mode === Stretch.Basic) {
       var stretchFactors = this.stretcher.calculateBasicStretch();
-      if (Debug.debug) {
-        console.log('[Resizer::setAr] Processed stretch factors for basic stretch. Stretch factors are:', stretchFactors);
-      }
+      this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic stretch. Stretch factors are:', stretchFactors);
     } else {
       var stretchFactors = {xFactor: 1, yFactor: 1}
-      if (Debug.debug) {
-        console.log('[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong', stretchFactors,"\n------[ i n f o   d u m p ]------\nstretcher:", this.stretcher);
-      }
+      this.logger.log('error', 'debug', '[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong', stretchFactors,"\n------[ i n f o   d u m p ]------\nstretcher:", this.stretcher);
     }
 
     this.zoom.applyZoom(stretchFactors);
@@ -320,10 +294,7 @@ class Resizer {
       const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth;
       const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight;
       
-      if (Debug.debug && Debug.mousemove) {
-        console.log("[Resizer::panHandler] mousemove.pageX, pageY:", event.pageX, event.pageY,
-        "\nrelativeX/Y:", relativeX, relativeY)
-      }
+      this.logger.log('info', 'mousemove', "[Resizer::panHandler] mousemove.pageX, pageY:", event.pageX, event.pageY, "\nrelativeX/Y:", relativeX, relativeY)
 
       this.setPan(relativeX, relativeY);
     }
@@ -343,9 +314,6 @@ class Resizer {
       this.pan.relativeOffsetX = -(relativeMousePosX * 1.1) + 0.55;
       this.pan.relativeOffsetY = -(relativeMousePosY * 1.1) + 0.55;
     }
-    // if(Debug.debug){
-    //   console.log("[Resizer::setPan] relative cursor pos:", relativeMousePosX, ",",relativeMousePosY, " | new pan obj:", this.pan)
-    // }
     this.restore();
   }
 
@@ -355,9 +323,7 @@ class Resizer {
   }
 
   startCssWatcher(){
-    if(Debug.debug) {
-      console.log("[Resizer.js::startCssWatcher] starting css watcher. Is resizer destroyed?", this.destroyed);
-    }
+    this.logger.log('info', 'cssWatcher', "[Resizer.js::startCssWatcher] starting css watcher. Is resizer destroyed?", this.destroyed);
     if (this.destroyed) {
       return;
     }
@@ -399,25 +365,19 @@ class Resizer {
             ths.cssCheck();
           }
         } catch (e) {
-          if(Debug.debug) {
-            console.log("[Resizer.js::scheduleCssWatcher] Css check failed. Error:", e);
-          }
+          this.logger.log('error', 'debug', "[Resizer.js::scheduleCssWatcher] Css check failed. Error:", e);
         }
       }, timeout);
   }
 
   stopCssWatcher() {
-    if (Debug.debug) {
-      console.log(`[Resizer.js] <${this.resizerId}> STOPPING CSS WATCHER!`)
-    }
+    this.logger.log('info', 'cssWatcher', `[Resizer.js] <${this.resizerId}> STOPPING CSS WATCHER!`)
     this.cssCheckDisabled = true;
     clearInterval(this.cssWatcherTimeout);
   }
 
   restore() {
-    if(Debug.debug){
-      console.log("[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio. this & settings:", {'a_lastAr': this.lastAr, 'this': this, "settings": this.settings} );
-    }
+    this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio. this & settings:", {'a_lastAr': this.lastAr, 'this': this, "settings": this.settings} );
     
     // this is true until we verify that css has actually been applied
     this.restore_wd = true;
@@ -481,9 +441,7 @@ class Resizer {
 
   computeOffsets(stretchFactors){
 
-    if (Debug.debug) {
-      console.log("[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.sites['@global'].videoAlignment);
-    }
+    this.logger.log('info', 'debug', "[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.sites['@global'].videoAlignment);
 
     const wdiff = this.conf.player.dimensions.width - this.conf.video.offsetWidth;
     const hdiff = this.conf.player.dimensions.height - this.conf.video.offsetHeight;
@@ -512,16 +470,14 @@ class Resizer {
       }
     }
 
-    if(Debug.debug) {
-      console.log("[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
-      '---- data in ----\n',
-      'player dimensions:', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
-      'video dimensions: ', {w: this.conf.video.offsetWidth, h: this.conf.video.offsetHeight},
-      'stretch factors:  ', stretchFactors,
-      'pan & zoom:       ', this.pan, this.zoom,
-      '\n\n---- data out ----\n',
-      'translate:', translate);
-    }
+    this.logger.log('info', 'debug', "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
+                    '---- data in ----\n',
+                    'player dimensions:', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
+                    'video dimensions: ', {w: this.conf.video.offsetWidth, h: this.conf.video.offsetHeight},
+                    'stretch factors:  ', stretchFactors,
+                    'pan & zoom:       ', this.pan, this.zoom,
+                    '\n\n---- data out ----\n',
+                    'translate:', translate);
 
     return translate; 
   }
@@ -583,18 +539,13 @@ class Resizer {
     // apply extra CSS here. In case of duplicated properties, extraCss overrides 
     // default styleString
     if (! this.video) {
-      if(Debug.debug) {
-        console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
-
-      }
+      this.logger.log('warn', 'debug', "[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
 
       this.conf.destroy();
       return;
     }
 
-    if (Debug.debug && Debug.resizer) {
-      console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
-    }
+    this.logger.log('info', 'resizer', "[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
     
     // save stuff for quick tests (before we turn numbers into css values):
     this.currentVideoSettings = {
@@ -633,8 +584,7 @@ class Resizer {
     
     if (this.restore_wd) {
       if (!this.video){
-        if(Debug.debug)
-          console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> Video element went missing, nothing to do here.")
+        this.logger.log('warn', 'debug', "[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> Video element went missing, nothing to do here.")
         return;
       }
       
@@ -658,14 +608,13 @@ class Resizer {
       // }
     }
     else{
-      if(Debug.debug)
-        console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> css applied. Style string:", styleString);
+      this.logger.log('info', 'resizer', "[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> css applied. Style string:", styleString);
     }
   }
 
   cssCheck(){
     if (this.cssCheckDisabled) {
-      throw "fucking dont"
+      // throw "fucking dont"
       return;
     }
     // this means we haven't set our CSS yet, or that we changed video.
@@ -676,17 +625,13 @@ class Resizer {
     
     // this means video went missing. videoData will be re-initialized when the next video is found
     if (!this.video){
-      if(Debug.debug && Debug.resizer) {
-        console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
-      }
+      this.logger.log('info', 'cssWatcher', "[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
       this.conf.destroy();
       return;
     }
     
     if(this.destroyed) {
-      if(Debug.debug && Debug.resizer) {
-        console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
-      }
+      this.logger.log('info', 'cssWatcher', "[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
       this.stopCssWatcher();
       return;
     }
@@ -705,9 +650,7 @@ class Resizer {
       cssValid &= this.currentPlayerStyleString === playerStyleString;
     }
     if (!cssValid){
-      if(Debug.debug && Debug.resizer) {
-        console.log(`%c[Resizer::cssCheck] <rid:${this.resizerId}> something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'});
-      }
+      this.logger.log('info', 'cssWatcher', `%c[Resizer::cssCheck] <rid:${this.resizerId}> something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'});
       this.restore();
       this.scheduleCssWatcher(10);
 
diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index 85a7d59..4e899cf 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -9,8 +9,9 @@ class Scaler {
   // internal variables
 
   // functions
-  constructor(videoData) {
+  constructor(videoData, logger) {
     this.conf = videoData;
+    this.logger = logger;
   }
   
 
@@ -25,9 +26,7 @@ class Scaler {
     var ratioOut;
 
     if (!this.conf.video) {
-      if(Debug.debug){
-        console.log("[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
-      }
+      this.logger.log('error', 'debug', "[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
       this.conf.destroy();
       return null;
     }
@@ -59,9 +58,7 @@ class Scaler {
       return ratioOut;
     }
     else if(ar.type === AspectRatio.Reset){
-      if(Debug.debug){
-        console.log("[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
-      }
+      this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
       ar.ar = fileAr;
       return fileAr;
     }
@@ -71,9 +68,7 @@ class Scaler {
 
   calculateCrop(ar) {
     if(!this.conf.video){
-      if (Debug.debug) {
-        console.log("[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.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.conf.destroy();
       return {error: "no_video"};
@@ -81,9 +76,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
-      if (Debug.debug) {
-        console.log("[Scaler::calculateCrop] Video has illegal dimensions. Video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
-      }
+      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);
 
       return {error: "illegal_video_dimensions"};
     }
@@ -94,20 +87,14 @@ class Scaler {
 
     // handle fuckie-wuckies
     if (!ar.ratio){
-      if (Debug.debug && Debug.scaler) {
-        console.log("[Scaler::calculateCrop] no ar?", ar.ratio, " -- we were given this mode:", ar);
-      }
+      this.logger.log('error', 'scaler', "[Scaler::calculateCrop] no ar?", ar.ratio, " -- we were given this mode:", ar);
       return {error: "no_ar", ratio: ar.ratio};
     }
 
-    if (Debug.debug && Debug.scaler) {
-      console.log("[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.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);
 
     if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){
-      if (Debug.debug && Debug.scaler) {
-        console.log("[Scaler::calculateCrop] ERROR — no (or invalid) this.conf.player.dimensions:",this.conf.player.dimensions);
-      }
+      this.logger.log('error', 'scaler', "[Scaler::calculateCrop] ERROR — no (or invalid) this.conf.player.dimensions:",this.conf.player.dimensions);
       return {error: "this.conf.player.dimensions_error"};
     }
 
@@ -124,9 +111,7 @@ class Scaler {
     }
 
   
-    if (Debug.debug && Debug.scaler) {
-      console.log("[Scaler::calculateCrop] ar is " ,ar.ratio, ", file ar is", fileAr, ", this.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
-    }
+    this.logger.log('info', 'scaler', "[Scaler::calculateCrop] ar is " ,ar.ratio, ", file ar is", fileAr, ", this.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
     
     var videoDimensions = {
       xFactor: 1,
@@ -152,9 +137,7 @@ class Scaler {
         videoDimensions.yFactor = videoDimensions.xFactor;
     }
     
-    if (Debug.debug && Debug.scaler) {
-      console.log("[Scaler::calculateCrop] Crop factor calculated — ", videoDimensions.xFactor);
-    }
+    this.logger.log('info', 'scaler', "[Scaler::calculateCrop] Crop factor calculated — ", videoDimensions.xFactor);
 
     return videoDimensions;
   }
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 10c737b..5cbfa9c 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -1,4 +1,3 @@
-import Debug from '../../conf/Debug';
 import Stretch from '../../../common/enums/stretch.enum';
 
 // računa vrednosti za transform-scale (x, y)
@@ -11,10 +10,11 @@ class Stretcher {
 
 
   // functions
-  constructor(videoData) {
+  constructor(videoData, logger) {
     this.conf = videoData;
     this.settings = videoData.settings;
     this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
+    this.logger = logger;
   }
 
   setStretchMode(stretchMode) {
@@ -120,9 +120,7 @@ class Stretcher {
         stretchFactors.xFactor = playerAr / videoAr;
         stretchFactors.yFactor = actualAr / videoAr;
 
-        if(Debug.debug){
-          console.log("[Stretcher.js::calculateStretch] stretching strategy 1")
-        }
+        this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 1")
       } else if ( actualAr >= videoAr) {
         // VERIFIED WORKS
 
@@ -132,18 +130,14 @@ class Stretcher {
         stretchFactors.xFactor = playerAr / videoAr;
         stretchFactors.yFactor = actualAr / videoAr;
 
-        if(Debug.debug){
-          console.log("[Stretcher.js::calculateStretch] stretching strategy 2")
-        }
+        this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 2")
       } else {
         // NEEDS CHECKING
         // player > video > actual — double pillarbox
         stretchFactors.xFactor = actualAr /  playerAr;
         stretchFactors.yFactor = 1;
         
-        if(Debug.debug){
-          console.log("[Stretcher.js::calculateStretch] stretching strategy 3")
-        }
+        this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 3")
       }
     } else {
       // player adds LETTERBOX
@@ -156,9 +150,7 @@ class Stretcher {
         stretchFactors.xFactor = actualAr / playerAr;
         stretchFactors.yFactor = videoAr / playerAr;
 
-        if(Debug.debug){
-          console.log("[Stretcher.js::calculateStretch] stretching strategy 4")
-        }
+        this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 4")
       } else if ( actualAr < videoAr ) {
         // NEEDS CHECKING 
 
@@ -168,9 +160,7 @@ class Stretcher {
         stretchFactors.xFactor =  actualAr / playerAr;
         stretchFActors.yFactor = actualAr / playerAr;
 
-        if(Debug.debug){
-          console.log("[Stretcher.js::calculateStretch] stretching strategy 5")
-        }
+        this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 5")
       } else {
         // VERIFIED CORRECT
 
@@ -179,9 +169,7 @@ class Stretcher {
         stretchFactors.xFactor = 1;
         stretchFactors.yFactor = actualAr / playerAr;
 
-        if(Debug.debug){
-          console.log("[Stretcher.js::calculateStretch] stretching strategy 6")
-        }
+        this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 6")
       }
     }
 
diff --git a/src/ext/lib/video-transform/Zoom.js b/src/ext/lib/video-transform/Zoom.js
index 16ba9eb..649b2fb 100644
--- a/src/ext/lib/video-transform/Zoom.js
+++ b/src/ext/lib/video-transform/Zoom.js
@@ -5,13 +5,14 @@ import Debug from '../../conf/Debug';
 
 class Zoom {
   // functions
-  constructor(videoData) {
+  constructor(videoData, logger) {
     this.scale = 1;
     this.logScale = 0;
     this.scaleStep = 0.1;
     this.minScale = -1;  // 50% (log2(0.5) = -1)
     this.maxScale = 3;   // 800% (log2(8) = 3)
     this.conf = videoData;
+    this.logger = logger;
   }
 
   reset(){
@@ -30,18 +31,14 @@ class Zoom {
   
     this.scale = Math.pow(2, this.logScale);
 
-    if (Debug.debug) {
-      console.log("[Zoom::zoomStep] changing zoom by", amount, ". New zoom level:", this.scale);
-    }
+    this.logger.log('info', 'debug', "[Zoom::zoomStep] changing zoom by", amount, ". New zoom level:", this.scale);
 
     this.conf.restoreAr();
     this.conf.announceZoom(this.scale);
   }
 
   setZoom(scale, no_announce){
-    if (Debug.debug) {
-      console.log("[Zoom::setZoom] Setting zoom to", scale, "!");
-    }
+    this.logger.log('info', 'debug', "[Zoom::setZoom] Setting zoom to", scale, "!");
 
     // NOTE: SCALE IS NOT LOGARITHMIC
     if(scale < Math.pow(2, this.minScale)) {
@@ -62,16 +59,12 @@ class Zoom {
     if (!stretchFactors) {
       return;
     }
-    if (Debug.debug) {
-      console.log("[Zoom::setZoom] Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
-    }
+    this.logger.log('info', 'debug', "[Zoom::setZoom] Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
 
     stretchFactors.xFactor *= this.scale;
     stretchFactors.yFactor *= this.scale;
 
-    if (Debug.debug) {
-      console.log("[Zoom::setZoom] Applying zoom. Stretch factors post:", stretchFactors);
-    }
+    this.logger.log('info', 'debug', "[Zoom::setZoom] Applying zoom. Stretch factors post:", stretchFactors);
   }
 }
 
diff --git a/src/ext/uw.js b/src/ext/uw.js
index b553026..1a4b599 100644
--- a/src/ext/uw.js
+++ b/src/ext/uw.js
@@ -5,6 +5,7 @@ import Settings from './lib/Settings';
 import ActionHandler from './lib/ActionHandler';
 import CommsClient from './lib/comms/CommsClient';
 import PageInfo from './lib/video-data/PageInfo';
+import Logger from './lib/Logger';
 
 if(Debug.debug){
   console.log("\n\n\n\n\n\n           ———    Sᴛλʀᴛɪɴɢ  Uʟᴛʀᴀᴡɪᴅɪꜰʏ    ———\n               <<   ʟᴏᴀᴅɪɴɢ ᴍᴀɪɴ ꜰɪʟᴇ   >>\n\n\n\n");
@@ -30,6 +31,7 @@ class UW {
     this.comms = undefined;
     this.settings = undefined;
     this.actionHandler = undefined;
+    this.logger = undefined;
   }
 
   async init(){
@@ -39,9 +41,8 @@ class UW {
   
     // init() is re-run any time settings change
     if (this.pageInfo) {
-      if(Debug.debug){
-        console.log("[uw::init] Destroying existing pageInfo", this.pageInfo);
-      }
+      // if this executes, logger must have been initiated at some point before this point
+      this.logger.log('info', 'debug', "[uw::init] Destroying existing pageInfo", this.pageInfo);
       this.pageInfo.destroy();
     }
     if (this.comms) {
@@ -54,51 +55,45 @@ class UW {
       await this.settings.init();
     }
   
-    this.comms = new CommsClient('content-client-port', this.settings);
+    if (!this.logger) {
+      this.logger = new Logger(this.settings.getLoggingOptions);
+    }
+
+    this.comms = new CommsClient('content-client-port', this.settings, this.logger);
   
     // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar
     // If extension is soft-disabled, don't do shit
 
     var extensionMode = this.settings.getExtensionMode();
 
-    if(Debug.debug) {
-      console.log("[uw::init] Extension mode:" + (extensionMode < 0 ? "disabled" : extensionMode == '1' ? 'basic' : 'full'));
-    }
+    this.logger.log('info', 'debug', "[uw::init] Extension mode:" + (extensionMode < 0 ? "disabled" : extensionMode == '1' ? 'basic' : 'full'));
 
     const isSiteDisabled = extensionMode === ExtensionMode.Disabled
 
     if (isSiteDisabled) {
       if (this.settings.getExtensionMode('@global') === ExtensionMode.Disabled) {
-        if (Debug.debug) {
-          console.log("[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED")
-        }
+        this.logger.log('info', 'debug', "[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED")
         return;
       }
     }
   
     try {
-      this.pageInfo = new PageInfo(this.comms, this.settings, extensionMode, isSiteDisabled);
-      if(Debug.debug){
-        console.log("[uw.js::setup] pageInfo initialized. Here's the object:", this.pageInfo);
-      }
+      this.pageInfo = new PageInfo(this.comms, this.settings, this.logger, extensionMode, isSiteDisabled);
+      this.logger.log('info', 'debug', "[uw.js::setup] pageInfo initialized. Here's the object:", this.pageInfo);
       this.comms.setPageInfo(this.pageInfo);
   
-      if(Debug.debug) {
-        console.log("[uw.js::setup] will try to initate ActionHandler. Settings are:", this.settings, this.settings.active)
-      }
+      this.logger.log('info', 'debug', "[uw.js::setup] will try to initate ActionHandler. Settings are:", this.settings, this.settings.active)
 
       // start action handler only if extension is enabled for this site
       if (!isSiteDisabled) {
-        this.actionHandler = new ActionHandler(this.pageInfo);
+        this.actionHandler = new ActionHandler(this.pageInfo, this.logger);
         this.actionHandler.init();
         
-        if(Debug.debug) {
-          console.log("[uw.js::setup] ActionHandler initiated:", this.actionHandler);
-        }
+        this.logger.log('info', 'debug', "[uw.js::setup] ActionHandler initiated:", this.actionHandler);
       }
 
     } catch (e) {
-      console.log("[uw::init] FAILED TO START EXTENSION. Error:", e);
+      this.logger.log('error', 'debug', "[uw::init] FAILED TO START EXTENSION. Error:", e);
     }