feat: add popup UI, change ext icon with background script, handle ho…

…st app reload for devtools page

manifest.ts

@@ -9,14 +9,14 @@ const manifest: chrome.runtime.ManifestV3 = {
   version: packageJson.version,
   description: packageJson.description,
   // options_page: "src/pages/options/index.html",
-  // background: {
-  //   service_worker: "src/pages/background/index.js",
-  //   type: "module",
-  // },
-  // action: {
-  //   default_popup: "src/pages/popup/index.html",
-  //   default_icon: "icon-34.png",
-  // },
+  background: {
+    service_worker: "src/pages/background/index.js",
+    type: "module",
+  },
+  action: {
+    default_popup: "src/pages/popup/index.html",
+    default_icon: "icon32_black.png",
+  },
   // chrome_url_overrides: {
   //   newtab: "src/pages/newtab/index.html",
   // },
@@ -27,24 +27,21 @@ const manifest: chrome.runtime.ManifestV3 = {
     "128": "icon128.png",
   },
   content_scripts: [
-    // {
-    //   matches: ["http://*/*", "https://*/*", "<all_urls>"],
-    //   js: ["src/pages/content/index.js"],
-    //   // KEY for cache invalidation
-    //   css: ["assets/css/contentStyle<KEY>.chunk.css"],
-    // },
+    {
+      matches: ["http://*/*", "https://*/*", "<all_urls>"],
+      js: ["src/pages/content/index.js"],
+      css: [],
+      // KEY for cache invalidation
+      // css: ["assets/css/contentStyle<KEY>.chunk.css"],
+    },
   ],
   devtools_page: "src/pages/devtools/index.html",
   web_accessible_resources: [
     {
       resources: [
         "assets/js/*.js",
         "assets/css/*.css",
-        "icon-16.png",
-        "icon-19.png",
-        "icon-38.png",
-        "icon-48.png",
-        "icon-128.png",
+        "src/pages/detector/index.js",
       ],
       matches: ["*://*/*"],
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {
@@ -23,19 +23,19 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.5.0",
-    "@testing-library/react": "13.4.0",
-    "@types/chrome": "0.0.224",
+    "@testing-library/react": "^13.4.0",
+    "@types/chrome": "^0.0.224",
     "@types/jest": "29.0.3",
     "@types/node": "18.15.11",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.11",
     "@types/ws": "^8.5.4",
-    "@typescript-eslint/eslint-plugin": "5.56.0",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "5.38.1",
     "@vitejs/plugin-react": "2.2.0",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
-    "eslint": "8.36.0",
+    "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
@@ -46,7 +46,7 @@
     "prettier": "2.8.8",
     "rollup": "2.79.1",
     "sass": "1.55.0",
-    "ts-jest": "29.0.2",
+    "ts-jest": "^29.0.2",
     "ts-loader": "9.4.2",
     "typescript": "4.8.3",
     "vite": "3.1.3",

src/pages/background/index.ts

@@ -9,3 +9,12 @@ reloadOnUpdate("pages/background");
 reloadOnUpdate("pages/content/style.scss");
 
 console.log("background loaded");
+
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+  if (message.type === "__KONVA_DEVTOOLS__BROADCAST_RESULT") {
+    chrome.action.setIcon({
+      path: `../../../icon32${!message.result ? "_black" : ""}.png`,
+      tabId: sender.tab.id,
+    });
+  }
+});

src/pages/content/detector.ts

@@ -0,0 +1,15 @@
+import type Konva from "konva";
+
+declare global {
+  interface Window {
+    Konva: typeof Konva;
+  }
+}
+
+document.addEventListener("__KONVA_DEVTOOLS__DETECT_KONVA", function (e) {
+  document.dispatchEvent(
+    new CustomEvent("__KONVA_DEVTOOLS__DETECTION_RESULT", {
+      detail: !!window.Konva,
+    })
+  );
+});

src/pages/content/index.ts

@@ -1,7 +1,38 @@
-console.log("content loaded");
+let lastResult = false;
 
-/**
- * @description
- * Chrome extensions don't support modules in content scripts.
- */
-import("./components/Demo");
+detect();
+const interval = setInterval(detect, 5000);
+
+function detect() {
+  try {
+    const s = document.createElement("script");
+    s.src = chrome.runtime.getURL("src/pages/detector/index.js");
+    document.body.appendChild(s);
+    s.onload = () => {
+      document.addEventListener(
+        "__KONVA_DEVTOOLS__DETECTION_RESULT",
+        function (e: CustomEvent) {
+          lastResult = e.detail;
+
+          chrome.runtime.sendMessage({
+            type: "__KONVA_DEVTOOLS__BROADCAST_RESULT",
+            result: lastResult,
+          });
+          s.remove();
+        }
+      );
+
+      document.dispatchEvent(new CustomEvent("__KONVA_DEVTOOLS__DETECT_KONVA"));
+    };
+  } catch (error) {
+    clearInterval(interval);
+    console.log(error);
+  }
+}
+
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  if (request["type"] == "__KONVA_DEVTOOLS__REQUEST_DETECTION") {
+    sendResponse(lastResult);
+  }
+  return true; // this make sure sendResponse will work asynchronously
+});

src/pages/devtools/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ko">
+<html lang="en">
 <head>
     <meta charset="UTF-8" />
     <title>Devtools</title>