Web Worker を Chrome でも実行可能に (#84)

Author: sopisoft

package.json

@@ -3,7 +3,7 @@
   "displayName": "d-anime comments viewer",
   "description": "Player addon for d-anime",
   "author": "sopi",
-  "version": "2024.9.17",
+  "version": "2024.9.18",
   "private": true,
   "license": "GPL-3.0",
   "type": "module",

src/@types/global.d.ts

@@ -3,5 +3,6 @@
 /// <reference lib="esnext" />
 /// <reference types="react" />
 /// <reference types="react-dom" />
+/// <reference types="vite/client" />
 
 declare module "*.md";

src/content_scripts/comments.ts

@@ -15,41 +15,57 @@
     along with d-comments.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { type config_keys, getConfig } from "@/config";
-import { threads as getThreads } from "./state";
+import { getConfig } from "@/config";
+import browser from "webextension-polyfill";
+
+import comments_ngfilter from "./comments_ngfilter?worker&url";
+import comments_worker from "./comments_worker?worker&url";
 
 type message = {
   comments: nv_comment[];
 };
 
-const sort_worker = new Worker(
-  new URL("./comments_worker.ts", import.meta.url),
-  {
-    type: "module",
-  }
-);
+async function newWorker(url: string): Promise<Worker> {
+  const script = await fetch(url).then((r) => r.text());
+  const blob = new Blob([script], { type: "application/javascript" });
+  const objURL = URL.createObjectURL(blob);
+  const worker = new Worker(objURL, { type: "module" });
+  worker.addEventListener("error", (_e) => {
+    URL.revokeObjectURL(objURL);
+  });
+  return worker;
+}
 
-const ngfilter_worker = new Worker(
-  new URL("./comments_ngfilter.ts", import.meta.url),
-  { type: "module" }
+const ngfilter_worker = await newWorker(
+  browser.runtime.getURL(comments_ngfilter)
 );
+const sort_worker = await newWorker(browser.runtime.getURL(comments_worker));
 
 async function build_ng_filter_message(comments: nv_comment[]) {
   const id = Math.random().toString(36).slice(-8);
 
   const ng_words = await getConfig("comment_ng_words");
-  const enabled_ng_users = ng_words.filter((w) => w.enabled);
-  const regex = enabled_ng_users.map((w) => w.value).join("|");
+  const enabled_ng_words = ng_words.filter((w) => w.enabled);
+  const regex = enabled_ng_words.map((w) => w.value).join("|");
 
   const ng_users = await getConfig("comment_ng_users");
-  const enabled_ng_words = ng_users
+  const enabled_ng_users = ng_users
     .filter((u) => u.enabled)
     .map((u) => u.value);
 
+  if (enabled_ng_words.length === 0) {
+    return {
+      id: id,
+      ng_words_regex: "skip-ng-words-filter",
+      ng_users: enabled_ng_users,
+      comments: comments,
+    };
+  }
+
   const ng_filter_message = {
     id: id,
     ng_words_regex: new RegExp(regex, "i"),
-    ng_users: enabled_ng_words,
+    ng_users: enabled_ng_users,
     comments: comments,
   };
   return ng_filter_message;

src/content_scripts/comments_ngfilter.ts

@@ -19,20 +19,27 @@
 
 type message = {
   id: string;
-  ng_words_regex: RegExp;
+  ng_words_regex: RegExp | "skip-ng-words-filter";
   ng_users: string[];
   comments: nv_comment[];
 };
 
 self.addEventListener("message", async (e: MessageEvent<message>) => {
   const { id, comments } = e.data;
   const { ng_words_regex, ng_users } = e.data;
-  const filtered = comments.filter((comment) => {
-    if (ng_users.includes(comment.userId)) return false;
-    if (ng_words_regex.test(comment.body)) return false;
-    return true;
-  });
-  self.postMessage({ id, comments: filtered });
+  if (ng_words_regex === "skip-ng-words-filter") {
+    const filtered = comments.filter((comment) => {
+      return !ng_users.includes(comment.userId);
+    });
+    self.postMessage({ id, comments: filtered });
+  } else {
+    const filtered = comments.filter((comment) => {
+      return (
+        !ng_users.includes(comment.userId) && !ng_words_regex.test(comment.body)
+      );
+    });
+    self.postMessage({ id, comments: filtered });
+  }
 });
 
 export default {};

src/content_scripts/components/canvas.tsx

@@ -97,21 +97,13 @@ export class Renderer {
     if (this.options.format !== "v1") {
       console.error("format should be v1");
     }
-    if (this.threads.length === 0) {
-      console.error("no threads");
-    }
   }
   setThread(threads: V1Thread[]) {
     this.threads = threads;
-    this.canvas.dataset.commentsCount = threads
-      .map((thread) => thread.commentCount)
-      .reduce((a, b) => a + b)
-      .toString();
     this.start();
   }
   setOptions(options: Options) {
     this.options = options;
-    console.log("setOptions", JSON.stringify(options, null, 2));
     this.start();
   }
   getOptions() {
@@ -202,8 +194,8 @@ async function initRenderer() {
   });
 
   if (!(await getConfig("show_comments_in_niconico_style"))) return;
-  const threads = getThreads()?.threads || [];
-  renderer.setThread(threads);
+  const threads = getThreads()?.threads;
+  if (threads) renderer.setThread(threads);
 }
 
 export default initRenderer;

src/content_scripts/components/scroll.tsx

@@ -98,6 +98,10 @@ export function Scroll() {
     if (new_comments.length !== comments.length) {
       setComments(new_comments);
     }
+
+    if (await getConfig("show_comments_in_list")) {
+      setVisibility(true);
+    }
   }
 
   on_threads_change(async (_, next) => {
@@ -208,17 +212,32 @@ export function Scroll() {
           data={comments}
           className="w-full h-full"
           components={{
+            Header: () => {
+              return (
+                <div
+                  className={`flex flex-row justify-center items-center gap-4 ${comments.length === 0 ? "p-4 text-center" : "hidden"}`}
+                >
+                  {comments.length === 0 && (
+                    <>
+                      コメントがありません
+                      <button
+                        type="button"
+                        className="bg-black text-white rounded border border-white px-2 py-1"
+                        onClick={() => setVisibility(false)}
+                      >
+                        閉じる
+                      </button>
+                    </>
+                  )}
+                </div>
+              );
+            },
             Footer: () => {
               return (
                 <div
-                  style={{
-                    padding: "1rem",
-                    textAlign: "center",
-                  }}
+                  className={comments.length > 0 ? "p-4 text-center" : "hidden"}
                 >
-                  {comments.length > 0
-                    ? "最後のコメントです"
-                    : "コメントはありません"}
+                  {comments.length > 0 && "最後のコメントです"}
                 </div>
               );
             },