From 4012235831b05a0a365bdc5fc381ce53426c4ad3 Mon Sep 17 00:00:00 2001 From: Kazuki Yamada Date: Fri, 22 Dec 2023 23:03:18 +0900 Subject: [PATCH] fix: fix codes for new node and packages --- app/scripts/background.ts | 7 +- app/scripts/content/apply-checker.ts | 2 +- app/scripts/content/channe-grouper.ts | 10 ++- app/scripts/content/channel-observer.ts | 65 ++++++++++--------- .../utils/extension-running-checker.ts | 2 +- 5 files changed, 48 insertions(+), 38 deletions(-) diff --git a/app/scripts/background.ts b/app/scripts/background.ts index 8d95242..8d286e4 100644 --- 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 index 38f5852..a128257 100644 --- 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 index 2ab414b..eb9ec2a 100644 --- 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 index 2550269..8a3f500 100644 --- 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 { @@ -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 index f6d74f0..51f9b95 100644 --- 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;