From 83e2c8f6ca924337ad811588206402d24d76b432 Mon Sep 17 00:00:00 2001 From: swfz Date: Sat, 7 Dec 2024 06:13:40 +0900 Subject: [PATCH] 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 | 8 ++--- content_script/presenter_subscribe.ts | 13 ++++---- content_script/stream.ts | 1 - lib/sakura.ts | 46 ++++++++++++--------------- lib/streamer.ts | 2 ++ lib/subscriber.ts | 32 +++++++++++++++---- 6 files changed, 58 insertions(+), 44 deletions(-) diff --git a/background/background.ts b/background/background.ts index 0b573da..25e7c51 100644 --- a/background/background.ts +++ b/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; }); diff --git a/content_script/presenter_subscribe.ts b/content_script/presenter_subscribe.ts index b49ceaa..74688b2 100644 --- a/content_script/presenter_subscribe.ts +++ b/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') { diff --git a/content_script/stream.ts b/content_script/stream.ts index 43447f8..895b87b 100644 --- a/content_script/stream.ts +++ b/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'); }); } }); diff --git a/lib/sakura.ts b/lib/sakura.ts index 6e30f9c..b115c24 100644 --- a/lib/sakura.ts +++ b/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('.pwa-webclient__iframe'); - if (iframeElement === null) { - sendResponse({ message: 'Error: not found irfame...' }); - return; - } + const iframeElement = document.querySelector('.pwa-webclient__iframe'); + if (iframeElement === null) { + sendResponse({ message: 'Error: not found irfame...' }); + return; + } - const p = iframeElement?.contentWindow?.document.querySelector('.ProseMirror p'); + const p = iframeElement?.contentWindow?.document.querySelector('.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('.chat-rtf-box__send'); - sendButton?.click(); + const sendButton = iframeElement?.contentWindow?.document.querySelector('.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,19 +46,14 @@ 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); }); } @@ -64,7 +61,6 @@ const addSubscribePageNumber = (iframeElement: HTMLIFrameElement) => { } }); - console.log('sakura observe'); observer.observe(observeElement, { subtree: true, childList: true }); }; diff --git a/lib/streamer.ts b/lib/streamer.ts index 6908826..9a12c9d 100644 --- a/lib/streamer.ts +++ b/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`, diff --git a/lib/subscriber.ts b/lib/subscriber.ts index 0914e57..0d752d3 100644 --- a/lib/subscriber.ts +++ b/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('.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('.new-chat-message__container'); + if (commentContainer === null) return ''; + + console.log(commentContainer); + + return commentContainer.getAttribute('aria-label')?.split(', ').at(-1); }, - commentExtractFn: (el) => el.querySelector('.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とかに移動