Feat: support Firefox Extension

package.json

@@ -10,14 +10,14 @@
     "build": "run-s build:devtools build:panel build:extensions",
     "build:devtools": "yarn workspace swr-devtools build",
     "build:demo": "yarn workspace swr-devtools-demo build",
-    "build:extensions": "yarn workspace swr-devtools-extentions build",
+    "build:extensions": "yarn workspace swr-devtools-extensions build",
     "build:panel": "yarn workspace swr-devtools-panel build",
     "deploy:demo": "run-s build:devtools build:panel build:demo",
     "prerelease": "run-s build lint",
     "release": "lerna publish --conventional-commits",
     "start:demo": "yarn workspace swr-devtools-demo dev",
     "start:dev": "yarn workspace swr-devtools start",
-    "start:extensions": "yarn workspace swr-devtools-extentions start",
+    "start:extensions": "yarn workspace swr-devtools-extensions start",
     "start:panel": "yarn workspace swr-devtools-panel start",
     "start": "run-p -l start:*",
     "lint:eslint": "eslint '**/pages/**/*' '**/src/**/*'",
@@ -35,4 +35,4 @@
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2"
   }
-}
+}

packages/swr-devtools-extensions/README.md

@@ -1,9 +1,11 @@
 # swr-devtools-extensions
 
-SWR Devtools is a chrome extension for [SWR](https://swr.vercel.app/), which inspects cache data of SWR.
+SWR Devtools is a chrome/firefox extension for [SWR](https://swr.vercel.app/), which inspects cache data of SWR.
 
 https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned
 
+Firefox: TBD
+
 ## LICENSE
 
 [MIT](LICENSE.md)

packages/swr-devtools-extensions/manifest.json

@@ -6,16 +6,23 @@
   "icons": {
     "16": "icons/swr-devtools-16.png",
     "48": "icons/swr-devtools-48.png",
+    "64": "icons/swr-devtools-64.png",
     "128": "icons/swr-devtools-128.png"
   },
   "devtools_page": "devtools.html",
   "background": {
-    "scripts": ["background.js"]
+    "scripts": [
+      "background.js"
+    ]
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
       "run_at": "document_start"
     }
   ]

packages/swr-devtools-extensions/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "swr-devtools-extentions",
+  "name": "swr-devtools-extensions",
   "private": "true",
   "version": "0.2.2",
   "main": "lib/index.js",
@@ -17,9 +17,11 @@
     "@types/chrome": "^0.0.154",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
+    "@types/webextension-polyfill": "^0.8.0",
     "copy-webpack-plugin": "^9.0.1",
     "ts-loader": "^9.2.3",
     "typescript": "^4.3.5",
+    "webextension-polyfill": "^0.8.0",
     "webpack": "^5.45.1",
     "webpack-cli": "^4.7.2"
   },
@@ -31,4 +33,4 @@
     "swr-devtools": "^0.2.2",
     "swr-devtools-panel": "^0.2.2"
   }
-}
+}

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

@@ -1,13 +1,13 @@
 import ReactDOM from "react-dom";
 import { SWRDevToolPanel } from "swr-devtools-panel";
+import { runtime } from "webextension-polyfill";
 
 import type { ContentMessage } from "./content";
 
 const cache = new Map();
 const rootEl = document.getElementById("app");
 
-// @ts-ignore
-const port = chrome.runtime.connect({
+const port = runtime.connect({
   name: "panel",
 });
 port.onDisconnect.addListener(() => {
@@ -17,7 +17,6 @@ port.onDisconnect.addListener(() => {
 });
 
 let mounted = false;
-// @ts-ignore
 port.onMessage.addListener((message: ContentMessage) => {
   switch (message.type) {
     // loaded a new page

packages/swr-devtools-extensions/src/background.ts

@@ -1,12 +1,13 @@
+import { runtime, Runtime } from "webextension-polyfill";
 import type { ContentMessage } from "./content";
 // background.js
-let panelPort: chrome.runtime.Port | null = null;
-let contentPort: chrome.runtime.Port | null = null;
+let panelPort: Runtime.Port | null = null;
+let contentPort: Runtime.Port | null = null;
 
 // queued messages until a panel is connected
 const queuedContentMessages: any[] = [];
 
-chrome.runtime.onConnect.addListener((port) => {
+runtime.onConnect.addListener((port) => {
   console.log("on connect", port.name);
   // A port between a content page
   if (port.name === "content") {

packages/swr-devtools-extensions/src/content.ts

@@ -1,4 +1,5 @@
 import { DevToolsMessage } from "swr-devtools";
+import { runtime } from "webextension-polyfill";
 
 export type ContentMessage =
   | {
@@ -24,7 +25,7 @@ const enqueueMessage = (message: any) => {
 let isDisplayedPanel = false;
 
 // proxy messages from applications to a background script
-const port = chrome.runtime.connect({ name: "content" });
+const port = runtime.connect({ name: "content" });
 port.onMessage.addListener((message: any) => {
   console.log("received from background -> content", message);
   // a panel has been displayed, so we sent queued messages

packages/swr-devtools-extensions/src/devtools.html

@@ -1,6 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+    <meta content="utf-8" http-equiv="encoding" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SWR devtools</title>
     <script src="devtools.js"></script>
   </head>
+  <body></body>
 </html>

packages/swr-devtools-extensions/src/devtools.ts

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

packages/swr-devtools-extensions/src/panel.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <style>
       html {
@@ -9,7 +9,8 @@
           background-color: rgb(39, 40, 34);
         }
       }
-      body, div#app {
+      body,
+      div#app {
         height: 100%;
         margin: 0;
       }

yarn.lock

@@ -1438,6 +1438,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/webextension-polyfill@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@types/webextension-polyfill/-/webextension-polyfill-0.8.0.tgz#6c40740eec531de412f6ceba27bb2cad4a24907c"
+  integrity sha512-usmQx2snpNkVl2VoOGZCdrPnfHL+CjuSFy84ZdTwQ2b2cvyygF/zGW5YI6Zywk+bfq9zmYpORO9lmdN7DknpRw==
+
 "@typescript-eslint/eslint-plugin@^4.15.0":
   version "4.15.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.15.0.tgz#13a5a07cf30d0d5781e43480aa2a8d38d308b084"
@@ -7878,6 +7883,11 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+webextension-polyfill@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.8.0.tgz#f80e9f4b7f81820c420abd6ffbebfa838c60e041"
+  integrity sha512-a19+DzlT6Kp9/UI+mF9XQopeZ+n2ussjhxHJ4/pmIGge9ijCDz7Gn93mNnjpZAk95T4Tae8iHZ6sSf869txqiQ==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"