fix: use observer

README.md

@@ -20,3 +20,8 @@ OPENREC.tv上でのチャットを、画面上に表示するChrome拡張機能
 yarn
 yarn build
 ```
+
+## ログ
+
+- 2024/08/07 1.0.3
+  - コメントが表示されない不具合を修正しました

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",

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;