[gem-devtools] Add dom stat

mantou132 · Nov 28, 2023 · 78c39a3 · 78c39a3
1 parent ebb374f
commit 78c39a3
Show file tree

Hide file tree

Showing 19 changed files with 1,694 additions and 805 deletions.
diff --git a/.github/workflows/gem-devtools-publish.yml b/.github/workflows/gem-devtools-publish.yml
@@ -22,14 +22,23 @@ jobs:
 
       - name: Build
         run: |
-          yarn update:version && yarn build:zip
           export VERSION=$(node -e "console.log(require('./package.json').version)")
+
           export ZIP_NAME=gem_devtools-${VERSION}.zip
           export ZIP_PATH=packages/gem-devtools/build/${ZIP_NAME}
-          echo "ZIP_NAME=${ZIP_NAME}" >> $GITHUB_ENV
-          echo "ZIP_PATH=${ZIP_PATH}" >> $GITHUB_ENV
-          echo ${ZIP_NAME}
           echo ${ZIP_PATH}
+          export ZIP_NAME_FIREFOX=gem_devtools-firefox-${VERSION}.zip
+          export ZIP_PATH_FIREFOX=packages/gem-devtools/build/${ZIP_NAME_FIREFOX}
+          echo ${ZIP_PATH_FIREFOX}
+
+          yarn update:version
+
+          yarn build:zip:firefox
+          # mv build/${ZIP_NAME} build/${ZIP_NAME_FIREFOX}
+          yarn build:zip
+
+          echo "ZIP_PATH=${ZIP_PATH}" >> $GITHUB_ENV
+          echo "ZIP_PATH_FIREFOX=${ZIP_PATH_FIREFOX}" >> $GITHUB_ENV
         working-directory: packages/gem-devtools
 
       - name: Upload to release
@@ -45,7 +54,7 @@ jobs:
       # - uses: trmcnvn/firefox-addon@v1
       #   with:
       #     uuid: ""
-      #     xpi: ${{ env.ZIP_PATH }}
+      #     xpi: ${{ env.ZIP_PATH_FIREFOX }}
       #     manifest: packages/gem-devtools/extension/manifest.json
       #     api-key: ${{ secrets.FIREFOX_API_KEY }}
       #     api-secret: ${{ secrets.FIREFOX_API_SECRET }}

diff --git a/packages/gem-devtools/package.json b/packages/gem-devtools/package.json
@@ -5,20 +5,22 @@
   "scripts": {
     "update:version": "node ./scripts/update.js",
     "build": "vite build",
-    "build:watch": "yarn build --watch",
-    "build:zip": "yarn build && web-ext --config web-ext.config.js build",
-    "browser": "web-ext --config web-ext.config.js run",
-    "start": "concurrently npm:build:watch npm:browser"
+    "build:firefox": "vite build && node ./scripts/to-mv2.js",
+    "watch": "yarn build --watch",
+    "build:zip": "yarn build && web-ext build",
+    "build:zip:firefox": "yarn build:firefox && web-ext build",
+    "browser": "web-ext run",
+    "start": "concurrently npm:watch npm:browser"
   },
   "dependencies": {
     "@mantou/gem": "^1.7.0",
-    "webextension-polyfill": "^0.8.0"
+    "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
     "@gemjs/config": "^1.6.11",
-    "@types/webextension-polyfill": "^0.8.2",
+    "@types/webextension-polyfill": "^0.10.7",
     "vite": "^2.7.13",
-    "web-ext": "^6.6.0"
+    "web-ext": "^7.8.0"
   },
   "author": "mantou132",
   "license": "MIT",

diff --git a/packages/gem-devtools/public/manifest.json b/packages/gem-devtools/public/manifest.json
@@ -1,11 +1,12 @@
 {
   "name": "Gem DevTools",
   "version": "0.0.0",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "description": "Gem DevTools Extension to inspect and debug Gem elements",
   "devtools_page": "devtools.html",
   "content_scripts": [
     {
+      "world": "MAIN",
       "matches": ["<all_urls>"],
       "js": ["content.js"],
       "run_at": "document_start"

diff --git a/packages/gem-devtools/scripts/to-mv2.js b/packages/gem-devtools/scripts/to-mv2.js
@@ -0,0 +1,3 @@
+const pkg = require('../extension/manifest.json');
+
+require('fs').writeFileSync('./extension/manifest.json', JSON.stringify({ ...pkg, manifest_version: 2 }, null, 2));
diff --git a/packages/gem-devtools/src/common.ts b/packages/gem-devtools/src/common.ts
@@ -0,0 +1 @@
+export const isFirefox = navigator.userAgent.includes('Firefox');
diff --git a/packages/gem-devtools/src/content.ts b/packages/gem-devtools/src/content.ts
@@ -1,11 +1,36 @@
-import type { DevToolsHook } from '@mantou/gem';
+type DevToolsHookStore = {
+  customElementMap: Map<string, CustomElementConstructor>;
+  currentElementsMap: Map<string, Element>;
+};
+declare global {
+  interface Window {
+    __GEM_DEVTOOLS__STORE__?: DevToolsHookStore;
+  }
+}
 
-// 序列化后在 page 中执行
 function initDevToolsHook() {
-  window.__GEM_DEVTOOLS__HOOK__ = {} as DevToolsHook;
+  // at document_start
+  window.__GEM_DEVTOOLS__HOOK__ = {};
+  window.__GEM_DEVTOOLS__STORE__ = {
+    customElementMap: new Map(),
+    currentElementsMap: new Map(),
+  };
+
+  const nativeDefineElement = window.customElements.define.bind(window.customElements);
+  window.customElements.define = (...rest: Parameters<typeof customElements.define>) => {
+    window.__GEM_DEVTOOLS__STORE__!.customElementMap.set(rest[0], rest[1]);
+    nativeDefineElement(...rest);
+  };
+}
+
+// only MV2
+if (navigator.userAgent.includes('Firefox')) {
+  const script = document.createElement('script');
+  script.textContent = `(${initDevToolsHook.toString()})()`;
+  document.documentElement.append(script);
+  script.remove();
+} else {
+  initDevToolsHook();
 }
 
-const script = document.createElement('script');
-script.textContent = `(${initDevToolsHook.toString()})()`;
-document.documentElement.append(script);
-script.remove();
+export {};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const pkg = require('../extension/manifest.json');

		require('fs').writeFileSync('./extension/manifest.json', JSON.stringify({ ...pkg, manifest_version: 2 }, null, 2));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const isFirefox = navigator.userAgent.includes('Firefox');