extension-develop 2.0.4 → 2.1.1

package/dist/add-content-script-wrapper.js

@@ -125,13 +125,17 @@ class ReactContentScriptWrapper {
     // Create shadow root for style isolation
     this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
 
+    // Create a host element inside the shadow root for rendering
+    const host = document.createElement('div')
+    this.shadowRoot.appendChild(host)
+
     // Inject styles FIRST
     console.log('[Extension.js] About to inject styles')
     await this.injectStyles()
 
     // Render React content
     console.log('[Extension.js] About to render React content')
-    const result = this.renderFunction(this.shadowRoot as any)
+    const result = this.renderFunction(host)
     if (typeof result === 'function') {
       this.unmountFunction = result
     }
@@ -198,8 +202,8 @@ class ReactContentScriptWrapper {
         // Check if we have hardcoded content for this stylesheet
         if (cssContentMap[stylesheet]) {
           const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\\n'
-          console.log(\`[Extension.js] Successfully injected React \${stylesheet} content\`)
+          allCSS += cssContent + '\n'
+          console.log('[Extension.js] Successfully injected React', stylesheet, 'content')
           continue
         }
         
@@ -208,7 +212,7 @@ class ReactContentScriptWrapper {
         const response = await fetch(cssUrl)
         const text = await response.text()
         if (response.ok) {
-          allCSS += text + '\\n'
+          allCSS += text + '\n'
           console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
         } else {
           console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
@@ -405,13 +409,17 @@ class VueContentScriptWrapper {
     // Create shadow root for style isolation
     this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
 
+    // Create a host element inside the shadow root for rendering
+    const host = document.createElement('div')
+    this.shadowRoot.appendChild(host)
+
     // Inject styles FIRST
     console.log('[Extension.js] About to inject styles')
     await this.injectStyles()
 
     // Render Vue content
     console.log('[Extension.js] About to render Vue content')
-    const result = this.renderFunction(this.shadowRoot as any)
+    const result = this.renderFunction(host)
     if (typeof result === 'function') {
       this.unmountFunction = result
     }
@@ -478,8 +486,8 @@ class VueContentScriptWrapper {
         // Check if we have hardcoded content for this stylesheet
         if (cssContentMap[stylesheet]) {
           const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\\n'
-          console.log(\`[Extension.js] Successfully injected Vue \${stylesheet} content\`)
+          allCSS += cssContent + '\n'
+          console.log('[Extension.js] Successfully injected Vue', stylesheet, 'content')
           continue
         }
         
@@ -488,7 +496,7 @@ class VueContentScriptWrapper {
         const response = await fetch(cssUrl)
         const text = await response.text()
         if (response.ok) {
-          allCSS += text + '\\n'
+          allCSS += text + '\n'
           console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
         } else {
           console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
@@ -683,13 +691,17 @@ class SvelteContentScriptWrapper {
     // Create shadow root for style isolation
     this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
 
+    // Create a host element inside the shadow root for rendering
+    const host = document.createElement('div')
+    this.shadowRoot.appendChild(host)
+
     // Inject styles FIRST
     console.log('[Extension.js] About to inject styles')
     await this.injectStyles()
 
     // Render Svelte content
     console.log('[Extension.js] About to render Svelte content')
-    const result = this.renderFunction(this.shadowRoot as any)
+    const result = this.renderFunction(host)
     if (typeof result === 'function') {
       this.unmountFunction = result
     }
@@ -756,8 +768,8 @@ class SvelteContentScriptWrapper {
         // Check if we have hardcoded content for this stylesheet
         if (cssContentMap[stylesheet]) {
           const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\\n'
-          console.log(\`[Extension.js] Successfully injected Svelte \${stylesheet} content\`)
+          allCSS += cssContent + '\n'
+          console.log('[Extension.js] Successfully injected Svelte', stylesheet, 'content')
           continue
         }
         
@@ -766,7 +778,7 @@ class SvelteContentScriptWrapper {
         const response = await fetch(cssUrl)
         const text = await response.text()
         if (response.ok) {
-          allCSS += text + '\\n'
+          allCSS += text + '\n'
           console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
         } else {
           console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)

package/dist/add-hmr-accept-code.js

@@ -64,6 +64,7 @@ function add_hmr_accept_code(source) {
         name: "scripts:add-hmr-accept-code",
         baseDataPath: 'options'
     });
+    if (source.includes('import.meta.webpackHot')) return source;
     const url = (0, external_loader_utils_namespaceObject.urlToRequest)(this.resourcePath);
     const reloadCode = `
 // TODO: cezaraugusto re-visit this

package/dist/develop-lib/config-types.d.ts

@@ -34,6 +34,7 @@ export interface BuildOptions {
     zipSource?: boolean;
     polyfill?: boolean;
     silent?: boolean;
+    exitOnError?: boolean;
 }
 export interface PreviewOptions extends BrowserOptionsBase {
     mode: 'production';

package/dist/develop-lib/get-project-path.d.ts

@@ -1,6 +1,6 @@
 export interface ProjectStructure {
     manifestPath: string;
-    packageJsonPath: string;
+    packageJsonPath?: string;
 }
 export declare function getProjectPath(pathOrRemoteUrl: string | undefined): Promise<string>;
 export declare function getProjectStructure(pathOrRemoteUrl: string | undefined): Promise<ProjectStructure>;

package/dist/develop-lib/messages.d.ts

@@ -25,6 +25,7 @@ export declare function downloadingText(url: string): string;
 export declare function unpackagingExtension(zipFilePath: string): string;
 export declare function unpackagedSuccessfully(): string;
 export declare function failedToDownloadOrExtractZIPFileError(error: any): string;
+export declare function invalidRemoteZip(url: string, contentType: string): string;
 export declare function isUsingExperimentalConfig(integration: any): string;
 export declare function installingDependencies(): string;
 export declare function installingDependenciesFailed(gitCommand: string, gitArgs: string[], code: number | null): string;

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

@@ -4,9 +4,14 @@ import {connect, disconnect, keepAlive} from './reload-service.js'
 function bgGreen(str) {
   return `background: transparent; color: #0971fe; ${str}`
 }
-chrome.tabs.query({active: true}, async ([initialTab]) => {
-  console.log(
-    `%c
+
+async function initManagerUI() {
+  try {
+    chrome.tabs.query({active: true, currentWindow: true}, async (tabs) => {
+      const initialTab = Array.isArray(tabs) ? tabs[0] : undefined
+
+      console.log(
+        `%c
 ██████████████████████████████████████████████████████████
 ██████████████████████████████████████████████████████████
 ████████████████████████████    ██████████████████████████
@@ -32,22 +37,43 @@ chrome.tabs.query({active: true}, async ([initialTab]) => {
 ██████████████████████████████████████████████████████████
 MIT (c) ${new Date().getFullYear()} - Cezar Augusto and the Extension.js Authors.
 `,
-    bgGreen('')
-  )
-
-  if (
-    initialTab.url === 'chrome://newtab/' ||
-    initialTab.url === 'chrome://welcome/'
-  ) {
-    await handleFirstRun()
-  } else {
-    createExtensionsPageTab(initialTab, 'chrome://extensions/')
-  }
+        bgGreen('')
+      )
+
+      if (!initialTab) {
+        try {
+          await handleFirstRun()
+        } catch {
+          try {
+            chrome.tabs.create({url: 'chrome://extensions/'})
+          } catch {}
+        }
+        return
+      }
+
+      if (
+        initialTab.url === 'chrome://newtab/' ||
+        initialTab.url === 'chrome://welcome/'
+      ) {
+        await handleFirstRun()
+      } else {
+        createExtensionsPageTab(initialTab, 'chrome://extensions/')
+      }
+    })
+  } catch {}
+}
+
+// Guard tab access and run after startup
+chrome.runtime.onStartup.addListener(async () => {
+  await initManagerUI()
 })
 
 chrome.runtime.onInstalled.addListener(async () => {
   let isConnected = false
 
+  // Ensure UI setup also runs on install (first run)
+  await initManagerUI()
+
   if (isConnected) {
     disconnect()
   } else {

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

@@ -20,7 +20,12 @@ export async function connect() {
   const maxBackoffMs = 5000
 
   const establish = () => {
-    webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
+    try {
+      webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
+    } catch (err) {
+      webSocket = null
+      return
+    }
 
     webSocket.onerror = (_event) => {
       try {
@@ -37,7 +42,12 @@ export async function connect() {
 
     let reloadDebounce
     webSocket.onmessage = async (event) => {
-      const message = JSON.parse(event.data)
+      let message = null
+      try {
+        message = JSON.parse(event.data)
+      } catch {
+        return
+      }
 
       // Only process messages for this instance
       if (message.instanceId && message.instanceId !== instanceId) {
@@ -77,6 +87,18 @@ export function disconnect() {
   }
 }
 
+// Ensure sockets are closed when the worker is suspended
+try {
+  chrome.runtime.onSuspend.addListener(() => {
+    if (webSocket) {
+      try {
+        webSocket.close()
+      } catch {}
+      webSocket = null
+    }
+  })
+} catch {}
+
 async function requestInitialLoadData() {
   const devExtensions = await getDevExtensions()
 

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

@@ -4,9 +4,14 @@ import {connect, disconnect, keepAlive} from './reload-service.js'
 function bgGreen(str) {
   return `background: transparent; color: #0971fe; ${str}`
 }
-chrome.tabs.query({active: true}, async ([initialTab]) => {
-  console.log(
-    `%c
+
+async function initManagerUI() {
+  try {
+    chrome.tabs.query({active: true, currentWindow: true}, async (tabs) => {
+      const initialTab = Array.isArray(tabs) ? tabs[0] : undefined
+
+      console.log(
+        `%c
 ██████████████████████████████████████████████████████████
 ██████████████████████████████████████████████████████████
 ████████████████████████████    ██████████████████████████
@@ -32,22 +37,43 @@ chrome.tabs.query({active: true}, async ([initialTab]) => {
 ██████████████████████████████████████████████████████████
 MIT (c) ${new Date().getFullYear()} - Cezar Augusto and the Extension.js Authors.
 `,
-    bgGreen('')
-  )
-
-  if (
-    initialTab.url === 'chrome://newtab/' ||
-    initialTab.url === 'chrome://welcome/'
-  ) {
-    await handleFirstRun()
-  } else {
-    createExtensionsPageTab(initialTab, 'chrome://extensions/')
-  }
+        bgGreen('')
+      )
+
+      if (!initialTab) {
+        try {
+          await handleFirstRun()
+        } catch {
+          try {
+            chrome.tabs.create({url: 'chrome://extensions/'})
+          } catch {}
+        }
+        return
+      }
+
+      if (
+        initialTab.url === 'chrome://newtab/' ||
+        initialTab.url === 'chrome://welcome/'
+      ) {
+        await handleFirstRun()
+      } else {
+        createExtensionsPageTab(initialTab, 'chrome://extensions/')
+      }
+    })
+  } catch {}
+}
+
+// Guard tab access and run after startup
+chrome.runtime.onStartup.addListener(async () => {
+  await initManagerUI()
 })
 
 chrome.runtime.onInstalled.addListener(async () => {
   let isConnected = false
 
+  // Ensure UI setup also runs on install (first run)
+  await initManagerUI()
+
   if (isConnected) {
     disconnect()
   } else {

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

@@ -17,7 +17,12 @@ export async function connect() {
   const maxBackoffMs = 5000
 
   const establish = () => {
-    webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
+    try {
+      webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
+    } catch (err) {
+      webSocket = null
+      return
+    }
 
     webSocket.onerror = (_event) => {
       try {
@@ -34,7 +39,12 @@ export async function connect() {
 
     let reloadDebounce
     webSocket.onmessage = async (event) => {
-      const message = JSON.parse(event.data)
+      let message = null
+      try {
+        message = JSON.parse(event.data)
+      } catch {
+        return
+      }
 
       if (message.status === 'serverReady') {
         await requestInitialLoadData()
@@ -69,6 +79,18 @@ export function disconnect() {
   }
 }
 
+// Ensure sockets are closed when the worker is suspended
+try {
+  chrome.runtime.onSuspend.addListener(() => {
+    if (webSocket) {
+      try {
+        webSocket.close()
+      } catch {}
+      webSocket = null
+    }
+  })
+} catch {}
+
 async function getDevExtensions() {
   const allExtensions = await new Promise((resolve) => {
     chrome.management.getAll(resolve)

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

@@ -4,9 +4,14 @@ import {connect, disconnect, keepAlive} from './reload-service.js'
 function bgGreen(str) {
   return `background: transparent; color: #0971fe; ${str}`
 }
-chrome.tabs.query({active: true}, async ([initialTab]) => {
-  console.log(
-    `%c
+
+async function initManagerUI() {
+  try {
+    chrome.tabs.query({active: true, currentWindow: true}, async (tabs) => {
+      const initialTab = Array.isArray(tabs) ? tabs[0] : undefined
+
+      console.log(
+        `%c
 ██████████████████████████████████████████████████████████
 ██████████████████████████████████████████████████████████
 ████████████████████████████    ██████████████████████████
@@ -32,22 +37,41 @@ chrome.tabs.query({active: true}, async ([initialTab]) => {
 ██████████████████████████████████████████████████████████
 MIT (c) ${new Date().getFullYear()} - Cezar Augusto and the Extension.js Authors.
 `,
-    bgGreen('')
-  )
-
-  if (
-    initialTab.url === 'chrome://newtab/' ||
-    initialTab.url === 'chrome://welcome/'
-  ) {
-    await handleFirstRun()
-  } else {
-    createExtensionsPageTab(initialTab, 'chrome://extensions/')
-  }
+        bgGreen('')
+      )
+
+      if (!initialTab) {
+        try {
+          await handleFirstRun()
+        } catch {
+          try {
+            chrome.tabs.create({url: 'chrome://extensions/'})
+          } catch {}
+        }
+        return
+      }
+
+      if (
+        initialTab.url === 'chrome://newtab/' ||
+        initialTab.url === 'chrome://welcome/'
+      ) {
+        await handleFirstRun()
+      } else {
+        createExtensionsPageTab(initialTab, 'chrome://extensions/')
+      }
+    })
+  } catch {}
+}
+
+chrome.runtime.onStartup.addListener(async () => {
+  await initManagerUI()
 })
 
 chrome.runtime.onInstalled.addListener(async () => {
   let isConnected = false
 
+  await initManagerUI()
+
   if (isConnected) {
     disconnect()
   } else {

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

@@ -20,7 +20,12 @@ export async function connect() {
   const maxBackoffMs = 5000
 
   const establish = () => {
-    webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
+    try {
+      webSocket = new WebSocket(`ws://127.0.0.1:${port}`)
+    } catch (err) {
+      webSocket = null
+      return
+    }
 
     webSocket.onerror = (_event) => {
       try {
@@ -37,7 +42,12 @@ export async function connect() {
 
     let reloadDebounce
     webSocket.onmessage = async (event) => {
-      const message = JSON.parse(event.data)
+      let message = null
+      try {
+        message = JSON.parse(event.data)
+      } catch {
+        return
+      }
 
       // Only process messages for this instance
       if (message.instanceId && message.instanceId !== instanceId) {
@@ -77,6 +87,18 @@ export function disconnect() {
   }
 }
 
+// Ensure sockets are closed when the worker is suspended
+try {
+  chrome.runtime.onSuspend.addListener(() => {
+    if (webSocket) {
+      try {
+        webSocket.close()
+      } catch {}
+      webSocket = null
+    }
+  })
+} catch {}
+
 async function requestInitialLoadData() {
   const devExtensions = await getDevExtensions()
 

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

@@ -17,7 +17,12 @@ async function connect() {
   const maxBackoffMs = 5000
 
   const connectTo = (url) => {
-    webSocket = new WebSocket(url)
+    try {
+      webSocket = new WebSocket(url)
+    } catch (err) {
+      webSocket = null
+      return
+    }
 
     webSocket.onerror = (_event) => {
       try {
@@ -38,7 +43,12 @@ async function connect() {
 
     let reloadDebounce
     webSocket.onmessage = async (event) => {
-      const message = JSON.parse(event.data)
+      let message = null
+      try {
+        message = JSON.parse(event.data)
+      } catch {
+        return
+      }
 
       // Only process messages for this instance
       if (message.instanceId && message.instanceId !== instanceId) {

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

@@ -55,3 +55,13 @@ browser.runtime.onInstalled.addListener(async () => {
     isConnected = true
   }
 })
+
+// Also initialize on browser startup for parity with Chromium behavior
+browser.runtime.onStartup.addListener(async () => {
+  try {
+    await handleTabOnExtensionLoad()
+  } catch {}
+  try {
+    await connect()
+  } catch {}
+})

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

@@ -15,7 +15,12 @@ export async function connect() {
   const maxBackoffMs = 5000
 
   const connectTo = (url) => {
-    webSocket = new WebSocket(url)
+    try {
+      webSocket = new WebSocket(url)
+    } catch (err) {
+      webSocket = null
+      return
+    }
 
     webSocket.onerror = (_event) => {
       try {
@@ -36,12 +41,20 @@ export async function connect() {
 
     let reloadDebounce
     webSocket.onmessage = async (event) => {
-      const message = JSON.parse(event.data)
+      let message = null
+      try {
+        message = JSON.parse(event.data)
+      } catch {
+        return
+      }
 
       if (message.status === 'serverReady') {
         console.info(
           `[Extension.js] Server ready. Requesting initial load data...`
         )
+        try {
+          await requestInitialLoadData()
+        } catch {}
       }
 
       if (message.changedFile) {