Here is a clean and descriptive commit message:

```
Fix comment extraction for various platforms

This commit updates the `commentExtractConfig` object to include platform-specific configurations for extracting comments. It also adds a new property `isTargetElement` to each platform's configuration, which allows us to filter out non-target elements.

Additionally, this commit fixes the comment extraction function for the Zoom platform by selecting the correct element and then extracting the comment text from it.

Changes:

* Updated `commentExtractConfig` object with platform-specific configurations
* Added `isTargetElement` property to each platform's configuration
* Fixed comment extraction function for Zoom platform

Signed-off-by: [Your Name]
```

background/background.ts

@@ -1,4 +1,4 @@
-import { messageHandler } from '../lib/util';
+import { info, messageHandler } from '../lib/util';
 
 let subscriberTabId;
 let streamTabId;
@@ -17,17 +17,15 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
   if (req.command === 'SendSubscribedComments') {
     console.log(streamTabId);
     chrome.tabs.sendMessage(streamTabId, { command: req.command, comments: req.comments });
-    // chrome.tabs.sendMessage(subscriberTabId, { command: 'debug subscriber', comments: req.comments });
   }
 
   if (req.command === 'SakuraComment') {
-    console.log('sakura', req);
+    info('sakura', req);
+    // console.log('sakura', req);
     chrome.tabs.sendMessage(subscriberTabId, { command: req.command, comment: req.comment }, messageHandler);
     sendResponse({ message: 'send' });
   }
 
-  // console.log(sender);
-  // console.log(sendResponse);
   return true;
 });
 

content_script/presenter_subscribe.ts

@@ -1,8 +1,9 @@
 import { postSakuraComment } from '../lib/sakura';
 import { subscribeComments, commentExtractConfig, extractAllComments } from '../lib/subscriber';
+import { messageHandler } from '../lib/util';
 
 console.log('loaded google slide comment stream');
-let commentSubscribed = false;
+let observer = { disconnect: () => {} };
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   console.log(message);
@@ -18,12 +19,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       return;
     }
 
-    if (!commentSubscribed) {
-      subscribeComments(platform, observeElement, sendResponse);
-      commentSubscribed = true;
-      console.log('subscribe presenter usertool started');
-      chrome.runtime.sendMessage({ command: 'Load', from: 'subscriber', tabId: message.tabId });
-    }
+    observer.disconnect();
+    observer = subscribeComments(platform, observeElement, sendResponse);
+    console.log('subscribe comment list started');
+    chrome.runtime.sendMessage({ command: 'Load', from: 'subscriber', tabId: message.tabId }, messageHandler);
   } else if (message.command === 'Download') {
     extractAllComments(sendResponse);
   } else if (message.command === 'SakuraComment') {

content_script/stream.ts

@@ -66,7 +66,6 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         renderClaps(claps, p, clapElement, clapElementBottom, clapElementRight, config);
       }
       comments.forEach((comment) => addComment(comment, boxElement, containerHeight, config));
-      // console.log('before onmessage');
     });
   }
 });

lib/sakura.ts

@@ -1,28 +1,30 @@
-import { messageHandler } from './util';
+import { info, messageHandler } from './util';
 
 // FIXME: 1ページで複数投稿があるとうまく投稿されないケースがある
 const postSakuraComment = (comment: string, sendResponse) => {
-  console.log('さくらこめんと', comment);
+  chrome.storage.sync.get(['config'], ({ config }) => {
+    if (!config.plant) return;
 
-  const iframeElement = document.querySelector<HTMLIFrameElement>('.pwa-webclient__iframe');
-  if (iframeElement === null) {
-    sendResponse({ message: 'Error: not found irfame...' });
-    return;
-  }
+    const iframeElement = document.querySelector<HTMLIFrameElement>('.pwa-webclient__iframe');
+    if (iframeElement === null) {
+      sendResponse({ message: 'Error: not found irfame...' });
+      return;
+    }
 
-  const p = iframeElement?.contentWindow?.document.querySelector<HTMLElement>('.ProseMirror p');
+    const p = iframeElement?.contentWindow?.document.querySelector<HTMLElement>('.ProseMirror p');
 
-  if (p === null || p === undefined) {
-    sendResponse({ message: 'Error: not found p...' });
-    return;
-  }
+    if (p === null || p === undefined) {
+      sendResponse({ message: 'Error: not found p...' });
+      return;
+    }
 
-  p.innerText = comment;
+    p.innerText = comment;
 
-  const sendButton = iframeElement?.contentWindow?.document.querySelector<HTMLButtonElement>('.chat-rtf-box__send');
-  sendButton?.click();
+    const sendButton = iframeElement?.contentWindow?.document.querySelector<HTMLButtonElement>('.chat-rtf-box__send');
+    sendButton?.click();
 
-  sendResponse({ message: 'Success Sakura Post' });
+    sendResponse({ message: 'Success Sakura Post' });
+  });
 };
 
 const addSubscribePageNumber = (iframeElement: HTMLIFrameElement) => {
@@ -33,8 +35,8 @@ const addSubscribePageNumber = (iframeElement: HTMLIFrameElement) => {
     '.docs-material-menu-button-flat-default-caption',
   );
 
-  if (observeElement === null) {
-    console.log('not exist observe element');
+  if (observeElement === null || observeElement === undefined) {
+    info('not exist observe element');
     return;
   }
 
@@ -44,27 +46,21 @@ const addSubscribePageNumber = (iframeElement: HTMLIFrameElement) => {
 
     if (added && removed && added > removed) {
       chrome.storage.sync.get(['sakura'], ({ sakura }) => {
-        console.log('sakura config loaded', sakura);
-        console.log(added, removed, records);
+        info(added, removed, sakura, records);
 
         const plantCommentRows = sakura[added];
 
         if (plantCommentRows !== undefined) {
           plantCommentRows.forEach((commentRow) => {
-            console.log('every sakura comment row');
-
             setTimeout(() => {
-              console.log('before send message');
               chrome.runtime.sendMessage({ command: 'SakuraComment', from: 'slide', comment: commentRow.comment }, messageHandler);
-              // broadcastChannel.postMessage(commentRow.comment);
             }, commentRow.seconds * 1000);
           });
         }
       });
     }
   });
 
-  console.log('sakura observe');
   observer.observe(observeElement, { subtree: true, childList: true });
 };
 

