fix: fix codes for new node and packages

yamadashy · Dec 22, 2023 · 4012235 · 4012235
1 parent 3112942
commit 4012235
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 38 deletions.
diff --git a/app/scripts/background.ts b/app/scripts/background.ts
@@ -10,7 +10,12 @@ chrome.tabs.query({}, async (tabs) => {
 
     // Skip execute on discarded tab
     if (tab.discarded) {
-      return;
+      continue;
+    }
+
+    // Under some circumstances a Tab may not be assigned an ID
+    if (tab.id === undefined) {
+      continue;
     }
 
     await chrome.scripting.insertCSS({

diff --git a/app/scripts/content/apply-checker.ts b/app/scripts/content/apply-checker.ts
@@ -1,4 +1,4 @@
-import * as $ from 'jquery/dist/jquery.slim';
+import $ from 'jquery/dist/jquery.slim';
 import { SELECTOR_CHANNEL_LIST_ITEMS } from './dom-constants';
 
 /**

diff --git a/app/scripts/content/channe-grouper.ts b/app/scripts/content/channe-grouper.ts
@@ -1,5 +1,5 @@
 // modules
-import * as $ from 'jquery/dist/jquery.slim';
+import $ from 'jquery/dist/jquery.slim';
 import 'requestidlecallback-polyfill';
 import * as domConstants from './dom-constants';
 import { DATA_KEY_CHANNEL_NAME, DATA_KEY_CHANNEL_PREFIX, DATA_KEY_RAW_CHANNEL_NAME } from './dom-constants';
@@ -12,7 +12,11 @@ const GROUPING_IDLE_CALLBACK_TIMEOUT = 3 * 1000;
  * Channel Grouping Class
  */
 export default class ChannelGrouper {
-  private idleCallbackId: number;
+  private idleCallbackId: number | null;
+
+  constructor() {
+    this.idleCallbackId = null;
+  }
 
   groupingAllByPrefixOnIdle(): void {
     if (this.idleCallbackId !== null) {
@@ -64,7 +68,7 @@ export default class ChannelGrouper {
       if (isApplied && $channelName.data(DATA_KEY_CHANNEL_PREFIX)) {
         prefix = $channelName.data(DATA_KEY_CHANNEL_PREFIX);
       } else if (regChannelMatch.test(channelName)) {
-        prefix = channelName.match(regChannelMatch)[1];
+        prefix = channelName.match(regChannelMatch)![1];
       } else {
         prefix = '';
       }

diff --git a/app/scripts/content/channel-observer.ts b/app/scripts/content/channel-observer.ts
@@ -1,5 +1,5 @@
 // modules
-import * as EventEmitter from 'eventemitter3';
+import { EventEmitter } from 'eventemitter3';
 import * as domConstants from './dom-constants';
 import { logger } from './logger';
 
@@ -10,17 +10,34 @@ const UPDATE_CHANNEL_LIST_MIN_INTERVAL = 200;
  * @extends EventEmitter
  */
 export default class ChannelObserver extends EventEmitter<'update'> {
-  private observer: MutationObserver;
   private isObserving: boolean;
   private lastUpdatedTime: number;
-  private debounceEmitUpdateTimeoutId: number;
+  private debounceEmitUpdateTimeoutId: number | null;
+  private channelListObserver: MutationObserver;
 
   constructor() {
     super();
-    this.observer = null;
     this.isObserving = false;
     this.lastUpdatedTime = 0;
     this.debounceEmitUpdateTimeoutId = null;
+    this.channelListObserver = new MutationObserver((mutations): void => {
+      logger.labeledLog('Observed channel dom change');
+
+      // Observe added channel list item
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((addedNode) => {
+          if (addedNode instanceof HTMLElement) {
+            const channelListItemNameElem = addedNode.querySelector(domConstants.SELECTOR_CHANNEL_ITEM_NAME_SELECTOR);
+            if (channelListItemNameElem !== null) {
+              this.observeChannelListItemName(channelListItemNameElem);
+            }
+          }
+        });
+      });
+
+      // Emit update
+      this.debounceEmitUpdate();
+    });
   }
 
   async startObserve(): Promise<void> {
@@ -47,7 +64,7 @@ export default class ChannelObserver extends EventEmitter<'update'> {
 
     // Force re-observe on workspace tab changed
     const workspace = document.querySelector(domConstants.SELECTOR_WORKSPACE);
-    const observer = new MutationObserver((): void => {
+    const workspaceObserver = new MutationObserver((): void => {
       logger.labeledLog('Workspace tab changed');
 
       this.debounceEmitUpdate();
@@ -56,7 +73,13 @@ export default class ChannelObserver extends EventEmitter<'update'> {
       this.disableObserver();
       this.enableObserver();
     });
-    observer.observe(workspace, {
+
+    if (!workspace) {
+      logger.labeledLog('Workspace element not found');
+      return;
+    }
+
+    workspaceObserver.observe(workspace, {
       attributes: true,
       attributeFilter: ['aria-label'],
     });
@@ -73,26 +96,6 @@ export default class ChannelObserver extends EventEmitter<'update'> {
       return;
     }
 
-    // Initialize observer
-    if (!this.observer) {
-      this.observer = new MutationObserver((mutations): void => {
-        logger.labeledLog('Observed channel dom change');
-
-        // Observe added channel list item
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((addedNode: Element) => {
-            const channelListItemNameElem = addedNode.querySelector(domConstants.SELECTOR_CHANNEL_ITEM_NAME_SELECTOR);
-            if (channelListItemNameElem !== null) {
-              this.observeChannelListItemName(channelListItemNameElem);
-            }
-          });
-        });
-
-        // Emit update
-        this.debounceEmitUpdate();
-      });
-    }
-
     // Observe elements
     this.observeChannelListContainer(channelListContainer);
     document.querySelectorAll(domConstants.SELECTOR_CHANNEL_ITEM_NAME_SELECTOR).forEach((channelListItemElem) => {
@@ -107,16 +110,14 @@ export default class ChannelObserver extends EventEmitter<'update'> {
       return;
     }
 
-    if (this.observer) {
-      this.observer.disconnect();
-      this.isObserving = false;
-    }
+    this.channelListObserver.disconnect();
+    this.isObserving = false;
   }
 
   protected observeChannelListContainer(channelListContainerElem: Node): void {
     logger.labeledLog('Observe channel list container');
 
-    this.observer.observe(channelListContainerElem, {
+    this.channelListObserver.observe(channelListContainerElem, {
       childList: true,
       // NOTE: If set true, cause infinity loop. b/c observe channel name dom change.
       subtree: false,
@@ -126,7 +127,7 @@ export default class ChannelObserver extends EventEmitter<'update'> {
   protected observeChannelListItemName(channelListItemNameElem: Node): void {
     logger.labeledLog('Observe channel list item name');
 
-    this.observer.observe(channelListItemNameElem, {
+    this.channelListObserver.observe(channelListItemNameElem, {
       attributes: true,
       attributeFilter: ['data-qa'],
     });

diff --git a/app/scripts/content/utils/extension-running-checker.ts b/app/scripts/content/utils/extension-running-checker.ts
@@ -1,5 +1,5 @@
 export function isAlreadyRunningExtension(identifier: string): boolean {
-  const meta: HTMLMetaElement = document.querySelector(`meta[name="${identifier}"]`);
+  const meta: HTMLMetaElement | null = document.querySelector(`meta[name="${identifier}"]`);
 
   if (meta) {
     return true;