glass-easel-devtools-extension 0.13.0 → 0.17.2

package/chrome.manifest.json

@@ -2,7 +2,7 @@
   "description": "DevTools extension for developing glass-easel applications",
   "manifest_version": 3,
   "name": "glass-easel DevTools",
-  "version": "0.12.1",
+  "version": "0.17.2",
   "homepage_url": "https://github.com/wechat-miniprogram/glass-easel-devtools",
   "icons": {
     "16": "icons/glass-easel-16.png",

package/firefox.manifest.json

@@ -2,7 +2,7 @@
   "description": "DevTools extension for developing glass-easel applications",
   "manifest_version": 3,
   "name": "glass-easel DevTools",
-  "version": "0.12.1",
+  "version": "0.17.2",
   "homepage_url": "https://github.com/wechat-miniprogram/glass-easel-devtools",
   "icons": {
     "16": "icons/glass-easel-16.png",

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "glass-easel-devtools-extension",
-  "version": "0.13.0",
+  "version": "0.17.2",
   "main": "src/utils.ts",
   "dependencies": {
-    "glass-easel": ">=0.13.0",
-    "glass-easel-devtools-agent": "0.13.0",
-    "glass-easel-devtools-panel": "0.13.0"
+    "glass-easel": ">=0.17.2",
+    "glass-easel-devtools-agent": "0.17.2",
+    "glass-easel-devtools-panel": "0.17.2"
   },
   "devDependencies": {
     "archiver": "^7.0.1",

package/src/agent/index.ts

@@ -1,7 +1,9 @@
 import { getDevTools, type protocol } from 'glass-easel-devtools-agent'
 import { type DevToolsBridge } from '../utils'
 
-export type AgentSendMessageMeta = protocol.AgentSendMessage | { kind: '_preinit' | '_init' }
+export type AgentSendMessageMeta =
+  | protocol.AgentSendMessage
+  | { kind: '_preinit' | '_init' | '_reconnect' }
 
 if (window.top !== window) {
   // for iframes, connect to the top frame

package/src/background/index.ts

@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
+
+import { type protocol } from 'glass-easel-devtools-agent'
 import { type AgentSendMessageMeta } from '../agent'
-import { type PanelSendMessageMeta } from '../panel'
+import type { PanelRecvMessageMeta, PanelSendMessageMeta } from '../panel'
 import { ConnectionSource } from '../utils'
 
 // inject a small user script
-// eslint-disable-next-line @typescript-eslint/no-floating-promises
 const USER_SCRIPT_ID = 'glassEaselDevToolsUser'
 chrome.scripting
   .registerContentScripts([
@@ -44,14 +46,21 @@ const injectAgentScript = (tabId: number) => {
 // states
 const tabMetaMap = Object.create(null) as Record<
   number,
-  {
-    devTools?: chrome.runtime.Port
-    pendingMessages: AgentSendMessageMeta[]
-  }
+  | {
+      content: chrome.runtime.Port | null
+      contentPendingMessages: protocol.AgentRecvMessage[]
+      devTools: chrome.runtime.Port | null
+      pendingMessages: PanelRecvMessageMeta[]
+    }
+  | undefined
 >
 chrome.runtime.onConnect.addListener((port) => {
   if (port.name === ConnectionSource.DevToolsPanel) {
     newDevToolsConnection(port)
+  } else if (port.name === ConnectionSource.ContentScript) {
+    const tabId = port.sender?.tab?.id
+    if (!tabId) return
+    newContentScriptConnection(tabId, port)
   }
 })
 
@@ -60,51 +69,79 @@ const newDevToolsConnection = (port: chrome.runtime.Port) => {
   let tabId = 0
   port.onMessage.addListener((message: PanelSendMessageMeta) => {
     if (message.kind === '_init' || message.kind === '_reconnect') {
-      if (tabId) delete tabMetaMap[tabId]
+      if (tabId && tabMetaMap[tabId]) tabMetaMap[tabId]!.devTools = null
       tabId = message.tabId
       if (tabMetaMap[tabId]) {
-        tabMetaMap[tabId].devTools = port
-        const pendingMessages = tabMetaMap[tabId].pendingMessages
-        tabMetaMap[tabId].pendingMessages = []
+        tabMetaMap[tabId]!.contentPendingMessages.length = 0
+        tabMetaMap[tabId]!.devTools = port
+        const pendingMessages = tabMetaMap[tabId]!.pendingMessages
+        tabMetaMap[tabId]!.pendingMessages = []
         pendingMessages.forEach((message) => {
           port.postMessage(message)
         })
+        if (message.kind === '_init') injectContentScript(tabId)
       } else {
-        tabMetaMap[tabId] = { devTools: port, pendingMessages: [] }
+        tabMetaMap[tabId] = {
+          content: null,
+          contentPendingMessages: [],
+          devTools: port,
+          pendingMessages: [],
+        }
+        injectContentScript(tabId)
       }
-      if (message.kind === '_init') injectContentScript(tabId)
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      chrome.tabs.sendMessage(tabId, message)
+    } else if (tabMetaMap[tabId]) {
+      const content = tabMetaMap[tabId]!.content
+      if (content) content.postMessage(message)
+      else tabMetaMap[tabId]!.contentPendingMessages.push(message as protocol.AgentRecvMessage)
     }
   })
   port.onDisconnect.addListener((_port) => {
-    if (tabId) delete tabMetaMap[tabId]
+    if (tabMetaMap[tabId]) tabMetaMap[tabId]!.devTools = null
   })
 }
 
 // connections from content script
-chrome.runtime.onMessage.addListener((message: AgentSendMessageMeta, sender) => {
-  if (sender.id !== chrome.runtime.id) return
-  const tabId = sender.tab?.id
-  if (!tabId) return
-  const tabMeta = tabMetaMap[tabId]
-  if (!tabMeta) {
-    tabMetaMap[tabId] = { pendingMessages: [message] }
-    return
-  }
-  if (!tabMeta.devTools) {
-    tabMeta.pendingMessages.push(message)
-    return
-  }
-  if (message.kind === '_preinit') {
-    injectAgentScript(tabId)
-  } else if (message.kind === '_init') {
-    tabMeta.devTools.postMessage({ kind: '_connected' })
-  } else {
-    tabMeta.devTools.postMessage(message)
-  }
-})
+const newContentScriptConnection = (tabId: number, port: chrome.runtime.Port) => {
+  port.onMessage.addListener((message: AgentSendMessageMeta) => {
+    const tabMeta = tabMetaMap[tabId]
+    if (message.kind === '_preinit') {
+      injectAgentScript(tabId)
+      return
+    }
+    let panelMessage: PanelRecvMessageMeta
+    if (message.kind === '_init' || message.kind === '_reconnect') {
+      panelMessage = { kind: '_connected' }
+    } else {
+      panelMessage = message as protocol.AgentSendMessage
+    }
+    if (!tabMeta) {
+      tabMetaMap[tabId] = {
+        content: port,
+        contentPendingMessages: [],
+        devTools: null,
+        pendingMessages: [panelMessage],
+      }
+      return
+    }
+    if (panelMessage.kind === '_connected') {
+      tabMeta.content = port
+      const messages = tabMeta.contentPendingMessages
+      tabMeta.contentPendingMessages = []
+      messages.forEach((message) => {
+        port.postMessage(message)
+      })
+    }
+    if (!tabMeta.devTools) {
+      if (panelMessage.kind === '_connected') tabMeta.pendingMessages.length = 0
+      tabMeta.pendingMessages.push(panelMessage)
+      return
+    }
+    tabMeta.devTools.postMessage(panelMessage)
+  })
+  port.onDisconnect.addListener(() => {
+    if (tabMetaMap[tabId]) tabMetaMap[tabId].content = null
+  })
+}
 
 // inject agent when reloaded
 chrome.webNavigation.onDOMContentLoaded.addListener((ev) => {

package/src/content/index.ts

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
+
 import { type protocol } from 'glass-easel-devtools-agent'
 import { type AgentSendMessageMeta } from '../agent'
-import { inFirefox } from '../utils'
+import { ConnectionSource, inFirefox } from '../utils'
 
 declare function cloneInto<T>(x: T, target: Window): T
 
@@ -10,41 +12,62 @@ const prepareDataToAgent = <T>(data: T): T => {
 }
 
 // avoid double injection
-const existingElements = document.querySelectorAll('glass-easel-devtools')
-for (let i = 0; i < existingElements.length; i += 1) {
-  const hostElement = existingElements[i]
-  hostElement.parentNode?.removeChild(hostElement)
-}
+const existingElement = document.querySelector('glass-easel-devtools')
+if (existingElement) {
+  const ev = new CustomEvent('glass-easel-devtools-reconnect', {})
+  existingElement.dispatchEvent(ev)
+} else {
+  const hostElement = document.createElement('glass-easel-devtools')
+  hostElement.addEventListener('glass-easel-devtools-reconnect', () => {
+    reconnect()
+  })
 
-// create a host node
-const hostElement = document.createElement('glass-easel-devtools')
-const hostNodeStyle = `
-  display: none;
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-`
-hostElement.setAttribute('style', hostNodeStyle)
-document.documentElement.appendChild(hostElement)
+  // host node styles
+  const hostNodeStyle = `
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  `
+  hostElement.setAttribute('style', hostNodeStyle)
+  document.documentElement.appendChild(hostElement)
 
-// messaging from background to agent
-const postToBackground = (msg: AgentSendMessageMeta) => {
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  chrome.runtime.sendMessage(msg)
-}
-chrome.runtime.onMessage.addListener((message: protocol.AgentRecvMessage, sender) => {
-  if (sender.id !== chrome.runtime.id) return
-  const ev = new CustomEvent('glass-easel-devtools-agent-recv', {
-    detail: prepareDataToAgent(message),
+  // messaging from background to agent
+  let background = chrome.runtime.connect({
+    name: ConnectionSource.ContentScript,
   })
-  hostElement.dispatchEvent(ev)
-})
+  const postToBackground = (msg: AgentSendMessageMeta) => {
+    try {
+      background.postMessage(msg)
+    } catch {
+      reconnect()
+      background.postMessage(msg)
+    }
+  }
+  const bindListener = () => {
+    background.onMessage.addListener((message: unknown) => {
+      const ev = new CustomEvent('glass-easel-devtools-agent-recv', {
+        detail: prepareDataToAgent(message),
+      })
+      hostElement.dispatchEvent(ev)
+    })
+  }
+  const reconnect = () => {
+    background = chrome.runtime.connect({
+      name: ConnectionSource.ContentScript,
+    })
+    bindListener()
+    postToBackground({ kind: '_reconnect' })
+  }
+  bindListener()
+  background.onDisconnect.addListener(reconnect)
 
-// messaging from agent to background
-hostElement.addEventListener('glass-easel-devtools-agent-send', (ev) => {
-  const { detail } = ev as CustomEvent<protocol.AgentSendMessage>
-  postToBackground(detail)
-})
-postToBackground({ kind: '_preinit' })
+  // messaging from agent to background
+  hostElement.addEventListener('glass-easel-devtools-agent-send', (ev) => {
+    const { detail } = ev as CustomEvent<protocol.AgentSendMessage>
+    postToBackground(detail)
+  })
+  postToBackground({ kind: '_preinit' })
+}

package/src/devtools/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
+
 import { inFirefox } from '../utils'
 
 chrome.devtools.panels.create(

package/src/panel/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
+
 import * as glassEasel from 'glass-easel'
 import {
   startup,
@@ -16,6 +18,7 @@ export type PanelRecvMessageMeta = PanelRecvMessage | { kind: '_connected' }
 let background = chrome.runtime.connect({
   name: ConnectionSource.DevToolsPanel,
 })
+let reconnecting = false
 const postToBackground = (msg: PanelSendMessageMeta) => {
   try {
     background.postMessage(msg)
@@ -27,7 +30,11 @@ const postToBackground = (msg: PanelSendMessageMeta) => {
 const bindListener = () => {
   background.onMessage.addListener((message: PanelRecvMessageMeta) => {
     if (message.kind === '_connected') {
-      restart()
+      if (reconnecting) {
+        reconnecting = false
+      } else {
+        restart()
+      }
     } else {
       listener?.(message)
     }
@@ -39,6 +46,7 @@ const reconnect = () => {
   })
   bindListener()
   postToBackground({ kind: '_reconnect', tabId: chrome.devtools.inspectedWindow.tabId })
+  reconnecting = true
 }
 bindListener()
 postToBackground({ kind: '_init', tabId: chrome.devtools.inspectedWindow.tabId })

package/src/stub/index.ts

@@ -1,5 +1,3 @@
-/* eslint-disable class-methods-use-this */
-
 import type * as glassEasel from 'glass-easel'
 import { type DevTools, type DevToolsBridge, type InspectorDevTools } from '../utils'
 

package/.eslintignore

@@ -1,3 +0,0 @@
-/node_modules
-/dist
-/pkg