diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js
index 60eba42..803e0ce 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.js
@@ -253,9 +253,7 @@ class ActionHandler {
   }
 
   handleKeydown(event) {
-    if(Debug.debug  && Debug.keyboard ){
-      console.log("%c[ActionHandler::handleKeydown] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keydown, "event:", event);
-    }
+    this.logger.log('info', 'keyboard', "%c[ActionHandler::handleKeydown] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keydown, "event:", event)
 
     if (this.preventAction()) {
       this.logger.log('info', 'keyboard', "[ActionHandler::handleKeydown] we are in a text box or something. Doing nothing.");
diff --git a/src/ext/lib/Logger.js b/src/ext/lib/Logger.js
index 8768a44..4001603 100644
--- a/src/ext/lib/Logger.js
+++ b/src/ext/lib/Logger.js
@@ -1,20 +1,83 @@
+import currentBrowser from '../conf/BrowserDetect';
+
 class Logger {
   constructor(conf) {
-    this.conf = conf;
+    this.initLogger();
+    if (conf) {
+      this.conf = conf;
+    }
     this.history = [];
     this.startTime = performance.now();
     this.temp_disable = false;
   }
 
+  initLogger() {
+    const ths = this;
+    const br = currentBrowser.firefox ? browser : chrome;
+    br.storage.onChanged.addListener( (changes, area) => {
+      if (Debug.debug && Debug.debugStorage) {
+        console.log("[Logger::<storage/on change>] Settings have been changed outside of here. Updating active settings. Changes:", changes, "storage area:", area);
+        if (changes['uwLogger'] && changes['uwLogger'].newValue) {
+          console.log("[Logger::<storage/on change>] new settings object:", JSON.parse(changes.uwLogger.newValue));
+        }
+      }
+      if(changes['uwLogger'] && changes['uwLogger'].newValue) {
+        ths.conf = JSON.parse(changes.uwLogger.newValue);
+      }
+    });
+  }
+
+  async init() {
+    this.conf = await this.getSaved();
+  }
+
   clear() {
     this.log = [];
     this.startTime = performance.now();
   }
 
   setConf(conf) {
-    this.conf = conf;
+    this.conf = conf;  // effective immediately
+    // also persist settings:
+    if (currentBrowser.firefox || currentBrowser.edge) {
+      extensionConf.version = this.version;
+      return browser.storage.local.set( {'uwLogger': JSON.stringify(this.conf)});
+    } else if (currentBrowser.chrome) {
+      return chrome.storage.local.set( {'uwLogger': JSON.stringify(this.logger)});
+    }
   }
 
+  async getSaved() {
+    let ret;
+    
+    if (currentBrowser.firefox) {
+      ret = await browser.storage.local.get('uwLogger');
+    } else if (currentBrowser.chrome) {
+      ret = await new Promise( (resolve, reject) => {
+        chrome.storage.local.get('uwLogger', (res) => resolve(res));
+      });
+    } else if (currentBrowser.edge) {
+      ret = await new Promise( (resolve, reject) => {
+        browser.storage.local.get('uwLogger', (res) => resolve(res));
+      });
+    }
+
+    if (Debug.debug && Debug.debugStorage) {
+      try {
+        console.log("[Logger::getSaved] Got settings:", JSON.parse(ret.uwLogger));
+      } catch (e) {
+        console.log("[Logger::getSaved] No settings.")
+      }
+    }
+
+    try {
+      return JSON.parse(ret.uwLogger);
+    } catch(e) {
+      return {logToFile: false, logToConsole: false, consoleOptions: {}, fileOptions: {}};
+    }
+  }
+
+
   // allow syncing of start times between bg and page scripts.
   // may result in negative times in the log file, but that doesn't 
   // really matter
diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js
index 7054baa..d5f1f40 100644
--- a/src/ext/lib/ar-detect/ArDetector.js
+++ b/src/ext/lib/ar-detect/ArDetector.js
@@ -389,14 +389,8 @@ class ArDetector {
     if( execTime > this.settings.active.arDetect.autoDisable.maxExecutionTime ){
       //  this.detectionTimeoutEventCount++;
   
-      // if(Debug.debug){
-        // console.log("[ArDetect::getTimeout] Exec time exceeded maximum allowed execution time. This has now happened " +  this.detectionTimeoutEventCount + " times in a row.");
-      // }
   
       // if( this.detectionTimeoutEventCount >= this.settings.active.arDetect.autoDisable.consecutiveTimeoutCount ){
-      //   if (Debug.debug){
-      //     console.log("[ArDetect::getTimeout] Maximum execution time was exceeded too many times. Automatic aspect ratio detection has been disabled.");
-      //   }
   
       //   Comms.sendToBackgroundScript({cmd: 'disable-autoar', reason: 'Automatic aspect ratio detection was taking too much time and has been automatically disabled in order to avoid lag.'});
       //   _ard_stop();
@@ -581,10 +575,6 @@ class ArDetector {
       // we don't do any corrections on frames confirmed black
       this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] Black frame analysis suggests this frame is black or too dark. Doing nothing.`, "color: #fa3", bfanalysis);
       return;
-    } else {
-      // if (Debug.debug && Debug.arDetect) {
-      //   console.log("%c[ArDetect::frameCheck] Black frame analysis suggests this frame is not completely black. Doing further analysis,", "color: #3fa", bfanalysis);
-      // }
     }
 
     
diff --git a/src/ext/lib/ar-detect/GuardLine.js b/src/ext/lib/ar-detect/GuardLine.js
index 5d4cd89..ca03448 100644
--- a/src/ext/lib/ar-detect/GuardLine.js
+++ b/src/ext/lib/ar-detect/GuardLine.js
@@ -92,7 +92,6 @@ class GuardLine {
     // should succeed by default. Also need to check bottom, for cases where only one edge is known
     
     if(! fallbackMode && (! this.blackbar.top || ! this.blackbar.bottom)) {
-      // console.log("NO EDGE WAS DETECTED. THIS TEST IS POINTLESS. btw guardline")
       return { success: true };
     }
 
diff --git a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
index 74a7d47..8931667 100644
--- a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
+++ b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
@@ -12,6 +12,7 @@ class EdgeDetect{
 
   constructor(ardConf){
     this.conf = ardConf;
+    this.logger = ardConf.logger;
     this.settings = ardConf.settings;
 
     this.sampleWidthBase = this.settings.active.arDetect.edgeDetection.sampleWidth << 2; // corrected so we can work on imageData
@@ -43,9 +44,7 @@ class EdgeDetect{
           bars = this.edgePostprocess(edgeCandidates, this.conf.canvas.height);
         // }
       } catch (e) {
-        if (Debug.debug) {
-          console.log("%c[EdgeDetect::findBars] find bars failed.", "background: #f00, color: #000", e);
-        }
+        this.logger.log('error', 'arDetect', '%c[EdgeDetect::findBars] find bars failed.', 'background: #f00, color: #000', e);
         return {status: EdgeStatus.AR_UNKNOWN}
       }
     } else {
@@ -58,89 +57,80 @@ class EdgeDetect{
 
   findCandidates(image, sampleCols, guardLineOut){
     try {
-    let upper_top, upper_bottom, lower_top, lower_bottom;
-    
-    // const cols_a = sampleCols.slice(0);
-    const cols_a = new Array(sampleCols.length);
-    const res_top = [];
-    
-    for (let i = 0; i < cols_a.length; i++) {
-      cols_a[i] = {
-        id: i,
-        value: sampleCols[i],
-      };
-    }
+      let upper_top, upper_bottom, lower_top, lower_bottom;
+      
+      // const cols_a = sampleCols.slice(0);
+      const cols_a = new Array(sampleCols.length);
+      const res_top = [];
+      
+      for (let i = 0; i < cols_a.length; i++) {
+        cols_a[i] = {
+          id: i,
+          value: sampleCols[i],
+        };
+      }
 
-    const cols_b = cols_a.slice(0);
-    const res_bottom = [];
-    
-    // console.log("[EdgeDetect::findCandidates] cols a, b (initial):", cols_a, cols_b);
-
-    
-    this.colsThreshold = sampleCols.length * this.settings.active.arDetect.edgeDetection.minColsForSearch;
-    if (this.colsThreshold == 0)
-      this.colsThreshold = 1;
-    
-    this.blackbarThreshold = this.conf.blackLevel + this.settings.active.arDetect.blackbar.threshold;
-    this.imageThreshold = this.blackbarThreshold + this.settings.active.arDetect.blackbar.imageThreshold;
-    
-    // if guardline didn't fail and imageDetect did, we don't have to check the upper few pixels
-    // but only if upper and lower edge are defined. If they're not, we need to check full height
-    if(guardLineOut){
-      if(guardLineOut.imageFail && !guardLineOut.blackbarFail && this.conf.guardLine.blackbar.top) {
-        upper_top = this.conf.guardLine.blackbar.top;
-        upper_bottom = this.conf.canvas.height >> 1;
-        lower_top = upper_bottom;
-        lower_bottom = this.conf.guardLine.blackbar.bottom;
-      } else if (! guardLineOut.imageFail && !guardLineOut.blackbarFail && this.conf.guardLine.blackbar.top) {
-        // ta primer se lahko zgodi tudi zaradi kakšnega logotipa. Ker nočemo, da nam en jeben
-        // logotip vsili reset razmerja stranic, se naredimo hrvata in vzamemo nekaj varnostnega 
-        // pasu preko točke, ki jo označuje guardLine.blackbar. Recimo 1/8 višine platna na vsaki strani.
-        // a logo could falsely trigger this case, so we need to add some extra margins past
-        // the point marked by guardLine.blackbar. Let's say 1/8 of canvas height on either side.
-        upper_top = 0;
-        upper_bottom = this.conf.guardLine.blackbar.top + (this.conf.canvas.height >> 3);
-        lower_top = this.conf.guardLine.blackbar.bottom - (this.conf.canvas.height >> 3);
-        lower_bottom = this.conf.canvas.height - 1;
-      } else {
+      const cols_b = cols_a.slice(0);
+      const res_bottom = [];
+      
+      this.colsThreshold = sampleCols.length * this.settings.active.arDetect.edgeDetection.minColsForSearch;
+      if (this.colsThreshold == 0)
+        this.colsThreshold = 1;
+      
+      this.blackbarThreshold = this.conf.blackLevel + this.settings.active.arDetect.blackbar.threshold;
+      this.imageThreshold = this.blackbarThreshold + this.settings.active.arDetect.blackbar.imageThreshold;
+      
+      // if guardline didn't fail and imageDetect did, we don't have to check the upper few pixels
+      // but only if upper and lower edge are defined. If they're not, we need to check full height
+      if(guardLineOut){
+        if(guardLineOut.imageFail && !guardLineOut.blackbarFail && this.conf.guardLine.blackbar.top) {
+          upper_top = this.conf.guardLine.blackbar.top;
+          upper_bottom = this.conf.canvas.height >> 1;
+          lower_top = upper_bottom;
+          lower_bottom = this.conf.guardLine.blackbar.bottom;
+        } else if (! guardLineOut.imageFail && !guardLineOut.blackbarFail && this.conf.guardLine.blackbar.top) {
+          // ta primer se lahko zgodi tudi zaradi kakšnega logotipa. Ker nočemo, da nam en jeben
+          // logotip vsili reset razmerja stranic, se naredimo hrvata in vzamemo nekaj varnostnega 
+          // pasu preko točke, ki jo označuje guardLine.blackbar. Recimo 1/8 višine platna na vsaki strani.
+          // a logo could falsely trigger this case, so we need to add some extra margins past
+          // the point marked by guardLine.blackbar. Let's say 1/8 of canvas height on either side.
+          upper_top = 0;
+          upper_bottom = this.conf.guardLine.blackbar.top + (this.conf.canvas.height >> 3);
+          lower_top = this.conf.guardLine.blackbar.bottom - (this.conf.canvas.height >> 3);
+          lower_bottom = this.conf.canvas.height - 1;
+        } else {
+          upper_top = 0;
+          upper_bottom = (this.conf.canvas.height >> 1) /*- parseInt(this.conf.canvas.height * this.settings.active.arDetect.edgeDetection.middleIgnoredArea);*/
+          lower_top = (this.conf.canvas.height >> 1) /*+ parseInt(this.conf.canvas.height * this.settings.active.arDetect.edgeDetection.middleIgnoredArea);*/
+          lower_bottom = this.conf.canvas.height - 1;
+        }
+      } else{
         upper_top = 0;
         upper_bottom = (this.conf.canvas.height >> 1) /*- parseInt(this.conf.canvas.height * this.settings.active.arDetect.edgeDetection.middleIgnoredArea);*/
         lower_top = (this.conf.canvas.height >> 1) /*+ parseInt(this.conf.canvas.height * this.settings.active.arDetect.edgeDetection.middleIgnoredArea);*/
         lower_bottom = this.conf.canvas.height - 1;
       }
-    } else{
-      upper_top = 0;
-      upper_bottom = (this.conf.canvas.height >> 1) /*- parseInt(this.conf.canvas.height * this.settings.active.arDetect.edgeDetection.middleIgnoredArea);*/
-      lower_top = (this.conf.canvas.height >> 1) /*+ parseInt(this.conf.canvas.height * this.settings.active.arDetect.edgeDetection.middleIgnoredArea);*/
-      lower_bottom = this.conf.canvas.height - 1;
-    }
 
-    if(Debug.debug && Debug.debugArDetect){
-      console.log("[EdgeDetect::findCandidates] searching for candidates on ranges", upper_top, "<->", upper_bottom, ";", lower_top, "<->", lower_bottom);
-    }
+      this.logger.log('info', 'arDetect', '[EdgeDetect::findCandidates] searching for candidates on ranges', upper_top, '<->', upper_bottom, ';', lower_top, '<->', lower_bottom);
+      
+      var upper_top_corrected = upper_top * this.conf.canvasImageDataRowLength;
+      var upper_bottom_corrected = upper_bottom * this.conf.canvasImageDataRowLength;
+      var lower_top_corrected = lower_top * this.conf.canvasImageDataRowLength;
+      var lower_bottom_corrected = lower_bottom * this.conf.canvasImageDataRowLength;
+      
+      // if(Debug.debugCanvas.enabled){
+        // this._columnTest_dbgc(image, upper_top_corrected, upper_bottom_corrected, cols_a, res_top, false);
+        // this._columnTest_dbgc(image, lower_top_corrected, lower_bottom_corrected, cols_b, res_bottom, true);
+      // } else {
+        this._columnTest3_cross(image, upper_top_corrected, upper_bottom_corrected, cols_a, res_top, false);
+        this._columnTest3_cross(image, lower_top_corrected, lower_bottom_corrected, cols_b, res_bottom, true);
+      // }
+      
+      this.logger.log('info', 'arDetect', '[EdgeDetect::findCandidates] candidates found -->', {res_top: res_top, res_bottom: res_bottom});
     
-    var upper_top_corrected = upper_top * this.conf.canvasImageDataRowLength;
-    var upper_bottom_corrected = upper_bottom * this.conf.canvasImageDataRowLength;
-    var lower_top_corrected = lower_top * this.conf.canvasImageDataRowLength;
-    var lower_bottom_corrected = lower_bottom * this.conf.canvasImageDataRowLength;
-    
-    // if(Debug.debugCanvas.enabled){
-      // this._columnTest_dbgc(image, upper_top_corrected, upper_bottom_corrected, cols_a, res_top, false);
-      // this._columnTest_dbgc(image, lower_top_corrected, lower_bottom_corrected, cols_b, res_bottom, true);
-    // } else {
-      this._columnTest3_cross(image, upper_top_corrected, upper_bottom_corrected, cols_a, res_top, false);
-      this._columnTest3_cross(image, lower_top_corrected, lower_bottom_corrected, cols_b, res_bottom, true);
-    // }
-    
-    if (Debug.debug && Debug.debugArDetect){
-      console.log("[EdgeDetect::findCandidates] candidates found -->", {res_top: res_top, res_bottom: res_bottom});
-    }
-
-   
-    return {res_top: res_top, res_bottom: res_bottom};
-  
+      return {res_top: res_top, res_bottom: res_bottom};
     } catch (e) {
-      console.log("[EdgeDetect::findCandidates] there was an error", e);
+      this.logger.log('error', 'debug', '[EdgeDetect::findCandidates] there was an error while finding candidates:', e);
     }
   }
 
@@ -333,7 +323,7 @@ class EdgeDetect{
         }
       }
     } catch (e) {
-      console.log("\n\nuwu fucky wucky:", e, "\n\n")
+      this.logger.log('error', 'debug', '[EdgeDetect::edgeDetect] There was an error:', e);
     }
     
     return {
diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js
index d1343d2..e530fa9 100644
--- a/src/ext/lib/video-data/PageInfo.js
+++ b/src/ext/lib/video-data/PageInfo.js
@@ -22,8 +22,6 @@ class PageInfo {
 
     this.logger = logger;
 
-    console.log("this.logger:", logger, this.logger)
-
     if (comms){ 
       this.comms = comms;
     }
@@ -77,7 +75,7 @@ class PageInfo {
         this.comms.unregisterVideo(video.id)
         video.destroy();
       } catch (e) {
-        console.log("unabel to destroy video!", e)
+        this.logger.log('error', ['debug', 'init'], '[PageInfo::destroy] unable to destroy video! Error:', e);
       }
     }
 
@@ -197,8 +195,7 @@ class PageInfo {
       } else {
         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, this.logger);
-        // console.log("[PageInfo::rescan] v is:", v)
+        v = new VideoData(video, this.settings, this);
         v.initArDetection();
         this.videos.push(v);
 
@@ -213,9 +210,6 @@ class PageInfo {
     //
     // if we're left withotu videos on the current page, we unregister the page.
     // if we have videos, we call register.
-    // if(Debug.debug) {
-    //   console.log("[PageInfo::rescan] Comms:", this.comms, "\nvideos.length:", this.videos.length, "\nold video count:", oldVideoCount)
-    // }
     if (this.comms) {
       if (this.videos.length != oldVideoCount) { // only if number of videos changed, tho
         if (this.videos.length > 0) {
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 15f404b..71528e2 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -5,14 +5,14 @@ import ArDetector from '../ar-detect/ArDetector';
 
 class VideoData {
   
-  constructor(video, settings, pageInfo, logger){
+  constructor(video, settings, pageInfo){
     this.arSetupComplete = false;
     this.video = video;
     this.destroyed = false;
     this.settings = settings;
     this.pageInfo = pageInfo;
     this.extensionMode = pageInfo.extensionMode;
-    this.logger = logger;
+    this.logger = pageInfo.logger;
 
     this.vdid = (Math.random()*100).toFixed();
     this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
@@ -40,15 +40,10 @@ class VideoData {
     this.logger.log('info', 'debug', "%c[VideoData::ctor] Initial resizer reset!", {background: '#afd', color: '#132'});
     this.resizer.reset();
 
-    
-    if (Debug.init) {
-      console.log("[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode);
-    }
+    this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid, '\nextension mode:', this.extensionMode)
 
     this.pageInfo.initMouseActionHandler(this);
-
     this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
-
   }
 
   onVideoDimensionsChanged(mutationList, observer) {
@@ -283,10 +278,6 @@ class VideoData {
   }
 
   isPlaying() {
-    // console.log("is playing? video:", this.video, "ctime:", this.video.currentTime, 
-    // "paused/ended:", this.video.paused, this.video.ended,
-    // "is playing?", this.video && this.video.currentTime > 0 && !this.video.paused && !this.video.ended);
-
     return this.video && this.video.currentTime > 0 && !this.video.paused && !this.video.ended;
   }
 }
diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 89fe7ac..7e3b5fb 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -40,7 +40,6 @@ 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.canPan = this.settings.active.miscSettings.mousePan.enabled;
     } else {
       this.canPan = false;
@@ -192,7 +191,6 @@ class Resizer {
     }
 
     if (! this.video) {
-      // console.log("No video detected.")
       this.conf.destroy();
     }
 
@@ -215,14 +213,12 @@ class Resizer {
       var 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 ? 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.loggger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> Illegal video dimensions found. We will pause everything.`)
         }
         return;
       }
@@ -269,7 +265,6 @@ class Resizer {
   }
 
   panHandler(event, forcePan) {
-    // console.log("this.conf.canPan:", this.conf.canPan)
     if (this.canPan || forcePan) {
       if(!this.conf.player || !this.conf.player.element) {
         return;
diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index 4e899cf..38dacc6 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -120,16 +120,9 @@ class Scaler {
       actualHeight: 0,  // height of the video (excluding letterbox) when <video> tag height is equal to height
     }
   
-    // if(Debug.debug){
-    //   console.log("[Scaler::calculateCrop] Player dimensions?", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
-    // }
-  
     if (fileAr < ar.ratio){
       // imamo letterbox zgoraj in spodaj -> spremenimo velikost videa (a nikoli širše od ekrana)
       // letterbox -> change video size (but never to wider than monitor width)
-        // if (Debug.debug && Debug.scaler) {
-        //   console.log(`%c[Scaler::calculateCrop] Trying to determine scaling factors. Aspect ratios:\n      file: ${fileAr.toFixed(3)}\n    player: ${playerAr.toFixed(3)}\n    target: ${ar.ratio.toFixed(3)}\n-----------------------`, "color: #2ba");
-        // }
         videoDimensions.xFactor = Math.min(ar.ratio, playerAr) / fileAr;
         videoDimensions.yFactor = videoDimensions.xFactor;
     } else {
diff --git a/src/ext/uw-bg.js b/src/ext/uw-bg.js
index e708f9b..b741841 100644
--- a/src/ext/uw-bg.js
+++ b/src/ext/uw-bg.js
@@ -30,8 +30,11 @@ class UWServer {
   }
 
   async setup() {
-    this.settings = new Settings();
+    // logger is the first thing that goes up
+    this.logger = new Logger();
+    await this.logger.init();
 
+    this.settings = new Settings({logger: this.logger});
     await this.settings.init();
     this.comms = new CommsServer(this);
 
@@ -42,7 +45,6 @@ class UWServer {
       chrome.tabs.onActivated.addListener(function(m) {ths.onTabSwitched(m)});
     }
 
-    console.log("will schedule gcframe")
     this.scheduleGc();
   }
 
@@ -54,18 +56,13 @@ class UWServer {
 
   async injectCss(css, sender) {
     try {
-      if (Debug.debug) {
-        console.log("[uwbg::injectCss] Injecting CSS:", css, sender);
-      }
       if (BrowserDetect.firefox || BrowserDetect.edge) {
         browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
       } else if (BrowserDetect.chrome) {
         chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
       }
     } catch (e) {
-      if (Debug.debug) {
-        console.error("Error while injecting css:", {error: e, css, sender});
-      }
+      this.logger.log('error','debug', '[UwServer::injectCss] Error while injecting css:', {error: e, css, sender});
     }
   }
   async removeCss(css, sender) {
@@ -76,7 +73,9 @@ class UWServer {
         // this doesn't work currently, but hopefully chrome will get this feature in the future
         chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
       }
-    } catch (e) { }
+    } catch (e) { 
+      this.logger.log('error','debug', '[UwServer::injectCss] Error while removing css:', {error: e, css, sender});
+    }
   }
 
   async replaceCss(oldCss, newCss, sender) {
@@ -99,7 +98,6 @@ class UWServer {
       clearTimeout(ths._gctimeout);
       ths.gcFrames();
 
-
       ths._gctimeoutgcTimeout = ths.scheduleGc(5000);
     }, timeout);
   }
@@ -124,26 +122,20 @@ class UWServer {
   async onTabSwitched(activeInfo){
     this.hasVideos = false;
 
-    if(Debug.debug)
-      console.log("[uw-bg::onTabSwitched] TAB CHANGED, GETTING INFO FROM MAIN TAB");
-
     try {
       this.currentTabId = activeInfo.tabId;   // just for readability
 
-      var tab;
+      let tab;
       if (BrowserDetect.firefox) {
-        var tab = await browser.tabs.get(this.currentTabId);
+        tab = await browser.tabs.get(this.currentTabId);
       } else if (BrowserDetect.chrome) {
-        var tab = await this._promisifyTabsGet(chrome, this.currentTabId);
+        tab = await this._promisifyTabsGet(chrome, this.currentTabId);
       }
 
       this.currentSite = this.extractHostname(tab.url);
+      this.logger.log('info', 'debug', '[UwServer::onTabSwitched] user switched tab. New site:', this.currentSite);
     } catch(e) {
-      console.log(e);
-    }
-
-    if(Debug.debug) {
-      console.log("TAB SWITCHED!", this.currentSite)
+      this.logger.log('error', 'debug', '[UwServer::onTabSwitched] there was a problem getting currnet site:', e)
     }
 
     this.selectedSubitem = {
@@ -176,9 +168,7 @@ class UWServer {
   }
 
   registerVideo(sender) {
-    if (Debug.debug && Debug.comms) {
-      console.log("[UWServer::registerVideo] registering video.\nsender:", sender);
-    }
+    this.logger.log('info', 'comms', '[UWServer::registerVideo] Registering video.\nsender:', sender);
 
     const tabHostname = this.extractHostname(sender.tab.url);
     const frameHostname = this.extractHostname(sender.url);
@@ -221,15 +211,11 @@ class UWServer {
       }
     }
 
-    if (Debug.debug && Debug.comms) {
-      console.log("[UWServer::registerVideo] video registered. current videoTabs:", this.videoTabs);
-    }
+    this.logger.log('info', 'comms', '[UWServer::registerVideo] Video registered. current videoTabs:', this.videoTabs);
   }
 
   unregisterVideo(sender) {
-    if (Debug.debug && Debug.comms) {
-      console.log("[UWServer::unregisterVideo] unregistering video.\nsender:", sender);
-    }
+    this.logger.log('info', 'comms', '[UwServer::unregisterVideo] Unregistering video.\nsender:', sender);
     if (this.videoTabs[sender.tab.id]) {
       if ( Object.keys(this.videoTabs[sender.tab.id].frames).length <= 1) {
         delete this.videoTabs[sender.tab.id]
@@ -239,15 +225,11 @@ class UWServer {
         }
       }
     }
-    if (Debug.debug && Debug.comms) {
-      console.log("[UWServer::ungisterVideo] video unregistered. current videoTabs:", this.videoTabs);
-    }
+    this.logger.log('info', 'comms', '[UwServer::unregisterVideo] Video has been unregistered. Current videoTabs:', this.videoTabs);
   }
 
   setSelectedTab(menu, subitem) {
-    if (Debug.debug && Debug.comms) {
-      console.log("[uw-bg::setSelectedTab] saving selected tab for", menu, ":", subitem)
-    }
+    this.logger.log('info', 'comms', '[UwServer::setSelectedTab] saving selected tab for', menu, ':', subitem);
     this.selectedSubitem[menu] = subitem;
   }
 
diff --git a/src/ext/uw.js b/src/ext/uw.js
index 2286781..db88dda 100644
--- a/src/ext/uw.js
+++ b/src/ext/uw.js
@@ -39,6 +39,39 @@ class UW {
       console.log("[uw::main] loading configuration ...");
     }
   
+    // logger init is the first thing that needs to run
+    try {
+      if (!this.logger) {
+        const loggingOptions = {
+          logToFile: false,
+          logToConsole: true,
+          fileOptions: {
+            // really the same stuff as consoleOptions
+          },
+          consoleOptions: {
+            enabled: true, // if logging is enabled at all
+            'debug': true,
+            'init': true,
+            'keyboard': false,
+            'mousemove': false,
+            'actionHandler': false,
+            'comms': true,
+            'playerDetect': true,
+            'resizer': true,
+            'scaler': true,
+            'stretcher': true,
+            'videoRescan': false,
+            'arDetect': false,
+            'arDetect_verbose': false,
+          }
+        };      
+        // this.logger = new Logger(this.settings.getLoggingOptions);
+        this.logger = new Logger(loggingOptions);
+      }
+    } catch (e) {
+      console.error("logger init failed!", e)
+    }
+
     // init() is re-run any time settings change
     if (this.pageInfo) {
       // if this executes, logger must have been initiated at some point before this point
@@ -49,43 +82,15 @@ class UW {
       this.comms.destroy();
     }
   
+    
+
     if (!this.settings) {
       var ths = this;
-      this.settings = new Settings(undefined, () => ths.init());
+      this.settings = new Settings({updateCallback: () => ths.init(), logger: this.logger});
       await this.settings.init();
     }
   
-    try {
-    if (!this.logger) {
-      const loggingOptions = {
-        logToFile: false,
-        logToConsole: true,
-        fileOptions: {
-          // really the same stuff as consoleOptions
-        },
-        consoleOptions: {
-          enabled: true, // if logging is enabled at all
-          'debug': true,
-          'init': true,
-          'keyboard': false,
-          'mousemove': false,
-          'actionHandler': false,
-          'comms': true,
-          'playerDetect': true,
-          'resizer': true,
-          'scaler': true,
-          'stretcher': true,
-          'videoRescan': false,
-          'arDetect': false,
-          'arDetect_verbose': false,
-        }
-      };      
-      // this.logger = new Logger(this.settings.getLoggingOptions);
-      this.logger = new Logger(loggingOptions);
-    }
-    } catch (e) {
-      console.error("logger init failed!", e)
-    }
+
 
     this.comms = new CommsClient('content-client-port', this.settings, this.logger);
   
diff --git a/src/options/App.vue b/src/options/App.vue
index c07fb56..f1a8471 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="settingsInitialized">
 
     <!-- POPUPS -->
     <div v-if="anyOpenedPopups"
@@ -136,6 +136,7 @@ export default {
       selectedTab: "general",
       selectedTabTitle: "General settings",
       settings: {},
+      logger: {},
       settingsInitialized: false,
       editActionPopupVisible: false,
       editActionIndex: -1,
@@ -148,8 +149,12 @@ export default {
     }
   },
   async created () {
-    this.settings = new Settings(undefined, this.updateSettings);
+    this.logger = new Logger();
+    await this.logger.init();
+
+    this.settings = new Settings({updateCallback: this.updateSettings, logger: this.logger});
     await this.settings.init();
+    
     this.settingsInitialized = true;
   },
   components: {
diff --git a/src/options/AutodetectionSettings.vue b/src/options/AutodetectionSettings.vue
index 7d2baa3..3725ed7 100644
--- a/src/options/AutodetectionSettings.vue
+++ b/src/options/AutodetectionSettings.vue
@@ -610,7 +610,6 @@ export default {
       ctx.drawWindow(window,0, 0, 10, 10, "rgba(0,0,0,0)");
       this.fallbackModeAvailable = true;
     } catch (e) {
-      // console.log("DrawWindow failed:", e)
       this.fallbackModeAvailable = false;
     }
   },
@@ -634,7 +633,6 @@ export default {
       return 'user-defined';
     },
     setConfirmationThresholds(sens) {
-      console.log("setting conf treshold", sens)
       if (sens === 'sensitive') {
         this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold = 3;
         this.settings.active.arDetect.edgeDetection.confirmationThreshold = 1;
diff --git a/src/options/controls-settings/command-builder/CommandAddEdit.vue b/src/options/controls-settings/command-builder/CommandAddEdit.vue
index dc30391..2ba70bc 100644
--- a/src/options/controls-settings/command-builder/CommandAddEdit.vue
+++ b/src/options/controls-settings/command-builder/CommandAddEdit.vue
@@ -104,11 +104,6 @@ export default {
       }
       this.customArgumentValue = this.action.customArg;
     }
-    
-    // console.log("this.actionList", ActionList, this.ActionList)
-    // for(const a in ActionList) {
-    //   console.log(a);
-    // }
   },
   mounted() {
     
diff --git a/src/options/options.js b/src/options/options.js
index 8d0c61b..e1d5dcd 100644
--- a/src/options/options.js
+++ b/src/options/options.js
@@ -1,6 +1,3 @@
-// console.log("global browser", browser, global.browser)
-// global.browser = require('webextension-polyfill')
-
 import Vue from 'vue'
 import App from './App'
 
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 6a7168b..fad052f 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="popup flex flex-column no-overflow">
+  <div v-if="settingsInitialized" 
+       class="popup flex flex-column no-overflow"
+  >
     <div class="header flex-row flex-nogrow flex-noshrink">
       <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
     </div>
@@ -178,6 +180,8 @@ import ExtensionMode from '../common/enums/extension-mode.enum';
 
 export default {
   data () {
+    const logger = new Logger();
+
     return {
       selectedTab: 'video',
       selectedFrame: '__all',
@@ -192,7 +196,9 @@ export default {
       site: null,
       currentZoom: 1,
       execAction: new ExecAction(),
-      settings: new Settings(undefined, () => this.updateConfig()),
+      settings: {},
+      settingsInitialized: false,
+      logger: {},
       siteTabDisabled: false,
       videoTabDisabled: false,
       canShowVideoTab: {canShow: true, warning: true},
@@ -200,7 +206,13 @@ export default {
     }
   },
   async created() {
+    this.logger = new Logger();
+    await this.logger.init();
+
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: logger});
     await this.settings.init();
+    this.settingsInitialized = true;
+
     this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
     this.execAction.setSettings(this.settings);
 
@@ -243,14 +255,10 @@ export default {
     },
     getSite() {
       try {
-        if (Debug.debug) {
-          console.log("[popup.js] requesting current site");
-        }
+        this.logger.log('info','popup', '[popup::getSite] Requesting current site ...')
         this.port.postMessage({cmd: 'get-current-site'});
       } catch (e) {
-        if (Debug.debug) {
-          console.log("[popup::getSite] sending get-current-site failed for some reason. Reason:", e)
-        }
+        this.logger.log('error','popup','[popup::getSite] sending get-current-site failed for some reason. Reason:', e);
       }
     },
     getRandomColor() {
@@ -293,10 +301,7 @@ export default {
       this.canShowVideoTab = {canShow: canShow, warning: warning};
     },
     processReceivedMessage(message, port) {
-      if (Debug.debug && Debug.comms) {
-        console.log("[popup.js] received message set-c", message);
-        console.log("[popup.js] message cloned set-c", JSON.parse(JSON.stringify(message)));
-      }
+      this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
 
       if (message.cmd === 'set-current-site'){
         if (this.site) {
diff --git a/src/popup/panels/DefaultSettingsPanel.vue b/src/popup/panels/DefaultSettingsPanel.vue
index 49c0379..a4e57d9 100644
--- a/src/popup/panels/DefaultSettingsPanel.vue
+++ b/src/popup/panels/DefaultSettingsPanel.vue
@@ -161,7 +161,6 @@ export default {
         }
         site = this.site;
       }
-      // console.log("SETTINGS FOR SITE", site, "option", option, JSON.parse(JSON.stringify(this.settings.active.sites)))
       if (this.settings.active.sites[site]) {
         return this.settings.active.sites[site][option];
       } else {
diff --git a/src/popup/panels/SiteDetailsPanel.vue b/src/popup/panels/SiteDetailsPanel.vue
index 3fc46b6..3a4bc01 100644
--- a/src/popup/panels/SiteDetailsPanel.vue
+++ b/src/popup/panels/SiteDetailsPanel.vue
@@ -155,14 +155,12 @@ export default {
     settings: Object,
   },
   created() {
-    console.log("created!")
     try {
       this.videoManualQs = this.settings.active.sites[this.site].DOM.video.manual || this.videoManualQs;
       this.videoQs = this.settings.active.sites[this.site].DOM.video.querySelectors;
       this.videoCss = this.settings.active.sites[this.site].DOM.video.additionalCss;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
-      console.log("failed to load settings for the site — for video stuff")
     }
     
     try {
@@ -172,16 +170,13 @@ export default {
       this.playerParentNodeIndex = this.settings.active.sites[this.site].DOM.player.videoAncestor;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
-      console.log("failed to load settings for the site — for video stuff")
     }
 
     try {
       this.playerCss = this.settings.active.sites[this.site].css || '';
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
-      console.log("failed to load settings for the site — for video stuff")
     }
-    console.log("created — got settings:", this.settings)
   },
   methods: {
     ensureSettings(scope) {