fix: make logs easier to read (#1065)

Author: sidvishnoi

src/background/services/background.ts

@@ -190,6 +190,7 @@ export class Background {
           }
           await this.updateVisualIndicatorsForCurrentTab();
         } else {
+          if (!tabIds.length) continue;
           this.logger.info(
             `[focus change] stop monetization for window=${windowId}, tabIds=${JSON.stringify(tabIds)}`,
           );
@@ -211,7 +212,7 @@ export class Background {
   bindMessageHandler() {
     this.browser.runtime.onMessage.addListener(
       async (message: ToBackgroundMessage, sender: Runtime.MessageSender) => {
-        this.logger.debug('Received message', message);
+        this.logger.debug('Received message', message.action, message.payload);
         try {
           switch (message.action) {
             // region Popup

src/shared/logger.ts

@@ -10,6 +10,15 @@ export const createLogger = (level: log.LogLevelDesc = 'DEBUG') => {
   const factory = log.methodFactory;
   log.methodFactory = (methodName, logLevel, loggerName) => {
     const raw = factory(methodName, logLevel, loggerName);
+    if (loggerName?.toString().includes('/')) {
+      const [a, b] = loggerName.toString().split('/', 2);
+      return raw.bind(
+        log,
+        `%c${a}%c${b}`,
+        'font-weight: bold; text-transform: uppercase; background: #2f8785; color: #fff; padding-inline: 5px;',
+        'background: #def4ef; color: #000; padding-inline: 5px;',
+      );
+    }
     return raw.bind(
       log,
       `%c${loggerName as string}`,