npm - extension-develop - Versions diffs - 2.0.0-rc.9 → 2.0.1 - Mend

extension-develop 2.0.0-rc.9 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (606) hide show

package/dist/extensions/edge-manager-extension/pages/welcome.html CHANGED Viewed

@@ -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/edge-manager-extension/reload-service.js CHANGED Viewed

@@ -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__')
+  // 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} 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(
+        `Error sending message to ${extension.id}: ${error.message}`
+      )
+    }
+  }
+}
 async function getDevExtensions() {
   const allExtensions = await new Promise((resolve) => {
     chrome.management.getAll(resolve)
@@ -56,24 +113,34 @@ async function getDevExtensions() {
     return (
       // Do not include itself
       extension.id !== chrome.runtime.id &&
-      // Manager extension
-      extension.id !== 'hkklidinfhnfidkjiknmmbmcloigimco' &&
+      // Reload extension
+      extension.id !== 'igcijhgmihmjbbahdabahfbpffalcfnn' &&
       // Show only unpackaged extensions
       extension.installType === 'development'
     )
   })
 }
-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,51 +149,22 @@ 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)
   })
-  const responses = await Promise.all(messagePromises)
-  // 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]
-    })
-    webSocket.send(message)
-  }
-}
-async function checkExtensionReadiness() {
-  // Delay for 1 second
-  await delay(1000)
-  // Assume the extension is ready
-  return true
 }
 async function delay(ms) {
@@ -137,9 +175,125 @@ 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)
     }
   }, TEN_SECONDS_MS)
 }
+// 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('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/firefox-manager-extension/background.js CHANGED Viewed

@@ -1,8 +1,7 @@
-import {handleFirstRun} from './define-initial-tab.js'
-import {connect, disconnect} from './reload-service.js'
+// Raw background: rely on global-scope functions provided by included scripts
 function bgGreen(str) {
-  return `background: #0A0C10; color: #26FFB8; ${str}`
+  return `background: transparent; color: #0971fe; ${str}`
 }
 async function handleTabOnExtensionLoad() {
@@ -39,19 +38,48 @@ MIT (c) ${new Date().getFullYear()} - Cezar Augusto and the Extension.js Authors
   try {
     await handleFirstRun()
   } catch (error) {
-    console.error('Error handling tabs on extension load:', error)
+    console.error(
+      '[Extension.js] Error handling tabs on extension load:',
+      error
+    )
   }
+  try {
+    const [initialTab] = await browser.tabs.query({
+      active: true,
+      currentWindow: true
+    })
+    if (initialTab) {
+      await createFirefoxAddonsTab(initialTab, 'about:blank')
+    }
+  } catch {}
 }
+// Run on install and on startup to ensure welcome/connection behavior is reliable
 browser.runtime.onInstalled.addListener(async () => {
-  await handleTabOnExtensionLoad()
-  let isConnected = false
+  try {
+    await handleFirstRun()
+  } catch {}
+  try {
+    await handleTabOnExtensionLoad()
+  } catch {}
+  try {
+    await connect()
+  } catch {}
+})
-  if (isConnected) {
-    disconnect()
-  } else {
+browser.runtime.onStartup.addListener(async () => {
+  try {
+    await handleFirstRun()
+  } catch {}
+  try {
+    await handleTabOnExtensionLoad()
+  } catch {}
+  try {
     await connect()
-    isConnected = true
-  }
+  } catch {}
 })
+// Attempt immediate connection for resilience
+try {
+  connect()
+} catch {}

package/dist/extensions/firefox-manager-extension/define-initial-tab.js CHANGED Viewed

@@ -4,24 +4,22 @@ async function getDevExtension() {
   return allExtensions.filter((extension) => {
     return (
       // Reload extension
-      extension.name !== 'Extension Manager' &&
-      // Show only unpackaged extensions
-      extension.installType === 'development'
+      extension.name !== 'Extension.js DevTools' &&
+      // Show only unpackaged extensions (Firefox reports "temporary")
+      (extension.installType === 'development' ||
+        extension.installType === 'temporary')
     )
   })[0]
 }
 // Create a new tab and set it to background.
-export async function createFirefoxAddonsTab(initialTab, url) {
+async function createFirefoxAddonsTab(initialTab, url) {
   try {
-    // Check if an about:blank tab is already open
-    const tabs = await browser.tabs.query({url: 'about:blank'})
-    const addonsTabExist = tabs.length > 0
+    // If a tab with the desired URL already exists, do nothing
+    const existing = await browser.tabs.query({url})
+    if (existing && existing.length > 0) return
-    // Return if url exists, meaning about:blank tab is already open
-    if (addonsTabExist) return
-    // Create an inactive about:blank tab
+    // Create an inactive tab with the requested URL
     const addonsTab = await browser.tabs.create({url, active: false})
     // Get the initial page tab and move the new addons tab to the first position.
@@ -36,7 +34,7 @@ export async function createFirefoxAddonsTab(initialTab, url) {
 }
 // Function to handle first run logic
-export async function handleFirstRun() {
+async function handleFirstRun() {
   try {
     const devExtension = await getDevExtension()

package/dist/extensions/firefox-manager-extension/images/logo.png CHANGED Viewed

Binary file

package/dist/extensions/firefox-manager-extension/manifest.json CHANGED Viewed

@@ -1,11 +1,10 @@
 {
-  "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": 2,
   "background": {
-    "scripts": ["background.js"],
-    "type": "module"
+    "scripts": ["define-initial-tab.js", "reload-service.js", "background.js"]
   },
   "icons": {
     "16": "images/logo.png",

package/dist/extensions/firefox-manager-extension/pages/welcome.html CHANGED Viewed

@@ -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