update: bundle devtool

package.json

@@ -18,7 +18,7 @@
     "build-prod": "cross-env NODE_ENV=production node scripts/build.mjs",
     "build": "concurrently -c auto npm:build-prod npm:tsc",
     "tsc": "tsc --noEmit",
-    "start": "concurrently 'node scripts/start.mjs' 'node -e \"setTimeout(()=>{},2000)\" && npm run devtool'",
+    "start": "node scripts/start.mjs",
     "start-watch": "npm run build-dev && concurrently -c auto npm:start npm:watch",
     "stop": "node scripts/stop.mjs",
     "restart-dev": "npm run build-dev && npm run stop && npm run start",
@@ -26,7 +26,6 @@
     "restart": "npm run restart-dev",
     "reload": "npm run build-dev && node scripts/reload.mjs",
     "watch": "chokidar \"src/**\" \"addon/**\" -c \"npm run reload\"",
-    "devtool": "node scripts/devtool.mjs",
     "release": "release-it",
     "lint": "prettier --write . && eslint . --ext .ts --fix",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -43,23 +42,23 @@
   },
   "homepage": "https://github.com/windingwind/zotero-addon-template#readme",
   "dependencies": {
-    "zotero-plugin-toolkit": "^2.3.6"
+    "zotero-plugin-toolkit": "^2.3.11"
   },
   "devDependencies": {
-    "@types/node": "^20.6.0",
+    "@types/node": "^20.10.4",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/parser": "^6.13.2",
     "chokidar-cli": "^3.0.0",
     "compressing": "^1.10.0",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.19.2",
+    "esbuild": "^0.19.8",
-    "eslint": "^8.49.0",
+    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
-    "release-it": "^16.1.5",
+    "release-it": "^16.3.0",
-    "replace-in-file": "^7.0.1",
+    "replace-in-file": "^7.0.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
-    "zotero-types": "^1.2.3"
+    "zotero-types": "^1.3.7"
   }
 }

scripts/devtool.mjs

@@ -1,61 +0,0 @@
-import { exit } from "process";
-import { execSync } from "child_process";
-import cmd from "./zotero-cmd.json" assert { type: "json" };
-
-const { zoteroBinPath, profilePath } = cmd.exec;
-
-const startZotero = `"${zoteroBinPath}" --debugger --purgecaches -profile "${profilePath}"`;
-
-const script = `
-(async () => {
-  Zotero.Prefs.set("devtools.debugger.remote-enabled", true, true);
-  Zotero.Prefs.set("devtools.debugger.remote-port", 6100, true);
-  Zotero.Prefs.set("devtools.debugger.prompt-connection", false, true);
-  Zotero.Prefs.set("devtools.debugger.chrome-debugging-websocket", false, true);
-  
-  env =
-    Services.env ||
-    Cc["@mozilla.org/process/environment;1"].getService(Ci.nsIEnvironment);
-  
-  env.set("MOZ_BROWSER_TOOLBOX_PORT", 6100);
-  Zotero.openInViewer(
-    "chrome://devtools/content/framework/browser-toolbox/window.html",
-    {
-      onLoad: (doc) => {
-        doc.querySelector("#status-message-container").style.visibility =
-          "collapse";
-        let toolboxBody;
-        waitUntil(
-          () => {
-            toolboxBody = doc
-              .querySelector(".devtools-toolbox-browsertoolbox-iframe")
-              ?.contentDocument?.querySelector(".theme-body");
-            return toolboxBody;
-          },
-          () => {
-            toolboxBody.style = "pointer-events: all !important";
-          }
-        );
-      },
-    }
-  );
-  
-  function waitUntil(condition, callback, interval = 100, timeout = 10000) {
-    const start = Date.now();
-    const intervalId = setInterval(() => {
-      if (condition()) {
-        clearInterval(intervalId);
-        callback();
-      } else if (Date.now() - start > timeout) {
-        clearInterval(intervalId);
-      }
-    }, interval);
-  }  
-})()`;
-
-const url = `zotero://ztoolkit-debug/?run=${encodeURIComponent(script)}`;
-
-const command = `${startZotero} -url "${url}"`;
-
-execSync(command);
-exit(0);

src/index.ts

@@ -1,12 +1,14 @@
 import { BasicTool } from "zotero-plugin-toolkit/dist/basic";
 import Addon from "./addon";
 import { config } from "../package.json";
+import { waitUntil } from "./utils/wait";
 
 const basicTool = new BasicTool();
 
 if (!basicTool.getGlobal("Zotero")[config.addonInstance]) {
-  // Set global variables
+  if (__env__ === "development") {
-  _globalThis.Zotero = basicTool.getGlobal("Zotero");
+    openDevTool();
+  }
   defineGlobal("window");
   defineGlobal("document");
   defineGlobal("ZoteroPane");
@@ -27,3 +29,46 @@ function defineGlobal(name: string, getter?: () => any) {
     },
   });
 }
+
+function openDevTool() {
+  // const { BrowserToolboxLauncher } = ChromeUtils.import(
+  //   "resource://devtools/client/framework/browser-toolbox/Launcher.jsm",
+  // );
+  // BrowserToolboxLauncher.init();
+  // TODO: Use the above code to open the devtool after https://github.com/zotero/zotero/pull/3387
+  Zotero.Prefs.set("devtools.debugger.remote-enabled", true, true);
+  Zotero.Prefs.set("devtools.debugger.remote-port", 6100, true);
+  Zotero.Prefs.set("devtools.debugger.prompt-connection", false, true);
+  Zotero.Prefs.set("devtools.debugger.chrome-debugging-websocket", false, true);
+
+  const env =
+    Services.env ||
+    // @ts-ignore - mozIEnvironment is not in the types
+    Cc["@mozilla.org/process/environment;1"].getService(Ci.nsIEnvironment);
+
+  env.set("MOZ_BROWSER_TOOLBOX_PORT", 6100);
+  Zotero.openInViewer(
+    "chrome://devtools/content/framework/browser-toolbox/window.html",
+    {
+      // @ts-ignore - onLoad is not in the types
+      onLoad: (doc: Document) => {
+        (
+          doc.querySelector("#status-message-container") as HTMLDivElement
+        ).style.visibility = "collapse";
+        let toolboxBody: HTMLIFrameElement;
+        waitUntil(
+          () => {
+            toolboxBody = doc
+              .querySelector(".devtools-toolbox-browsertoolbox-iframe")
+              // @ts-ignore - contentDocument is not in the types
+              ?.contentDocument?.querySelector(".theme-body");
+            return !!toolboxBody;
+          },
+          () => {
+            toolboxBody.setAttribute("style", "pointer-events: all !important");
+          },
+        );
+      },
+    },
+  );
+}