Update: Reload tab when configs are changed in popup

src/components/SwitchItem.tsx

@@ -6,6 +6,7 @@ import { ComponentColor } from "react-daisyui/dist/types";
 
 import { WebSites } from "../class";
 import IsTrue from "../utils/isTrue";
+import { sendMsgToAllTab } from "../utils/sendMsgToAllTab";
 import { FrontConfig } from "./config";
 import { Category } from "./type";
 
@@ -23,6 +24,7 @@ export function SwitchItem({ config, category, color }: { config: FrontConfig; c
         return (e: React.ChangeEvent<HTMLInputElement>) => {
             setEnabled(e.target.checked);
             WebSites[config.id].storage.set(category, e.target.checked.toString());
+            sendMsgToAllTab<string>("reload");
         };
     }, []);
 

src/scripts/background.ts

@@ -5,7 +5,7 @@ import OpenOptions from "../utils/openOptions";
 chrome.runtime.onInstalled.addListener(async () => {
     const storage = new StorageTool("other");
     const isInstalled = await storage.get("installed");
-    console.log(isInstalled);
+    //console.log(isInstalled);
     if (isInstalled != undefined && isTrue(isInstalled)) return;
     OpenOptions("thanks").then(() => {
         storage.set("installed", "true");

src/scripts/content_common.ts

@@ -5,4 +5,5 @@ chrome.runtime.onMessage.addListener((message) => {
     if (message === "reload") {
         location.reload();
     }
+    //return true;
 });

src/utils/sendMsgToAllTab.ts

@@ -0,0 +1,35 @@
+export const sendMsgToAllTab = <T>(msg: T) => {
+    const urls = getUrlsFromManifest();
+    chrome.tabs.query(
+        {
+            url: urls,
+        },
+        (tabs) => {
+            tabs.forEach((tab) => {
+                try {
+                    chrome.tabs.sendMessage(tab.id!, msg);
+                } catch (e) {
+                    console.error(e);
+                }
+            });
+        },
+    );
+};
+
+export const getUrlsFromManifest = () => {
+    const manifest = chrome.runtime.getManifest();
+    const content_scripts = manifest.content_scripts;
+    if (!content_scripts) return [];
+
+    // (string | undefined)[] => string[]
+    // なんで動くのか素でわからん
+    // asとの違いとか、そもそもなんでこれがないとダメなのか。普通に推論して欲しい。
+    // //https://qiita.com/suin/items/cda9af4f4f1c53c05c6f
+    return content_scripts
+        .map((c) => {
+            return c.matches;
+        })
+
+        .flat()
+        .filter((c): c is string => typeof c === "string");
+};