fix: a hydration error in SSR apps (#76)

koba04 · Jul 12, 2022 · c30626f · c30626f · vercel · Jul 12, 2022
1 parent 804a2f5
commit c30626f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/packages/swr-devtools-extensions/manifest-v2.json b/packages/swr-devtools-extensions/manifest-v2.json
@@ -15,6 +15,12 @@
       "background.js"
     ]
   },
+  "permissions": [
+    "scripting",
+    "tabs",
+    "http://*/",
+    "https://*/"
+  ],
   "content_scripts": [
     {
       "matches": [

diff --git a/packages/swr-devtools-extensions/manifest.json b/packages/swr-devtools-extensions/manifest.json
@@ -13,6 +13,14 @@
   "background": {
     "service_worker": "background.js"
   },
+  "permissions": [
+    "scripting",
+    "tabs"
+  ],
+  "host_permissions": [
+    "http://*/",
+    "https://*/"
+  ],
   "content_scripts": [
     {
       "matches": [
@@ -24,17 +32,5 @@
       ],
       "run_at": "document_start"
     }
-  ],
-  "web_accessible_resources": [
-    {
-      "resources": [
-        "web-accessible.js"
-      ],
-      "matches": [
-        "https://*/*",
-        "http://*/*"
-
-      ]
-    }
   ]
 }
diff --git a/packages/swr-devtools-extensions/src/content.ts b/packages/swr-devtools-extensions/src/content.ts
@@ -1,14 +1,6 @@
 import { DevToolsMessage } from "swr-devtools";
 import { Runtime, runtime } from "webextension-polyfill";
 
-const injectDevToolsHook = () => {
-  const script = document.createElement("script");
-  script.setAttribute("type", "text/javascript");
-  script.setAttribute("src", chrome.runtime.getURL("web-accessible.js"));
-  document.documentElement.appendChild(script);
-};
-injectDevToolsHook();
-
 export type ContentMessage =
   | {
       type: "load";

diff --git a/packages/swr-devtools-extensions/src/devtools.ts b/packages/swr-devtools-extensions/src/devtools.ts
@@ -1,5 +1,16 @@
-import { devtools } from "webextension-polyfill";
+import { devtools, scripting } from "webextension-polyfill";
 
 devtools.panels.create("SWR", "", "panel.html").then(() => {
   console.log("The DevTools panel has been created");
 });
+
+scripting
+  .executeScript({
+    target: {
+      tabId: devtools.inspectedWindow.tabId,
+      allFrames: true,
+    },
+    files: ["web-accessible.js"],
+  })
+  .then((r) => console.log("executeScript has been success", r))
+  .catch((e) => console.log("executeScript has been failed", e));