extension-develop 0.0.0-next-20250825144602

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

@@ -0,0 +1,168 @@
+let webSocket = null
+let triedWsFallback = false
+
+// Get instance ID from the service worker context
+const instanceId = '__INSTANCE_ID__'
+
+async function connect() {
+  if (webSocket) {
+    // If already connected, do nothing
+    return
+  }
+
+  const port = '__RELOAD_PORT__'
+  let reconnectAttempts = 0
+  const maxReconnectAttempts = 10
+  const baseBackoffMs = 250
+  const maxBackoffMs = 5000
+
+  const connectTo = (url) => {
+    webSocket = new WebSocket(url)
+
+    webSocket.onerror = (_event) => {
+      try {
+        webSocket && webSocket.close()
+      } catch {}
+      if (!triedWsFallback) {
+        triedWsFallback = true
+        connectTo(`ws://127.0.0.1:${port}`)
+      }
+    }
+
+    webSocket.onopen = () => {
+      reconnectAttempts = 0
+      console.info(
+        `[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
+      }
+
+      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('[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}`)
+}
+
+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 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 &&
+      // Show only unpackaged extensions (Firefox reports "temporary")
+      (extension.installType === 'development' ||
+        extension.installType === 'temporary')
+    )
+  })
+}
+
+async function messageAllExtensions(changedFile) {
+  // Check if the external extension is ready
+  const isExtensionReady = await checkExtensionReadiness()
+
+  if (isExtensionReady) {
+    const devExtensions = await getDevExtensions()
+    for (const extension of devExtensions) {
+      try {
+        await browser.runtime.sendMessage(extension.id, {changedFile})
+        console.info(
+          `[Extension.js] Add-On reloaded and ready for instance ${instanceId}.`
+        )
+      } catch (error) {
+        console.error(
+          `Error sending message to ${extension.id}: ${error.message}`
+        )
+      }
+    }
+  } else {
+    console.info(
+      `[Extension.js] External extension is not ready for instance ${instanceId}.`
+    )
+  }
+}
+
+async function checkExtensionReadiness() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true)
+    }, 1000)
+  })
+}

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

@@ -0,0 +1,57 @@
+import {handleFirstRun} from './define-initial-tab.js'
+import {connect, disconnect} from './reload-service.js'
+
+function bgGreen(str) {
+  return `background: transparent; color: #0971fe; ${str}`
+}
+
+async function handleTabOnExtensionLoad() {
+  console.log(
+    `%c
+██████████████████████████████████████████████████████████
+██████████████████████████████████████████████████████████
+████████████████████████████    ██████████████████████████
+█████████████████████████        ██████    ███████████████
+███████████████████████     ███   ███         ████████████
+██████████████████████    ██████        ███    ███████████
+███████████████████████     ██████    ██████   ███████████
+████████████████   ██████   ██████████████     ███████████
+█████████████       ████    ████████████      ████████████
+███████████     ██         █████████████   ███████████████
+██████████    ██████    █████████████████    █████████████
+███████████    ████████████████████████████    ███████████
+█████████████    █████████████████    ██████    ██████████
+███████████████   ██████████████        ██      ██████████
+████████████      ████████████    ████       █████████████
+███████████      █████████████   ██████    ███████████████
+███████████   ██████    ██████     ███████████████████████
+███████████    ████       ██████    ██████████████████████
+████████████         ██    ███     ███████████████████████
+███████████████    ██████        █████████████████████████
+██████████████████████████    ████████████████████████████
+██████████████████████████████████████████████████████████
+██████████████████████████████████████████████████████████
+MIT (c) ${new Date().getFullYear()} - Cezar Augusto and the Extension.js Authors.
+`,
+    bgGreen('')
+  )
+
+  try {
+    await handleFirstRun()
+  } catch (error) {
+    console.error('Error handling tabs on extension load:', error)
+  }
+}
+
+browser.runtime.onInstalled.addListener(async () => {
+  await handleTabOnExtensionLoad()
+
+  let isConnected = false
+
+  if (isConnected) {
+    disconnect()
+  } else {
+    await connect()
+    isConnected = true
+  }
+})

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

@@ -0,0 +1,69 @@
+async function getDevExtension() {
+  const allExtensions = await browser.management.getAll()
+
+  return allExtensions.filter((extension) => {
+    return (
+      // Reload extension
+      extension.name !== 'Extension.js DevTools' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })[0]
+}
+
+// Create a new tab and set it to background.
+export 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
+
+    // Return if url exists, meaning about:blank tab is already open
+    if (addonsTabExist) return
+
+    // Create an inactive about:blank tab
+    const addonsTab = await browser.tabs.create({url, active: false})
+
+    // Get the initial page tab and move the new addons tab to the first position.
+    // This will auto-activate the initial page tab because we set the addons tab to inactive
+    await browser.tabs.move(addonsTab.id, {index: 0})
+
+    // Reactivate the user-selected initial page tab
+    await browser.tabs.update(initialTab.id, {active: true})
+  } catch (error) {
+    console.error('[Extension.js] Error creating and manipulating tabs:', error)
+  }
+}
+
+// Function to handle first run logic
+export async function handleFirstRun() {
+  try {
+    const devExtension = await getDevExtension()
+
+    if (!devExtension) {
+      console.warn('[Extension.js] No development extensions found')
+      return
+    }
+
+    const result = await browser.storage.local.get(devExtension.id)
+
+    if (result[devExtension.id] && result[devExtension.id].didRun) {
+      return
+    }
+
+    // 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(
+      '[Extension.js] Error handling tabs on extension load:',
+      error
+    )
+  }
+}

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

