feat: work on a devtools panel

packages/swr-devtools-extensions/background.js

@@ -0,0 +1,15 @@
+// background.js
+let panelPort;
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name === "content") {
+    port.onMessage.addListener((message) => {
+      console.log("sent message from content to panel", message);
+      panelPort?.postMessage(message);
+    });
+  } else if (port.name === "panel") {
+    panelPort = port;
+    panelPort.onDisconnect.addListener(() => {
+      panelPort = null;
+    });
+  }
+});

packages/swr-devtools-extensions/content.js

@@ -4,8 +4,11 @@ script.src = chrome.runtime.getURL("runtime.js");
 document.documentElement.appendChild(script);
 script.parentNode.removeChild(script);
 
+// proxy messages from applications to a background script
+const port = chrome.runtime.connect({ name: "content" });
 window.addEventListener("message", (e) => {
-  console.log("received", e);
-  // send the data to the devtools_pages through a background script
-  // https://developer.chrome.com/docs/extensions/mv3/devtools/#content-script-to-devtools
+  if (e.data?.cacheData) {
+    // console.log("received", e.data.cacheData);
+    port.postMessage(e.data.cacheData);
+  }
 });

packages/swr-devtools-extensions/devtools.js

@@ -1 +1,3 @@
-chrome.devtools.panels.create("SWR DevTools", "", "panel.html");
+chrome.devtools.panels.create("SWR", "", "panel.html", () => {
+  console.log("The DevTools panel has been created");
+});

packages/swr-devtools-extensions/manifest.json

@@ -2,22 +2,19 @@
   "name": "SWR DevTools",
   "description": "A DevTools for SWR to inspect your SWR cache",
   "version": "1.0",
-  "manifest_version": 3,
+  "manifest_version": 2,
   "devtools_page": "devtools.html",
+  "background": {
+    "scripts": ["background.js"]
+  },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "js": ["content.js"],
       "run_at": "document_start"
     }
   ],
-  "host_permissions": [
-    "*://*/*"
-  ],
   "web_accessible_resources": [
-    {
-      "matches": ["<all_urls>"],
-      "resources": ["runtime.js"]
-    }
+    "runtime.js"
   ]
 }

packages/swr-devtools-extensions/runtime.js

@@ -1,12 +1,13 @@
-console.log("assigned __SWR_DEVTOOLS__", window);
 window.__SWR_DEVTOOLS__ = {
   launch(cache) {
-    console.log("Hello SWR DevTools", cache);
     cache.subscribe(() => {
-      const cacheData = {};
-      for (const key of cache.keys()) {
-        cacheData[key] = cache.get(key);
-      }
+      const cacheData = cache.keys().reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: cache.get(key),
+        }),
+        {}
+      );
       // console.log(data);
       window.postMessage({ cacheData });
     });

packages/swr-devtools-extensions/src/index.tsx

@@ -2,5 +2,27 @@ import ReactDOM from "react-dom";
 import { cache } from "swr";
 import { SWRDevTools } from "swr-devtools";
 
+const setup = () => {
+  // @ts-ignore
+  const port = chrome.runtime.connect({
+    name: "panel",
+  });
+
+  // @ts-ignore
+  port.onMessage.addListener((request) => {
+    Object.entries(request).forEach(([key, value]: any) => {
+      cache.set(key, value);
+    });
+    ReactDOM.render(
+      <SWRDevTools cache={cache} />,
+      document.getElementById("app")
+    );
+  });
+};
+
+setup();
+// @ts-ignore
+// chrome.devtools.network.onNavigated.addListener(setup);
+
 const App = () => <SWRDevTools cache={cache} />;
 ReactDOM.render(<App />, document.getElementById("app"));