glass-easel-devtools-extension 0.10.2 → 0.12.1

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.10.1",
+  "version": "0.12.0",
   "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.10.1",
+  "version": "0.12.0",
   "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.10.2",
+  "version": "0.12.1",
   "main": "src/utils.ts",
   "dependencies": {
-    "glass-easel": "^0.10.2",
-    "glass-easel-devtools-agent": "0.10.2",
-    "glass-easel-devtools-panel": "0.10.2"
+    "glass-easel": ">=0.12.0",
+    "glass-easel-devtools-agent": "0.12.1",
+    "glass-easel-devtools-panel": "0.12.1"
   },
   "devDependencies": {
     "archiver": "^7.0.1",

package/src/agent/index.ts

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

package/src/background/index.ts

@@ -4,16 +4,19 @@ import { ConnectionSource } from '../utils'
 
 // inject a small user script
 // eslint-disable-next-line @typescript-eslint/no-floating-promises
-chrome.scripting.registerContentScripts([
-  {
-    id: 'glassEaselDevToolsUser',
-    world: 'MAIN',
-    matches: ['<all_urls>'],
-    allFrames: true,
-    js: ['dist/stub.js'],
-    runAt: 'document_start',
-  },
-])
+const USER_SCRIPT_ID = 'glassEaselDevToolsUser'
+chrome.scripting
+  .registerContentScripts([
+    {
+      id: USER_SCRIPT_ID,
+      world: 'MAIN',
+      matches: ['<all_urls>'],
+      allFrames: true,
+      js: ['dist/stub.js'],
+      runAt: 'document_start',
+    },
+  ])
+  .catch(() => {})
 
 // inject main agent when needed
 const injectContentScript = (tabId: number) => {
@@ -42,15 +45,13 @@ const injectAgentScript = (tabId: number) => {
 const tabMetaMap = Object.create(null) as Record<
   number,
   {
-    devTools: chrome.runtime.Port
-    contentScript?: chrome.runtime.Port
+    devTools?: chrome.runtime.Port
+    pendingMessages: AgentSendMessageMeta[]
   }
 >
 chrome.runtime.onConnect.addListener((port) => {
   if (port.name === ConnectionSource.DevToolsPanel) {
     newDevToolsConnection(port)
-  } else if (port.name === ConnectionSource.ContentScript) {
-    newContentScriptConnection(port)
   }
 })
 
@@ -58,20 +59,23 @@ chrome.runtime.onConnect.addListener((port) => {
 const newDevToolsConnection = (port: chrome.runtime.Port) => {
   let tabId = 0
   port.onMessage.addListener((message: PanelSendMessageMeta) => {
-    if (message.kind === '_init') {
+    if (message.kind === '_init' || message.kind === '_reconnect') {
       if (tabId) delete tabMetaMap[tabId]
       tabId = message.tabId
-      tabMetaMap[tabId] = { devTools: port }
-      injectContentScript(tabId)
-    } else if (message.kind !== '') {
-      const tabMeta = tabMetaMap[tabId]
-      if (!tabMeta) return
-      if (tabMeta.contentScript) {
-        tabMeta.contentScript.postMessage(message)
+      if (tabMetaMap[tabId]) {
+        tabMetaMap[tabId].devTools = port
+        const pendingMessages = tabMetaMap[tabId].pendingMessages
+        tabMetaMap[tabId].pendingMessages = []
+        pendingMessages.forEach((message) => {
+          port.postMessage(message)
+        })
       } else {
-        // eslint-disable-next-line no-console
-        console.warn('Failed to send message to agent since the agent is not connected')
+        tabMetaMap[tabId] = { devTools: port, pendingMessages: [] }
       }
+      if (message.kind === '_init') injectContentScript(tabId)
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      chrome.tabs.sendMessage(tabId, message)
     }
   })
   port.onDisconnect.addListener((_port) => {
@@ -80,28 +84,27 @@ const newDevToolsConnection = (port: chrome.runtime.Port) => {
 }
 
 // connections from content script
-const newContentScriptConnection = (port: chrome.runtime.Port) => {
-  const tabId = port.sender?.tab?.id
-  if (tabId === undefined) return
+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) return
-  port.onMessage.addListener((message: AgentSendMessageMeta) => {
-    const tabMeta = tabMetaMap[tabId]
-    if (!tabMeta) return
-    if (message.kind === '_init') {
-      tabMeta.contentScript = port
-      tabMeta.devTools.postMessage({ kind: '_connected' })
-    } else {
-      tabMeta.devTools.postMessage(message)
-    }
-  })
-  port.onDisconnect.addListener((_port) => {
-    const tabMeta = tabMetaMap[tabId]
-    if (!tabMeta) return
-    tabMeta.contentScript = undefined
-  })
-  injectAgentScript(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)
+  }
+})
 
 // inject agent when reloaded
 chrome.webNavigation.onDOMContentLoaded.addListener((ev) => {

package/src/content/index.ts

@@ -1,5 +1,6 @@
 import { type protocol } from 'glass-easel-devtools-agent'
-import { ConnectionSource, inFirefox } from '../utils'
+import { type AgentSendMessageMeta } from '../agent'
+import { inFirefox } from '../utils'
 
 declare function cloneInto<T>(x: T, target: Window): T
 
@@ -29,17 +30,12 @@ hostElement.setAttribute('style', hostNodeStyle)
 document.documentElement.appendChild(hostElement)
 
 // messaging from background to agent
-const background = chrome.runtime.connect({
-  name: ConnectionSource.ContentScript,
-})
-const sendHeartbeat = () => {
-  setTimeout(() => {
-    background.postMessage({ kind: '' })
-    sendHeartbeat()
-  }, 15000)
+const postToBackground = (msg: AgentSendMessageMeta) => {
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  chrome.runtime.sendMessage(msg)
 }
-sendHeartbeat()
-background.onMessage.addListener((message: protocol.AgentRecvMessage) => {
+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),
   })
@@ -49,5 +45,6 @@ background.onMessage.addListener((message: protocol.AgentRecvMessage) => {
 // messaging from agent to background
 hostElement.addEventListener('glass-easel-devtools-agent-send', (ev) => {
   const { detail } = ev as CustomEvent<protocol.AgentSendMessage>
-  background.postMessage(detail)
+  postToBackground(detail)
 })
+postToBackground({ kind: '_preinit' })

package/src/panel/index.ts

@@ -7,31 +7,42 @@ import {
 } from 'glass-easel-devtools-panel'
 import { ConnectionSource } from '../utils'
 
-export type PanelSendMessageMeta = PanelSendMessage | { kind: '_init'; tabId: number }
+export type PanelSendMessageMeta =
+  | PanelSendMessage
+  | { kind: '_init' | '_reconnect'; tabId: number }
 export type PanelRecvMessageMeta = PanelRecvMessage | { kind: '_connected' }
 
 // build connection to main service
-const background = chrome.runtime.connect({
+let background = chrome.runtime.connect({
   name: ConnectionSource.DevToolsPanel,
 })
 const postToBackground = (msg: PanelSendMessageMeta) => {
-  background.postMessage(msg)
+  try {
+    background.postMessage(msg)
+  } catch {
+    reconnect()
+    background.postMessage(msg)
+  }
 }
-const sendHeartbeat = () => {
-  setTimeout(() => {
-    postToBackground({ kind: '' })
-    sendHeartbeat()
-  }, 15000)
+const bindListener = () => {
+  background.onMessage.addListener((message: PanelRecvMessageMeta) => {
+    if (message.kind === '_connected') {
+      restart()
+    } else {
+      listener?.(message)
+    }
+  })
 }
-sendHeartbeat()
-background.onMessage.addListener((message: PanelRecvMessageMeta) => {
-  if (message.kind === '_connected') {
-    restart()
-  } else {
-    listener?.(message)
-  }
-})
+const reconnect = () => {
+  background = chrome.runtime.connect({
+    name: ConnectionSource.DevToolsPanel,
+  })
+  bindListener()
+  postToBackground({ kind: '_reconnect', tabId: chrome.devtools.inspectedWindow.tabId })
+}
+bindListener()
 postToBackground({ kind: '_init', tabId: chrome.devtools.inspectedWindow.tabId })
+background.onDisconnect.addListener(reconnect)
 
 // passing massage through channel
 let listener: ((data: PanelRecvMessage) => void) | null = null