@@ -0,0 +1,16 @@
+{
+  "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"
+  },
+  "icons": {
+    "16": "images/logo.png",
+    "48": "images/logo.png",
+    "128": "images/logo.png"
+  },
+  "permissions": ["management", "tabs", "storage"]
+}

package/dist/extensions/gecko-based-manager-extension/pages/sakura-dark.css

@@ -0,0 +1,268 @@
+/* $color-text: #dedce5; */
+/* Sakura.css v1.5.0
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+/* Body */
+html {
+  font-size: 62.5%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+}
+
+body {
+  font-size: 1.8rem;
+  line-height: 1.618;
+  max-width: 38em;
+  margin: auto;
+  color: #c9c9c9;
+  background-color: #222222;
+  padding: 13px;
+}
+
+@media (max-width: 684px) {
+  body {
+    font-size: 1.53rem;
+  }
+}
+@media (max-width: 382px) {
+  body {
+    font-size: 1.35rem;
+  }
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 700;
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+}
+
+h1 {
+  font-size: 2.35em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.75em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+p {
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+small,
+sub,
+sup {
+  font-size: 75%;
+}
+
+hr {
+  border-color: #ffffff;
+}
+
+a {
+  text-decoration: none;
+  color: #ffffff;
+}
+a:visited {
+  color: #e6e6e6;
+}
+a:hover {
+  color: #c9c9c9;
+  border-bottom: 2px solid #c9c9c9;
+}
+
+ul {
+  padding-left: 1.4em;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+li {
+  margin-bottom: 0.4em;
+}
+
+blockquote {
+  margin-left: 0px;
+  margin-right: 0px;
+  padding-left: 1em;
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
+  padding-right: 0.8em;
+  border-left: 5px solid #ffffff;
+  margin-bottom: 2.5rem;
+  background-color: #4a4a4a;
+}
+
+blockquote p {
+  margin-bottom: 0;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+/* Pre and Code */
+pre {
+  background-color: #4a4a4a;
+  display: block;
+  padding: 1em;
+  overflow-x: auto;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+  font-size: 0.9em;
+}
+
+code,
+kbd,
+samp {
+  font-size: 0.9em;
+  padding: 0 0.5em;
+  background-color: #4a4a4a;
+  white-space: pre-wrap;
+}
+
+pre > code {
+  padding: 0;
+  background-color: transparent;
+  white-space: pre;
+  font-size: 1em;
+}
+
+/* Tables */
+table {
+  text-align: justify;
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2rem;
+}
+
+td,
+th {
+  padding: 0.5em;
+  border-bottom: 1px solid #4a4a4a;
+}
+
+/* Buttons, forms and input */
+input,
+textarea {
+  border: 1px solid #c9c9c9;
+}
+input:focus,
+textarea:focus {
+  border: 1px solid #ffffff;
+}
+
+textarea {
+  width: 100%;
+}
+
+.button,
+button,
+input[type='submit'],
+input[type='reset'],
+input[type='button'],
+input[type='file']::file-selector-button {
+  display: inline-block;
+  padding: 5px 10px;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: #ffffff;
+  color: #222222;
+  border-radius: 1px;
+  border: 1px solid #ffffff;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.button[disabled],
+button[disabled],
+input[type='submit'][disabled],
+input[type='reset'][disabled],
+input[type='button'][disabled],
+input[type='file']::file-selector-button[disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+.button:hover,
+button:hover,
+input[type='submit']:hover,
+input[type='reset']:hover,
+input[type='button']:hover,
+input[type='file']::file-selector-button:hover {
+  background-color: #c9c9c9;
+  color: #222222;
+  outline: 0;
+}
+.button:focus-visible,
+button:focus-visible,
+input[type='submit']:focus-visible,
+input[type='reset']:focus-visible,
+input[type='button']:focus-visible,
+input[type='file']::file-selector-button:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+textarea,
+select,
+input {
+  color: #c9c9c9;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  margin-bottom: 10px;
+  background-color: #4a4a4a;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+textarea:focus,
+select:focus,
+input:focus {
+  border: 1px solid #ffffff;
+  outline: 0;
+}
+
+input[type='checkbox']:focus {
+  outline: 1px dotted #ffffff;
+}
+
+label,
+legend,
+fieldset {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}