From 7f6618d4efc7a5722b2e4027d5e13c0ae29ef16b Mon Sep 17 00:00:00 2001
From: seelx3 <seelx3@gmail.com>
Date: Wed, 7 Aug 2024 20:02:40 +0900
Subject: [PATCH] fix: use observer

---
 README.md      |  5 +++++
 manifest.json  |  2 +-
 src/content.ts | 28 ++++++++++++++++------------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 4a33a51..7d4afab 100644
--- a/README.md
+++ b/README.md
@@ -20,3 +20,8 @@ OPENREC.tv上でのチャットを、画面上に表示するChrome拡張機能
 yarn
 yarn build
 ```
+
+## ログ
+
+- 2024/08/07 1.0.3
+  - コメントが表示されない不具合を修正しました
diff --git a/manifest.json b/manifest.json
index 9734efc..6755755 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "OPENREC.tv Chat on Screen",
   "description": "OPENREC.tvのチャットを、スクリーン上に表示します。",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "manifest_version": 3,
   "icons": {
     "16": "icons/icon-16.png",
diff --git a/src/content.ts b/src/content.ts
index 4cfcc4d..55e3848 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -64,6 +64,21 @@ let context: CanvasRenderingContext2D | null;
 let lines: ChatRecord[][] = [];
 let fontsize: number;
 
+// obserber
+const observer = new MutationObserver((mutationsList) => {
+  for (const mutation of mutationsList) {
+    if (mutation.type === 'childList') {
+      mutation.addedNodes.forEach((node) => {
+        const target = node as HTMLElement;
+        let comment = site.getComments(target);
+        if (!comment) return;
+        core.modify();
+        core.attachComment(comment);
+      });
+    }
+  }
+});
+
 let core = {
   init: () => {
     // console.log(SCRIPTNAME, "init");
@@ -81,7 +96,7 @@ let core = {
     context = canvas.getContext("2d");
 
     core.addStyle();
-    core.listenComments();
+    observer.observe(board, { childList: true });
     core.scrollComments();
   },
   addStyle: () => {
@@ -109,17 +124,6 @@ let core = {
       "";
     head.appendChild(style);
   },
-  listenComments: () => {
-    // console.log(SCRIPTNAME, "listenComments");
-    if (!board) return;
-    board.addEventListener("DOMNodeInserted", (e) => {
-      const target = e.target as HTMLElement;
-      let comment = site.getComments(target);
-      if (!comment) return;
-      core.modify();
-      core.attachComment(comment);
-    });
-  },
   modify: (flag = false) => {
     // console.log(SCRIPTNAME, "modify");
     if (!display || !context) return;