extension-develop 2.0.0 → 2.0.3

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

@@ -1,62 +1,135 @@
 let webSocket = null
+let triedWsFallback = false
 
-export async function connect() {
+// Get instance ID from the service worker context
+const instanceId = '__INSTANCE_ID__'
+
+async function connect() {
   if (webSocket) {
     // If already connected, do nothing
     return
   }
 
-  webSocket = new WebSocket('wss://127.0.0.1:8002')
+  const port = '__RELOAD_PORT__'
+  let reconnectAttempts = 0
+  const maxReconnectAttempts = 10
+  const baseBackoffMs = 250
+  const maxBackoffMs = 5000
 
-  webSocket.onerror = (event) => {
-    console.error(`[Reload Service] Connection error: ${JSON.stringify(event)}`)
-    webSocket.close()
-  }
+  const connectTo = (url) => {
+    webSocket = new WebSocket(url)
 
-  webSocket.onopen = () => {
-    console.info(`[Reload Service] Connection opened.`)
-  }
-
-  webSocket.onmessage = async (event) => {
-    const message = JSON.parse(event.data)
-
-    if (message.status === 'serverReady') {
-      console.info('[Reload Service] Connection ready.')
-      await requestInitialLoadData()
+    webSocket.onerror = (_event) => {
+      try {
+        webSocket && webSocket.close()
+      } catch {}
+      if (!triedWsFallback) {
+        triedWsFallback = true
+        connectTo(`ws://127.0.0.1:${port}`)
+      }
     }
 
-    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)
+
+      // Only process messages for this instance
+      if (message.instanceId && message.instanceId !== instanceId) {
+        console.log(
+          `[Reload Service] Ignoring message from wrong instance: ${message.instanceId} (expected: ${instanceId})`
+        )
+        return
+      }
 
-      await messageAllExtensions(message.changedFile)
+      if (message.status === 'serverReady') {
+        console.info(
+          `[Extension.js] Server ready. Requesting initial load data...`
+        )
+        await requestInitialLoadData()
+      }
+
+      if (message.changedFile) {
+        clearTimeout(reloadDebounce)
+        reloadDebounce = setTimeout(async () => {
+          await messageAllExtensions(message.changedFile)
+        }, 200)
+      }
     }
-  }
 
-  webSocket.onclose = () => {
-    console.info('[Reload Service] Connection closed.')
-    webSocket = null
+    webSocket.onclose = () => {
+      console.info('[Extension.js] Connection closed.')
+      webSocket = null
+      if (reconnectAttempts >= maxReconnectAttempts) return
+      reconnectAttempts++
+      const backoff = Math.min(
+        maxBackoffMs,
+        baseBackoffMs * 2 ** reconnectAttempts
+      )
+      setTimeout(() => connectTo(url), backoff)
+    }
   }
+
+  connectTo(`wss://127.0.0.1:${port}`)
 }
 
-export function disconnect() {
+function disconnect() {
   if (webSocket) {
     webSocket.close()
   }
 }
 
+async function requestInitialLoadData() {
+  const devExtensions = await getDevExtensions()
+
+  for (const extension of devExtensions) {
+    try {
+      const response = await browser.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 browser.management.getAll()
+  const allExtensions = await new Promise((resolve) => {
+    try {
+      // Firefox MV2 supports callback-style getAll
+      browser.management.getAll(resolve)
+    } catch {
+      // Fallback to promise-based API
+      browser.management.getAll().then(resolve)
+    }
+  })
 
   return allExtensions.filter((extension) => {
     return (
       // Do not include itself
       extension.id !== browser.runtime.id &&
-      // Manager extension
-      extension.name !== 'Add-On Manager' &&
-      // Show only unpackaged extensions
-      extension.installType === 'development'
+      // Show only unpackaged extensions (Firefox reports "temporary")
+      (extension.installType === 'development' ||
+        extension.installType === 'temporary')
     )
   })
 }
@@ -70,7 +143,9 @@ async function messageAllExtensions(changedFile) {
     for (const extension of devExtensions) {
       try {
         await browser.runtime.sendMessage(extension.id, {changedFile})
-        console.info('[Reload Service] Add-On reloaded and ready.')
+        console.info(
+          `[Extension.js] Add-On reloaded and ready for instance ${instanceId}.`
+        )
       } catch (error) {
         console.error(
           `Error sending message to ${extension.id}: ${error.message}`
@@ -78,53 +153,16 @@ async function messageAllExtensions(changedFile) {
       }
     }
   } else {
-    console.info('[Reload Service] External extension is not ready.')
-  }
-}
-
-async function requestInitialLoadData() {
-  const devExtensions = await getDevExtensions()
-
-  const responses = await Promise.all(
-    devExtensions.map(async (extension) => {
-      try {
-        const result = await browser.runtime.sendMessage(extension.id, {
-          initialLoadData: true
-        })
-
-        return result
-      } catch (error) {
-        console.error(
-          `Error sending message to ${extension.id}: ${error.message}`
-        )
-        return null
-      }
-    })
-  )
-
-  // 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.find((response) => response !== null)
-    })
-
-    webSocket.send(message)
+    console.info(
+      `[Extension.js] External extension is not ready for instance ${instanceId}.`
+    )
   }
 }
 
 async function checkExtensionReadiness() {
-  // Delay for 1 second
-  await delay(1000)
-  // Assume the extension is ready
-  return true
-}
-
-async function delay(ms) {
-  return await new Promise((resolve) => setTimeout(resolve, ms)).catch(
-    (error) => {
-      console.error(`Error delaying: ${error.message}`)
-    }
-  )
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true)
+    }, 1000)
+  })
 }

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