lib/streamer.ts

@@ -35,6 +35,8 @@ const commentElementStyle = (config, windowWidth, top) => {
 };
 const clapElementStyle = (bottom, right) => {
   return {
+    width: '100px',
+    height: '100px',
     position: 'absolute',
     bottom: `${bottom}px`,
     right: `${right}px`,

lib/subscriber.ts

@@ -1,6 +1,9 @@
+import { info } from './util';
+
 interface Extractor {
-  commentNodeClassName: string;
-  listNodeSelector: string;
+  commentNodeClassName: string; // migrationしたら不要
+  listNodeSelector: string; // migrationしたら不要
+  isTargetElement: (el: HTMLElement) => boolean;
   listNodeExtractFn: () => HTMLElement | null | undefined;
   commentExtractFn: (el: HTMLElement) => string | null | undefined;
 }
@@ -12,21 +15,36 @@ const commentExtractConfig: CommentExtractorConfig = {
   gslide: {
     commentNodeClassName: 'punch-viewer-speaker-questions',
     listNodeSelector: '.punch-viewer-speaker-questions',
+    isTargetElement: (el) => false,
     listNodeExtractFn: () => null,
     commentExtractFn: (el) => el.children[1].children[2]['innnerText'],
   },
   zoom: {
     commentNodeClassName: 'ReactVirtualized__Grid__innerScrollContainer',
     listNodeSelector: '.ReactVirtualized__Grid__innerScrollContainer',
+    isTargetElement: (el) => {
+      return ['ReactVirtualized__Grid__innerScrollContainer', 'eactVirtualized__Grid ReactVirtualized__List chat-virtualized-list'].some(
+        (className) => {
+          return el.className.match(className);
+        },
+      );
+    },
     listNodeExtractFn: () => {
       const iframeElement = document.querySelector<HTMLIFrameElement>('.pwa-webclient__iframe');
       if (iframeElement === null) {
         return null;
       }
 
-      return iframeElement.contentWindow?.document.querySelector('.ReactVirtualized__Grid__innerScrollContainer');
+      return iframeElement.contentWindow?.document.querySelector('.chat-container__chat-list');
+    },
+    commentExtractFn: (el) => {
+      const commentContainer = el.querySelector<HTMLElement>('.new-chat-message__container');
+      if (commentContainer === null) return '';
+
+      console.log(commentContainer);
+
+      return commentContainer.getAttribute('aria-label')?.split(', ').at(-1);
     },
-    commentExtractFn: (el) => el.querySelector<HTMLElement>('.new-chat-message__text-content')?.innerText,
   },
 };
 
@@ -36,12 +54,12 @@ const subscribeComments = (platform, observeElement, sendResponse) => {
       .filter((record) => {
         const element = record.target as Element;
 
-        return element.className === commentExtractConfig[platform].commentNodeClassName;
+        return commentExtractConfig[platform].isTargetElement(element);
       })
       .map((record) => record.addedNodes[0]);
 
     const comments = Array.from(nodes).map((node) => commentExtractConfig[platform].commentExtractFn(node));
-    console.log(comments);
+    info(comments);
     return comments;
   };
 
@@ -52,6 +70,8 @@ const subscribeComments = (platform, observeElement, sendResponse) => {
   observer.observe(observeElement, { subtree: true, childList: true });
 
   sendResponse({ screenType: 'presenter', message: 'A listener has been added to the Comment side.' });
+
+  return observer;
 };
 
 // TODO: downloaderとかに移動