extension-develop 2.0.0 → 2.0.3

package/dist/extensions/chrome-manager-extension/reload-service.js

@@ -1,44 +1,74 @@
 const TEN_SECONDS_MS = 10 * 1000
+const INSTANT_MS = 100
 let webSocket = null
 
+// Get instance ID from the service worker context
+const instanceId = '__INSTANCE_ID__'
+
 export async function connect() {
   if (webSocket) {
     // If already connected, do nothing
     return
   }
 
-  webSocket = new WebSocket('ws://localhost:__RELOAD_PORT__')
-
-  webSocket.onerror = (event) => {
-    console.error(`[Reload Service] Connection error: ${JSON.stringify(event)}`)
-    webSocket.close()
-  }
+  // Get port from the placeholder that will be replaced during build
+  const port = '__RELOAD_PORT__'
 
-  webSocket.onopen = () => {
-    console.info(`[Reload Service] Connection opened.`)
-  }
+  let reconnectAttempts = 0
+  const maxReconnectAttempts = 10
+  const baseBackoffMs = 250
+  const maxBackoffMs = 5000
 
-  webSocket.onmessage = async (event) => {
-    const message = JSON.parse(event.data)
+  const establish = () => {
+    webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
 
-    if (message.status === 'serverReady') {
-      console.info('[Reload Service] Connection ready.')
-      await requestInitialLoadData()
+    webSocket.onerror = (_event) => {
+      try {
+        webSocket && webSocket.close()
+      } catch {}
     }
 
-    if (message.changedFile) {
+    webSocket.onopen = () => {
+      reconnectAttempts = 0
       console.info(
-        `[Reload Service] Changes detected on ${message.changedFile}. Reloading extension...`
+        `[Extension.js] Connection opened. Listening on port ${port} for instance ${instanceId}...`
       )
+    }
+
+    let reloadDebounce
+    webSocket.onmessage = async (event) => {
+      const message = JSON.parse(event.data)
+
+      // Only process messages for this instance
+      if (message.instanceId && message.instanceId !== instanceId) {
+        return
+      }
 
-      await messageAllExtensions(message.changedFile)
+      if (message.status === 'serverReady') {
+        await requestInitialLoadData()
+      }
+
+      if (message.changedFile) {
+        clearTimeout(reloadDebounce)
+        reloadDebounce = setTimeout(async () => {
+          await hardReloadAllExtensions(message.changedFile)
+        }, 200)
+      }
     }
-  }
 
-  webSocket.onclose = () => {
-    console.info('[Reload Service] Connection closed.')
-    webSocket = null
+    webSocket.onclose = () => {
+      webSocket = null
+      if (reconnectAttempts >= maxReconnectAttempts) return
+      reconnectAttempts++
+      const backoff = Math.min(
+        maxBackoffMs,
+        baseBackoffMs * 2 ** reconnectAttempts
+      )
+      setTimeout(establish, backoff)
+    }
   }
+
+  establish()
 }
 
 export function disconnect() {
@@ -47,6 +77,33 @@ export function disconnect() {
   }
 }
 
+async function requestInitialLoadData() {
+  const devExtensions = await getDevExtensions()
+
+  for (const extension of devExtensions) {
+    try {
+      const response = await chrome.runtime.sendMessage(extension.id, {
+        initialLoadData: true
+      })
+
+      if (response) {
+        // Send the response back to the server with instance ID
+        webSocket.send(
+          JSON.stringify({
+            status: 'clientReady',
+            instanceId: instanceId,
+            data: response
+          })
+        )
+      }
+    } catch (error) {
+      console.error(
+        `[Extension.js] Error sending message to ${extension.id}: ${error.message}`
+      )
+    }
+  }
+}
+
 async function getDevExtensions() {
   const allExtensions = await new Promise((resolve) => {
     chrome.management.getAll(resolve)
@@ -64,16 +121,26 @@ async function getDevExtensions() {
   })
 }
 
-async function messageAllExtensions(changedFile) {
-  // Check if the external extension is ready
-  const isExtensionReady = await checkExtensionReadiness()
+async function hardReloadAllExtensions(changedFile) {
+  // For critical files like manifest.json, skip the long delay
+  const isCriticalFile =
+    changedFile === 'manifest.json' ||
+    changedFile === 'service_worker' ||
+    changedFile === 'declarative_net_request'
+
+  // Check if the external extension is ready with optimized timing
+  const isExtensionReady = await checkExtensionReadiness(isCriticalFile)
 
   if (isExtensionReady) {
     const devExtensions = await getDevExtensions()
-    const reloadAll = devExtensions.map((extension) => {
+    const reloadAll = devExtensions.map(async (extension) => {
+      await hardReloadExtension(extension.id)
+
       chrome.runtime.sendMessage(extension.id, {changedFile}, (response) => {
         if (response) {
-          console.info('[Reload Service] Extension reloaded and ready.')
+          console.info(
+            `[Extension.js] Extension reloaded and ready for instance ${instanceId}.`
+          )
         }
       })
 
@@ -82,62 +149,147 @@ async function messageAllExtensions(changedFile) {
 
     await Promise.all(reloadAll)
   } else {
-    console.info('[Reload Service] External extension is not ready.')
+    console.info(
+      `[Extension.js] External extension is not ready for instance ${instanceId}.`
+    )
   }
 }
 
-async function requestInitialLoadData() {
-  const devExtensions = await getDevExtensions()
+async function checkExtensionReadiness(isCriticalFile = false) {
+  return new Promise((resolve) => {
+    // For critical files like manifest.json, use minimal delay
+    // For regular files, use longer delay to ensure stability
+    const delay = isCriticalFile ? INSTANT_MS : TEN_SECONDS_MS
 
-  const messagePromises = devExtensions.map(async (extension) => {
-    return await new Promise((resolve) => {
-      chrome.runtime.sendMessage(
-        extension.id,
-        {initialLoadData: true},
-        (response) => {
-          if (chrome.runtime.lastError) {
-            console.error(
-              `Error sending message to ${extension.id}: ${chrome.runtime.lastError.message}`
-            )
-            resolve(null)
-          } else {
-            resolve(response)
-          }
-        }
-      )
-    })
+    setTimeout(() => {
+      resolve(true)
+    }, delay)
   })
+}
+
+// Smart reload strategy: Try standard method first, fallback to CDP if needed
+async function hardReloadExtension(extensionId) {
+  try {
+    // Try the standard enable/disable reload first (feels natural)
+    await chrome.management.setEnabled(extensionId, false)
+    await chrome.management.setEnabled(extensionId, true)
+
+    // Verify it worked with a simple health check
+    const isHealthy = await verifyExtensionHealth(extensionId)
+    if (isHealthy) {
+      console.info(
+        `[Extension.js] Standard reload successful for ${extensionId}`
+      )
+      return true
+    }
+
+    // If we get here, the reload "succeeded" but extension isn't healthy
+    throw new Error('[Reload Service] Extension reloaded but not responding')
+  } catch (error) {
+    console.warn(
+      `[Extension.js] Standard reload failed for ${extensionId}, trying CDP fallback: ${error.message}`
+    )
 
-  const responses = await Promise.all(messagePromises)
+    // Only use CDP when the natural approach fails
+    return await attemptCDPFallback(extensionId)
+  }
+}
 
-  // We received the info from the use extension.
-  // All good, client is ready. Inform the server.
-  if (webSocket && webSocket.readyState === WebSocket.OPEN) {
-    const message = JSON.stringify({
-      status: 'clientReady',
-      data: responses[0]
+// CDP fallback for when standard reload fails
+async function attemptCDPFallback(extensionId) {
+  try {
+    // Get extension info to find its source path
+    const extensionInfo = await new Promise((resolve) => {
+      chrome.management.get(extensionId, resolve)
     })
 
-    webSocket.send(message)
+    if (!extensionInfo || !extensionInfo.path) {
+      console.warn(
+        `[Extension.js] No path info for ${extensionId}, CDP fallback not possible`
+      )
+      return false
+    }
+
+    // Use CDP client directly for seamless fallback
+    const cdpClient = await getCDPClient()
+    if (!cdpClient) {
+      console.warn(`[Extension.js] CDP client not available for ${extensionId}`)
+      return false
+    }
+
+    // Use CDP to force reload the extension
+    const success = await cdpClient.forceReloadExtension(extensionId)
+    if (success) {
+      console.info(`[Extension.js] CDP fallback successful for ${extensionId}`)
+      return true
+    } else {
+      console.warn(`[Extension.js] CDP fallback failed for ${extensionId}`)
+      return false
+    }
+  } catch (cdpError) {
+    console.error(
+      `[Extension.js] CDP fallback also failed for ${extensionId}: ${cdpError.message}`
+    )
+    return false
   }
 }
 
-async function checkExtensionReadiness() {
-  // Delay for 1 second
-  await delay(1000)
-  // Assume the extension is ready
-  return true
+// Get CDP client instance
+// This will be injected by the build process
+async function getCDPClient() {
+  try {
+    // The CDP client will be available globally when injected
+    if (typeof window !== 'undefined' && window.cdpClient) {
+      return window.cdpClient
+    }
+
+    // Fallback for service worker context
+    if (typeof globalThis !== 'undefined' && globalThis.cdpClient) {
+      return globalThis.cdpClient
+    }
+
+    console.warn(`[Extension.js] CDP client not found in global scope`)
+    return null
+  } catch (error) {
+    console.warn(`[Extension.js] Failed to get CDP client: ${error.message}`)
+    return null
+  }
 }
 
-async function delay(ms) {
-  return await new Promise((resolve) => setTimeout(resolve, ms))
+/**
+ * Simple health check to verify extension is responsive
+ */
+async function verifyExtensionHealth(extensionId) {
+  try {
+    // Simple ping to see if extension responds
+    await new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error('Health check timeout'))
+      }, 2000)
+
+      chrome.runtime.sendMessage(extensionId, {type: 'PING'}, (response) => {
+        clearTimeout(timeout)
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message))
+        } else {
+          resolve(response)
+        }
+      })
+    })
+    return true
+  } catch (error) {
+    console.warn(
+      `[Extension.js] Health check failed for ${extensionId}: ${error.message}`
+    )
+    return false
+  }
 }
 
 export function keepAlive() {
   const keepAliveIntervalId = setInterval(() => {
     if (webSocket) {
       webSocket.send(JSON.stringify({status: 'ping'}))
-      console.info('[Reload Service] Listening for changes...')
+      console.info('[Extension.js] Listening for changes...')
     } else {
       clearInterval(keepAliveIntervalId)
     }

package/dist/extensions/chromium-based-manager-extension/background.js

@@ -2,7 +2,7 @@ import {createExtensionsPageTab, handleFirstRun} from './define-initial-tab.js'
 import {connect, disconnect, keepAlive} from './reload-service.js'
 
 function bgGreen(str) {
-  return `background: #0A0C10; color: #26FFB8; ${str}`
+  return `background: transparent; color: #0971fe; ${str}`
 }
 chrome.tabs.query({active: true}, async ([initialTab]) => {
   console.log(

package/dist/extensions/chromium-based-manager-extension/define-initial-tab.js

@@ -60,7 +60,17 @@ export async function handleFirstRun() {
       return
     }
 
-    chrome.tabs.create({url: 'pages/welcome.html'})
+    // Guard against opening multiple welcome pages
+    chrome.tabs.query(
+      {url: chrome.runtime.getURL('pages/welcome.html')},
+      (tabs) => {
+        if (Array.isArray(tabs) && tabs.length > 0) {
+          // Already open; do not create another
+          return
+        }
+        chrome.tabs.create({url: 'pages/welcome.html'})
+      }
+    )
     // Ensure the welcome page shows only once per extension installation
     chrome.storage.local.set({[devExtension.id]: {didRun: true}})
   })

package/dist/extensions/chromium-based-manager-extension/manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "Extension Manager",
-  "description": "Extension.js developer tools for tabs and reload management.",
-  "version": "1.0",
+  "name": "Extension.js DevTools",
+  "description": "Extension.js built-in developer tools for browser instance ID __INSTANCE_ID__",
+  "version": "1.0.0",
   "manifest_version": 3,
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAolEJq/DBHxY5dBpOqBRWNCl7vRPBvJPlpEzF19fYFVzzaH44AF6+sKjN3jwIKlsgI82F3TIuwoNFiN1yBu5Unf8SVBE4BTO92P02/ACcGYQxicgCLFUGQKlq4uSrwSPaBYl7FHcYl5SERgxnIGCGnaGMdL2vC7waCj2/U/iKoBF9I1lBH9/aKCSjTd3h2UYo7gg6n5nY/ENbzylDt42T3ATmvnVJfYhSNKA9Dv/zryknfnHYYgBKHtz7pDZwWnYdxs78n2VEKwGj7TgbXuIPDpCkrMnU9PTKpHbXFYARA4H9qYORQmYazfIxUZRnKQNSR+GAOGrb8JK+ijeQdwzDAwIDAQAB",
   "background": {

package/dist/extensions/chromium-based-manager-extension/pages/welcome.html

@@ -3,10 +3,7 @@
   <head>
     <title>Welcome!</title>
     <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧩</text></svg>"
-    />
+    <link rel="icon" type="image/png" href="../images/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./sakura.css" media="screen" />
     <link
@@ -37,8 +34,8 @@
         <a target="_blank" href="https://github.com/cezaraugusto/extension"
           >🧩 Extension.js</a
         >
-        is a development tool for browser extensions with built-in support for
-        TypeScript, WebAssembly, React, and modern JavaScript.
+        is a development toolkit for building cross-browser extensions with
+        modern web technologies.
       </p>
       <button id="learnMore">
         🧩 Learn more about developing cross-browser extensions

package/dist/extensions/chromium-based-manager-extension/reload-service.js

@@ -1,4 +1,5 @@
 const TEN_SECONDS_MS = 10 * 1000
+const INSTANT_MS = 100
 let webSocket = null
 
 export async function connect() {
@@ -7,38 +8,59 @@ export async function connect() {
     return
   }
 
-  webSocket = new WebSocket('ws://localhost:__RELOAD_PORT__')
+  // Get port from the placeholder that will be replaced during build
+  const port = '__RELOAD_PORT__'
 
-  webSocket.onerror = (event) => {
-    console.error(`[Reload Service] Connection error: ${JSON.stringify(event)}`)
-    webSocket.close()
-  }
-
-  webSocket.onopen = () => {
-    console.info(`[Reload Service] Connection opened.`)
-  }
+  let reconnectAttempts = 0
+  const maxReconnectAttempts = 10
+  const baseBackoffMs = 250
+  const maxBackoffMs = 5000
 
-  webSocket.onmessage = async (event) => {
-    const message = JSON.parse(event.data)
+  const establish = () => {
+    webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
 
-    if (message.status === 'serverReady') {
-      console.info('[Reload Service] Connection ready.')
-      await requestInitialLoadData()
+    webSocket.onerror = (_event) => {
+      try {
+        webSocket && webSocket.close()
+      } catch {}
     }
 
-    if (message.changedFile) {
+    webSocket.onopen = () => {
+      reconnectAttempts = 0
       console.info(
-        `[Reload Service] Changes detected on ${message.changedFile}. Reloading extension...`
+        `[Extension.js] Connection opened. Listening on port ${port}...`
       )
+    }
+
+    let reloadDebounce
+    webSocket.onmessage = async (event) => {
+      const message = JSON.parse(event.data)
 
-      await messageAllExtensions(message.changedFile)
+      if (message.status === 'serverReady') {
+        await requestInitialLoadData()
+      }
+
+      if (message.changedFile) {
+        clearTimeout(reloadDebounce)
+        reloadDebounce = setTimeout(async () => {
+          await hardReloadAllExtensions(message.changedFile)
+        }, 200)
+      }
     }
-  }
 
-  webSocket.onclose = () => {
-    console.info('[Reload Service] Connection closed.')
-    webSocket = null
+    webSocket.onclose = () => {
+      webSocket = null
+      if (reconnectAttempts >= maxReconnectAttempts) return
+      reconnectAttempts++
+      const backoff = Math.min(
+        maxBackoffMs,
+        baseBackoffMs * 2 ** reconnectAttempts
+      )
+      setTimeout(establish, backoff)
+    }
   }
+
+  establish()
 }
 
 export function disconnect() {
@@ -64,13 +86,21 @@ async function getDevExtensions() {
   })
 }
 
-async function messageAllExtensions(changedFile) {
-  // Check if the external extension is ready
-  const isExtensionReady = await checkExtensionReadiness()
+async function hardReloadAllExtensions(changedFile) {
+  // For critical files like manifest.json, skip the delay entirely
+  const isCriticalFile =
+    changedFile === 'manifest.json' ||
+    changedFile === 'service_worker' ||
+    changedFile === 'declarative_net_request'
+
+  // Check if the external extension is ready with optimized timing
+  const isExtensionReady = await checkExtensionReadiness(isCriticalFile)
 
   if (isExtensionReady) {
     const devExtensions = await getDevExtensions()
-    const reloadAll = devExtensions.map((extension) => {
+    const reloadAll = devExtensions.map(async (extension) => {
+      await hardReloadExtension(extension.id)
+
       chrome.runtime.sendMessage(extension.id, {changedFile}, (response) => {
         if (response) {
           console.info('[Reload Service] Extension reloaded and ready.')
@@ -122,9 +152,11 @@ async function requestInitialLoadData() {
   }
 }
 
-async function checkExtensionReadiness() {
-  // Delay for 1 second
-  await delay(1000)
+async function checkExtensionReadiness(isCriticalFile = false) {
+  // For critical files like manifest.json, use minimal delay
+  // For regular files, use 1 second delay to ensure stability
+  const delayTime = isCriticalFile ? INSTANT_MS : 1000
+  await delay(delayTime)
   // Assume the extension is ready
   return true
 }
@@ -143,3 +175,128 @@ export function keepAlive() {
     }
   }, TEN_SECONDS_MS)
 }
+
+const toggleExtensionState = (extensionId, enabled) => {
+  if (extensionId === chrome.runtime.id) {
+    return Promise.resolve()
+  }
+  return new Promise((resolve) => {
+    chrome.management.setEnabled(extensionId, enabled, resolve)
+  })
+}
+
+// Smart reload strategy: Try standard method first, fallback to CDP if needed
+async function hardReloadExtension(extensionId) {
+  try {
+    // Try the standard enable/disable reload first (feels natural)
+    await toggleExtensionState(extensionId, false)
+    await toggleExtensionState(extensionId, true)
+
+    // Verify it worked with a simple health check
+    const isHealthy = await verifyExtensionHealth(extensionId)
+    if (isHealthy) {
+      console.info(
+        `[Extension.js] Standard reload successful for ${extensionId}`
+      )
+      return true
+    }
+
+    // If we get here, the reload "succeeded" but extension isn't healthy
+    throw new Error('Extension reloaded but not responding')
+  } catch (error) {
+    console.warn(
+      `[Extension.js] Standard reload failed for ${extensionId}, trying CDP fallback: ${error.message}`
+    )
+
+    // Only use CDP when the natural approach fails
+    return await attemptCDPFallback(extensionId)
+  }
+}
+
+// CDP fallback for when standard reload fails
+async function attemptCDPFallback(extensionId) {
+  try {
+    // Get extension info to find its source path
+    const extensionInfo = await new Promise((resolve) => {
+      chrome.management.get(extensionId, resolve)
+    })
+
+    if (!extensionInfo || !extensionInfo.path) {
+      console.warn(
+        `[Extension.js] No path info for ${extensionId}, CDP fallback not possible`
+      )
+      return false
+    }
+
+    // Use CDP client directly for seamless fallback
+    const cdpClient = await getCDPClient()
+    if (!cdpClient) {
+      console.warn(`[Extension.js] CDP client not available for ${extensionId}`)
+      return false
+    }
+
+    // Use CDP to force reload the extension
+    const success = await cdpClient.forceReloadExtension(extensionId)
+    if (success) {
+      console.info(`[Extension.js] CDP fallback successful for ${extensionId}`)
+      return true
+    } else {
+      console.warn(`[Extension.js] CDP fallback failed for ${extensionId}`)
+      return false
+    }
+  } catch (cdpError) {
+    console.error(
+      `[Extension.js] CDP fallback also failed for ${extensionId}: ${cdpError.message}`
+    )
+    return false
+  }
+}
+
+// Get CDP client instance
+// This will be injected by the build process
+async function getCDPClient() {
+  try {
+    // The CDP client will be available globally when injected
+    if (typeof window !== 'undefined' && window.cdpClient) {
+      return window.cdpClient
+    }
+
+    // Fallback for service worker context
+    if (typeof globalThis !== 'undefined' && globalThis.cdpClient) {
+      return globalThis.cdpClient
+    }
+
+    console.warn(`[Extension.js] CDP client not found in global scope`)
+    return null
+  } catch (error) {
+    console.warn(`[Extension.js] Failed to get CDP client: ${error.message}`)
+    return null
+  }
+}
+
+// Simple health check to verify extension is responsive
+async function verifyExtensionHealth(extensionId) {
+  try {
+    // Simple ping to see if extension responds
+    await new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error('Health check timeout'))
+      }, 2000)
+
+      chrome.runtime.sendMessage(extensionId, {type: 'PING'}, (response) => {
+        clearTimeout(timeout)
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message))
+        } else {
+          resolve(response)
+        }
+      })
+    })
+    return true
+  } catch (error) {
+    console.warn(
+      `[Extension.js] Health check failed for ${extensionId}: ${error.message}`
+    )
+    return false
+  }
+}

package/dist/extensions/edge-manager-extension/background.js

@@ -2,7 +2,7 @@ import {createExtensionsPageTab, handleFirstRun} from './define-initial-tab.js'
 import {connect, disconnect, keepAlive} from './reload-service.js'
 
 function bgGreen(str) {
-  return `background: #0A0C10; color: #26FFB8; ${str}`
+  return `background: transparent; color: #0971fe; ${str}`
 }
 chrome.tabs.query({active: true}, async ([initialTab]) => {
   console.log(