@@ -2,7 +2,7 @@ import {handleFirstRun} from './define-initial-tab.js'
 import {connect, disconnect} from './reload-service.js'
 
 function bgGreen(str) {
-  return `background: #0A0C10; color: #26FFB8; ${str}`
+  return `background: transparent; color: #0971fe; ${str}`
 }
 
 async function handleTabOnExtensionLoad() {

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

@@ -4,7 +4,7 @@ async function getDevExtension() {
   return allExtensions.filter((extension) => {
     return (
       // Reload extension
-      extension.name !== 'Extension Manager' &&
+      extension.name !== 'Extension.js DevTools' &&
       // Show only unpackaged extensions
       extension.installType === 'development'
     )
@@ -31,7 +31,7 @@ export async function createFirefoxAddonsTab(initialTab, url) {
     // Reactivate the user-selected initial page tab
     await browser.tabs.update(initialTab.id, {active: true})
   } catch (error) {
-    console.error('Error creating and manipulating tabs:', error)
+    console.error('[Extension.js] Error creating and manipulating tabs:', error)
   }
 }
 
@@ -41,7 +41,7 @@ export async function handleFirstRun() {
     const devExtension = await getDevExtension()
 
     if (!devExtension) {
-      console.warn('No development extensions found')
+      console.warn('[Extension.js] No development extensions found')
       return
     }
 
@@ -51,12 +51,19 @@ export async function handleFirstRun() {
       return
     }
 
-    // Open the welcome page
-    await browser.tabs.create({url: './pages/welcome.html'})
+    // Open the welcome page only if not already open
+    const welcomeUrl = browser.runtime.getURL('./pages/welcome.html')
+    const existingWelcome = await browser.tabs.query({url: welcomeUrl})
+    if (!existingWelcome || existingWelcome.length === 0) {
+      await browser.tabs.create({url: './pages/welcome.html'})
+    }
 
     // Ensure the welcome page shows only once per extension installation
     await browser.storage.local.set({[devExtension.id]: {didRun: true}})
   } catch (error) {
-    console.error('Error handling tabs on extension load:', error)
+    console.error(
+      '[Extension.js] Error handling tabs on extension load:',
+      error
+    )
   }
 }

package/dist/extensions/gecko-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": 2,
   "background": {
     "scripts": ["background.js"],

package/dist/extensions/gecko-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/gecko-based-manager-extension/reload-service.js

@@ -1,4 +1,5 @@
 let webSocket = null
+let triedWsFallback = false
 
 export async function connect() {
   if (webSocket) {
@@ -6,38 +7,65 @@ export async function connect() {
     return
   }
 
-  webSocket = new WebSocket('wss://127.0.0.1:8002')
+  // Get port from the placeholder that will be replaced during build
+  const port = '__RELOAD_PORT__'
+  let reconnectAttempts = 0
+  const maxReconnectAttempts = 10
+  const baseBackoffMs = 250
+  const maxBackoffMs = 5000
 
-  webSocket.onerror = (event) => {
-    console.error(`[Reload Service] Connection error: ${JSON.stringify(event)}`)
-    webSocket.close()
-  }
-
-  webSocket.onopen = () => {
-    console.info(`[Reload Service] Connection opened.`)
-  }
-
-  webSocket.onmessage = async (event) => {
-    const message = JSON.parse(event.data)
+  const connectTo = (url) => {
+    webSocket = new WebSocket(url)
 
-    if (message.status === 'serverReady') {
-      console.info('[Reload Service] Connection ready.')
-      await requestInitialLoadData()
+    webSocket.onerror = (_event) => {
+      try {
+        webSocket && webSocket.close()
+      } catch {}
+      if (!triedWsFallback) {
+        triedWsFallback = true
+        connectTo(`ws://127.0.0.1:${port}`)
+      }
     }
 
-    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') {
+        console.info(
+          `[Extension.js] Server ready. Requesting initial load data...`
+        )
+      }
+
+      if (message.changedFile) {
+        clearTimeout(reloadDebounce)
+        reloadDebounce = setTimeout(async () => {
+          await messageAllExtensions(message.changedFile)
+        }, 200)
+      }
     }
-  }
 
-  webSocket.onclose = () => {
-    console.info('[Reload Service] Connection closed.')
-    webSocket = null
+    webSocket.onclose = () => {
+      console.info('[Extension.js] Connection closed.')
+      webSocket = null
+      if (reconnectAttempts >= maxReconnectAttempts) return
+      reconnectAttempts++
+      const backoff = Math.min(
+        maxBackoffMs,
+        baseBackoffMs * 2 ** reconnectAttempts
+      )
+      setTimeout(() => connectTo(url), backoff)
+    }
   }
+
+  connectTo(`wss://127.0.0.1:${port}`)
 }
 
 export function disconnect() {
@@ -70,15 +98,15 @@ async function messageAllExtensions(changedFile) {
     for (const extension of devExtensions) {
       try {
         await browser.runtime.sendMessage(extension.id, {changedFile})
-        console.info('[Reload Service] Add-On reloaded and ready.')
+        console.info('[Extension.js] Add-On reloaded and ready.')
       } catch (error) {
         console.error(
-          `Error sending message to ${extension.id}: ${error.message}`
+          `[Extension.js] Error sending message to ${extension.id}: ${error.message}`
         )
       }
     }
   } else {
-    console.info('[Reload Service] External extension is not ready.')
+    console.info('[Extension.js] External extension is not ready.')
   }
 }
 
@@ -124,7 +152,7 @@ async function checkExtensionReadiness() {
 async function delay(ms) {
   return await new Promise((resolve) => setTimeout(resolve, ms)).catch(
     (error) => {
-      console.error(`Error delaying: ${error.message}`)
+      console.error(`[Extension.js] Error delaying: ${error.message}`)
     }
   )
 }

package/dist/inject-chromium-client-loader.js

@@ -1,4 +1,86 @@
-"use strict";var F=Object.create;var u=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var _=(e,n)=>{for(var t in n)u(e,t,{get:n[t],enumerable:!0})},x=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of j(n))!N.call(e,r)&&r!==t&&u(e,r,{get:()=>n[r],enumerable:!(a=M(n,r))||a.enumerable});return e};var c=(e,n,t)=>(t=e!=null?F(T(e)):{},x(n||!e||!e.__esModule?u(t,"default",{value:e,enumerable:!0}):t,e)),O=e=>x(u({},"__esModule",{value:!0}),e);var H={};_(H,{default:()=>W});module.exports=O(H);var p=c(require("path")),b=require("loader-utils"),E=require("schema-utils");var C=c(require("path")),P=c(require("fs")),U=require("child_process"),A=require("package-manager-detector");var R=c(require("path")),s=require("@colors/colors/safe");var y=c(require("path")),S=y.default.join(process.cwd(),"node_modules/extension-develop/dist/certs"),m=["chrome","edge"],k=["firefox"],z=[...m,...k];var D=require("console");function v(e,n){return JSON.parse(JSON.stringify(e),function(r,l){let o=r.indexOf(":");if(o===-1)return l;let i=r.substring(0,o);(i===n||i==="chromium"&&m.includes(n)||i==="chromium"&&n.includes("chromium")||i==="gecko"&&n.includes("gecko"))&&(this[r.substring(o+1)]=l)})}var q={type:"object",properties:{test:{type:"string"},manifestPath:{type:"string"}}};function W(e){let n=this.getOptions(),t=n.manifestPath,a=n.browser,r=p.default.dirname(t),l=require(t),o=v(l,a);(0,E.validate)(q,n,{name:"reload:inject-background-client",baseDataPath:"options"});let i=(0,b.urlToRequest)(this.resourcePath),g=`
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>inject_chromium_client_loader
+});
+const external_path_namespaceObject = require("path");
+const external_fs_namespaceObject = require("fs");
+const external_loader_utils_namespaceObject = require("loader-utils");
+const external_schema_utils_namespaceObject = require("schema-utils");
+require("os");
+require("crypto");
+require("child_process");
+require("package-manager-detector");
+require("pintor");
+external_path_namespaceObject.join(process.cwd(), 'node_modules/extension-develop/dist/certs');
+const CHROMIUM_BASED_BROWSERS = [
+    'chrome',
+    'edge'
+];
+const GECKO_BASED_BROWSERS = [
+    'firefox'
+];
+[
+    ...CHROMIUM_BASED_BROWSERS,
+    ...GECKO_BASED_BROWSERS
+];
+function filterKeysForThisBrowser(manifest, browser) {
+    const patchedManifest = JSON.parse(JSON.stringify(manifest), function(key, value) {
+        const indexOfColon = key.indexOf(':');
+        if (-1 === indexOfColon) return value;
+        const prefix = key.substring(0, indexOfColon);
+        if (prefix === browser || 'chromium' === prefix && CHROMIUM_BASED_BROWSERS.includes(browser) || 'chromium' === prefix && browser.includes('chromium') || 'gecko' === prefix && browser.includes('gecko')) this[key.substring(indexOfColon + 1)] = value;
+    });
+    return patchedManifest;
+}
+const schema = {
+    type: 'object',
+    properties: {
+        test: {
+            type: 'string'
+        },
+        manifestPath: {
+            type: 'string'
+        }
+    }
+};
+function inject_chromium_client_loader(source) {
+    const options = this.getOptions();
+    const manifestPath = options.manifestPath;
+    const browser = options.browser;
+    const projectPath = external_path_namespaceObject.dirname(manifestPath);
+    const manifest = JSON.parse(external_fs_namespaceObject.readFileSync(manifestPath, 'utf-8'));
+    const patchedManifest = filterKeysForThisBrowser(manifest, browser);
+    (0, external_schema_utils_namespaceObject.validate)(schema, options, {
+        name: 'reload:inject-background-client',
+        baseDataPath: 'options'
+    });
+    const url = (0, external_loader_utils_namespaceObject.urlToRequest)(this.resourcePath);
+    const generalReloadCode = `
+  // Enhanced reload handler with cache-busting
   ;chrome.runtime.onMessageExternal.addListener(
     async (request, _sender, sendResponse) => {
       const managementInfo = await new Promise((resolve) => {
@@ -18,35 +100,77 @@
         return true
       }
   
-      // Reload the extension runtime if the manifest or
-      // service worker changes. 
+      // Enhanced reload logic for critical files
       if (
+        request.changedFile === 'declarative_net_request' ||
         request.changedFile === 'manifest.json' ||
         request.changedFile === 'service_worker' ||
         request.changedFile === '_locales'
       ) {
-        setTimeout(() => {
-          sendResponse({reloaded: true})
+        // Force immediate reload with cache-busting
+        try {
+          // Clear any cached data
+          if (chrome.storage && chrome.storage.local) {
+            await chrome.storage.local.clear();
+          }
+          
+          // Force reload with timestamp to bypass cache
+          const timestamp = Date.now();
+          console.log('\u{1F504} Forcing extension reload at:', timestamp);
+          
+          sendResponse({reloaded: true, timestamp: timestamp})
           chrome.runtime.reload()
-        }, 750)
+        } catch (error) {
+          console.error('\u{274C} Failed to reload extension:', error);
+          sendResponse({error: error.message})
+        }
       }
 
-      // Reload all tabs if the contextMenus code changes.
-      if (request.changedFile === 'contextMenus') {
-        sendResponse({reloaded: true})
-        chrome.tabs.query({}, (tabs) => {
-          if (!tabs) return
-          tabs.forEach((tab) => chrome.tabs.reload(tab.id))
-        })
-      }
-
-      // Reload all tabs if the declarative_net_request code changes.
-      if (request.changedFile === 'declarative_net_request') {
-        sendResponse({reloaded: true})
-        chrome.runtime.reload()
-      }
-  
       return true
     }
   );
-  `,f=o.background;if(f){let h=f?.scripts;if(h&&o.manifest_version===2)for(let d of[h[0]]){let w=p.default.resolve(r,d);if(i.includes(w))return`${g}${e}`}let $=f?.service_worker;if($&&o.manifest_version===3){let d=p.default.resolve(r,$);if(i.includes(d))return`${g}${e}`}}return e}
+  
+  // Additional cache-busting mechanism
+  ;(function() {
+    const cacheBuster = Date.now();
+    console.log('Background script loaded with cache buster:', cacheBuster);
+    
+    // Force reload if this script is older than 1 second (optimized for faster manifest reloads)
+    const scriptAge = Date.now() - cacheBuster;
+    if (scriptAge > 1000) {
+      console.log('Background script is stale, forcing reload');
+      chrome.runtime.reload();
+    }
+  })();
+  `;
+    let manifestBg = patchedManifest.background;
+    if ('firefox' !== browser) {
+        manifestBg = manifest["chromium:background"] || manifest["chrome:background"] || manifest["edge:background"] || manifestBg;
+        if (manifestBg) {
+            const backgroundScripts = (null == manifestBg ? void 0 : manifestBg.scripts) || (null == manifestBg ? void 0 : manifestBg["chromium:scripts"]) || (null == manifestBg ? void 0 : manifestBg["chrome:scripts"]) || (null == manifestBg ? void 0 : manifestBg["edge:scripts"]);
+            if (backgroundScripts) {
+                if (2 === patchedManifest.manifest_version) for (const bgScript of [
+                    backgroundScripts[0]
+                ]){
+                    const absoluteUrl = external_path_namespaceObject.resolve(projectPath, bgScript);
+                    if (url.includes(absoluteUrl)) return `${generalReloadCode}${source}`;
+                }
+            }
+            const serviceWorker = null == manifestBg ? void 0 : manifestBg.service_worker;
+            if (serviceWorker) {
+                if (3 === patchedManifest.manifest_version) {
+                    const absoluteUrl = external_path_namespaceObject.resolve(projectPath, serviceWorker);
+                    if (url.includes(absoluteUrl)) return `${generalReloadCode}${source}`;
+                }
+            }
+        }
+    }
+    return source;
+}
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});