extension-develop 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/ensure-hmr-for-scripts.js

@@ -1,3 +1,3 @@
-"use strict";var A=Object.create;var m=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var C=(t,n)=>{for(var s in n)m(t,s,{get:n[s],enumerable:!0})},b=(t,n,s,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of R(n))!_.call(t,r)&&r!==s&&m(t,r,{get:()=>n[r],enumerable:!(e=D(n,r))||e.enumerable});return t};var a=(t,n,s)=>(s=t!=null?A(P(t)):{},b(n||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),U=t=>b(m({},"__esModule",{value:!0}),t);var V={};C(V,{default:()=>S});module.exports=U(V);var x=a(require("path")),T=a(require("fs")),k=require("loader-utils"),O=require("schema-utils");var v=a(require("fs")),f=a(require("path")),j=a(require("parse5-utils"));var p=a(require("parse5-utils"));function g(t){try{return new URL(t),!0}catch{return!1}}function h(t,n){let{childNodes:s=[]}=t;for(let e of s)if(e.nodeName==="script"){let r=p.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"script"})}else if(e.nodeName==="link"){let r=p.default.getAttribute(e,"href"),i=p.default.getAttribute(e,"rel");if(!r||g(r))continue;n(i==="dns-prefetch"||i==="icon"||i==="manifest"||i==="modulepreload"||i==="preconnect"||i==="prefetch"||i==="preload"||i==="prerender"?{filePath:r,childNode:e,assetType:"staticHref"}:{filePath:r,childNode:e,assetType:"css"})}else if(e.nodeName==="a"||e.nodeName==="area"){let r=p.default.getAttribute(e,"href");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"staticHref"})}else if(e.nodeName==="audio"||e.nodeName==="embed"||e.nodeName==="iframe"||e.nodeName==="img"||e.nodeName==="input"||e.nodeName==="source"||e.nodeName==="track"||e.nodeName==="video"){let r=p.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"staticSrc"})}else h(e,n)}function N(t,n){let s={css:[],js:[],static:[]};if(!t)return s;let e=n||v.default.readFileSync(t,{encoding:"utf8"}),r=j.default.parse(e),i=(o,c)=>f.default.join(f.default.dirname(o),c.startsWith("/")?f.default.relative(f.default.dirname(o),c):c);for(let o of r.childNodes)if(o.nodeName==="html"){for(let c of o.childNodes)(c.nodeName==="head"||c.nodeName==="body")&&h(c,({filePath:u,assetType:y})=>{let d=i(t,u);switch(y){case"script":s.js?.push(d);break;case"css":s.css?.push(d);break;case"staticSrc":case"staticHref":if(u.startsWith("#"))break;s.static?.push(d);break;default:break}});return{css:s.css,js:s.js,static:s.static}}}var w=a(require("path")),$=a(require("fs")),q=require("child_process"),z=require("detect-package-manager");var H=a(require("path")),l=require("@colors/colors/safe");var E=a(require("path")),L=E.default.join(process.cwd(),"node_modules/extension-develop/dist/certs");function F(t){let n=w.default.join(t,"package.json");if(!$.default.existsSync(n))return!1;let s=JSON.parse($.default.readFileSync(n,"utf-8")),e=["react","vue","@angular/core","svelte","solid-js","preact"],r=s.dependencies||{},i=s.devDependencies||{};for(let o of e)if(r[o]||i[o])return!0;return!1}var J={type:"object",properties:{test:{type:"string"},manifestPath:{type:"string"},includeList:{type:"object"},excludeList:{type:"object"}}};function S(t){let n=this.getOptions(),s=n.manifestPath,e=x.default.dirname(s);(0,O.validate)(J,n,{name:"html:ensure-hmr-for-scripts",baseDataPath:"options"});let r=(0,k.urlToRequest)(this.resourcePath),i=`
+"use strict";var D=Object.create;var m=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var U=(t,n)=>{for(var s in n)m(t,s,{get:n[s],enumerable:!0})},b=(t,n,s,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of _(n))!C.call(t,r)&&r!==s&&m(t,r,{get:()=>n[r],enumerable:!(e=A(n,r))||e.enumerable});return t};var a=(t,n,s)=>(s=t!=null?D(P(t)):{},b(n||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),L=t=>b(m({},"__esModule",{value:!0}),t);var Y={};U(Y,{default:()=>k});module.exports=L(Y);var x=a(require("path")),S=a(require("fs")),T=require("loader-utils"),M=require("schema-utils");var v=a(require("fs")),d=a(require("path")),E=a(require("parse5-utils"));var p=a(require("parse5-utils"));function g(t){try{return new URL(t),!0}catch{return!1}}function h(t,n){let{childNodes:s=[]}=t;for(let e of s)if(e.nodeName==="script"){let r=p.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"script"})}else if(e.nodeName==="link"){let r=p.default.getAttribute(e,"href"),o=p.default.getAttribute(e,"rel");if(!r||g(r))continue;n(o==="dns-prefetch"||o==="icon"||o==="manifest"||o==="modulepreload"||o==="preconnect"||o==="prefetch"||o==="preload"||o==="prerender"?{filePath:r,childNode:e,assetType:"staticHref"}:{filePath:r,childNode:e,assetType:"css"})}else if(e.nodeName==="a"||e.nodeName==="area"){let r=p.default.getAttribute(e,"href");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"staticHref"})}else if(e.nodeName==="audio"||e.nodeName==="embed"||e.nodeName==="iframe"||e.nodeName==="img"||e.nodeName==="input"||e.nodeName==="source"||e.nodeName==="track"||e.nodeName==="video"){let r=p.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"staticSrc"})}else h(e,n)}function N(t,n){let s={css:[],js:[],static:[]};if(!t)return s;let e=n||v.default.readFileSync(t,{encoding:"utf8"}),r=E.default.parse(e),o=(i,c)=>d.default.join(d.default.dirname(i),c.startsWith("/")?d.default.relative(d.default.dirname(i),c):c);for(let i of r.childNodes)if(i.nodeName==="html"){for(let c of i.childNodes)(c.nodeName==="head"||c.nodeName==="body")&&h(c,({filePath:u,assetType:y})=>{let f=o(t,u);switch(y){case"script":s.js?.push(f);break;case"css":s.css?.push(f);break;case"staticSrc":case"staticHref":if(u.startsWith("#"))break;s.static?.push(f);break;default:break}});return{css:s.css,js:s.js,static:s.static}}}var O=a(require("path")),$=a(require("fs")),z=require("child_process"),J=require("detect-package-manager");var q=a(require("path")),l=require("@colors/colors/safe");var j=a(require("path")),H=j.default.join(process.cwd(),"node_modules/extension-develop/dist/certs"),F=["chrome","edge"],W=["firefox"],Z=[...F,...W];function w(t){let n=O.default.join(t,"package.json");if(!$.default.existsSync(n))return!1;let s=JSON.parse($.default.readFileSync(n,"utf-8")),e=["react","vue","@angular/core","svelte","solid-js","preact"],r=s.dependencies||{},o=s.devDependencies||{};for(let i of e)if(r[i]||o[i])return!0;return!1}var V={type:"object",properties:{test:{type:"string"},manifestPath:{type:"string"},includeList:{type:"object"},excludeList:{type:"object"}}};function k(t){let n=this.getOptions(),s=n.manifestPath,e=x.default.dirname(s);(0,M.validate)(V,n,{name:"html:ensure-hmr-for-scripts",baseDataPath:"options"});let r=(0,T.urlToRequest)(this.resourcePath),o=`
 if (import.meta.webpackHot) { import.meta.webpackHot.accept() };
-  `;if(F(e))return t;let o=n.includeList||{};for(let c of Object.entries(o)){let[,u]=c;if(u){if(!T.default.existsSync(u))return;let d=N(u)?.js||[];for(let M of d){let I=x.default.resolve(e,M);if(r.includes(I))return`${i}${t}`}}}return t}
+  `;if(w(e))return t;let i=n.includeList||{};for(let c of Object.entries(i)){let[,u]=c;if(u){if(!S.default.existsSync(u))return;let f=N(u)?.js||[];for(let R of f){let I=x.default.resolve(e,R);if(r.includes(I))return`${o}${t}`}}}return t}

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

@@ -7,38 +7,28 @@ export async function connect() {
     return
   }
 
-  try {
-    // Attempt to connect using wss (secure WebSocket)
-    webSocket = new WebSocket('wss://localhost:__RELOAD_PORT__')
-  } catch (error) {
-    console.warn(
-      'Extension.js ►►► Secure WebSocket (wss) failed, falling back to ws.',
-      error
-    )
-    // If wss fails, fallback to ws (non-secure WebSocket)
-    webSocket = new WebSocket('ws://localhost:__RELOAD_PORT__')
-  }
+  webSocket = new WebSocket('ws://localhost:__RELOAD_PORT__')
 
   webSocket.onerror = (event) => {
-    console.error(`Extension.js ►►► Connection error: ${JSON.stringify(event)}`)
+    console.error(`[Reload Service] Connection error: ${JSON.stringify(event)}`)
     webSocket.close()
   }
 
   webSocket.onopen = () => {
-    console.info(`Extension.js ►►► Connection opened.`)
+    console.info(`[Reload Service] Connection opened.`)
   }
 
   webSocket.onmessage = async (event) => {
     const message = JSON.parse(event.data)
 
     if (message.status === 'serverReady') {
-      console.info('Extension.js ►►► Connection ready.')
+      console.info('[Reload Service] Connection ready.')
       await requestInitialLoadData()
     }
 
     if (message.changedFile) {
       console.info(
-        `Extension.js ►►► Changes detected on ${message.changedFile}. Reloading extension...`
+        `[Reload Service] Changes detected on ${message.changedFile}. Reloading extension...`
       )
 
       await messageAllExtensions(message.changedFile)
@@ -46,7 +36,7 @@ export async function connect() {
   }
 
   webSocket.onclose = () => {
-    console.info('Extension.js ►►► Connection closed.')
+    console.info('[Reload Service] Connection closed.')
     webSocket = null
   }
 }
@@ -66,6 +56,8 @@ async function getDevExtensions() {
     return (
       // Do not include itself
       extension.id !== chrome.runtime.id &&
+      // Manager extension
+      extension.id !== 'hkklidinfhnfidkjiknmmbmcloigimco' &&
       // Show only unpackaged extensions
       extension.installType === 'development'
     )
@@ -81,7 +73,7 @@ async function messageAllExtensions(changedFile) {
     const reloadAll = devExtensions.map((extension) => {
       chrome.runtime.sendMessage(extension.id, {changedFile}, (response) => {
         if (response) {
-          console.info('Extension.js ►►► Extension reloaded and ready.')
+          console.info('[Reload Service] Extension reloaded and ready.')
         }
       })
 
@@ -90,7 +82,7 @@ async function messageAllExtensions(changedFile) {
 
     await Promise.all(reloadAll)
   } else {
-    console.info('Extension.js ►►► External extension is not ready.')
+    console.info('[Reload Service] External extension is not ready.')
   }
 }
 
@@ -118,7 +110,7 @@ async function requestInitialLoadData() {
 
   const responses = await Promise.all(messagePromises)
 
-  // We received the info from the user extension.
+  // 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({
@@ -145,7 +137,7 @@ export function keepAlive() {
   const keepAliveIntervalId = setInterval(() => {
     if (webSocket) {
       webSocket.send(JSON.stringify({status: 'ping'}))
-      console.info('Extension.js ►►► Listening for changes...')
+      console.info('[Reload Service] Listening for changes...')
     } else {
       clearInterval(keepAliveIntervalId)
     }

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

@@ -0,0 +1,58 @@
+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}`
+}
+chrome.tabs.query({active: true}, async ([initialTab]) => {
+  console.log(
+    `%c
+██████████████████████████████████████████████████████████
+██████████████████████████████████████████████████████████
+████████████████████████████    ██████████████████████████
+█████████████████████████        ██████    ███████████████
+███████████████████████     ███   ███         ████████████
+██████████████████████    ██████        ███    ███████████
+███████████████████████     ██████    ██████   ███████████
+████████████████   ██████   ██████████████     ███████████
+█████████████       ████    ████████████      ████████████
+███████████     ██         █████████████   ███████████████
+██████████    ██████    █████████████████    █████████████
+███████████    ████████████████████████████    ███████████
+█████████████    █████████████████    ██████    ██████████
+███████████████   ██████████████        ██      ██████████
+████████████      ████████████    ████       █████████████
+███████████      █████████████   ██████    ███████████████
+███████████   ██████    ██████     ███████████████████████
+███████████    ████       ██████    ██████████████████████
+████████████         ██    ███     ███████████████████████
+███████████████    ██████        █████████████████████████
+██████████████████████████    ████████████████████████████
+██████████████████████████████████████████████████████████
+██████████████████████████████████████████████████████████
+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/')
+  }
+})
+
+chrome.runtime.onInstalled.addListener(async () => {
+  let isConnected = false
+
+  if (isConnected) {
+    disconnect()
+  } else {
+    await connect()
+    isConnected = true
+    keepAlive()
+  }
+})

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

@@ -0,0 +1,67 @@
+async function getDevExtension() {
+  const allExtensions = await new Promise((resolve) => {
+    chrome.management.getAll(resolve)
+  })
+
+  const devExtensions = allExtensions.filter((extension) => {
+    return (
+      // Do not include itself
+      extension.id !== chrome.runtime.id &&
+      // Reload extension
+      extension.id !== 'igcijhgmihmjbbahdabahfbpffalcfnn' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })
+
+  return devExtensions[0]
+}
+
+// Ideas here are adapted from
+// https://github.com/jeremyben/webpack-chrome-extension-launcher
+// Released under MIT license.
+
+// Create a new tab and set it to background.
+// We want the user-selected page to be active,
+// not chrome://extensions.
+export function createExtensionsPageTab(initialTab, url) {
+  // Check if url tab is open
+  chrome.tabs.query({url: 'chrome://extensions/'}, (tabs) => {
+    const extensionsTabExist = tabs.length > 0
+
+    // Return if url exists
+    if (extensionsTabExist) return
+
+    // Create an inactive tab
+    chrome.tabs.create(
+      {url, active: false},
+      function setBackgroundTab(extensionsTab) {
+        // Get current url tab and move it left.
+        // This action auto-activates the tab
+        chrome.tabs.move(extensionsTab.id, {index: 0}, () => {
+          // Get user-selected initial page tab and activate the right tab
+          setTimeout(() => {
+            chrome.tabs.update(initialTab.id, {active: true})
+          }, 500)
+        })
+      }
+    )
+  })
+}
+
+// Function to handle first run logic
+export async function handleFirstRun() {
+  chrome.tabs.update({url: 'chrome://extensions/'})
+
+  const devExtension = await getDevExtension()
+
+  chrome.storage.local.get(devExtension.id, (result) => {
+    if (result[devExtension.id] && result[devExtension.id].didRun) {
+      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-manager-extension/manifest.json

@@ -0,0 +1,17 @@
+{
+  "name": "Extension Manager",
+  "description": "Extension.js developer tools for tabs and reload management.",
+  "version": "1.0",
+  "manifest_version": 3,
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAolEJq/DBHxY5dBpOqBRWNCl7vRPBvJPlpEzF19fYFVzzaH44AF6+sKjN3jwIKlsgI82F3TIuwoNFiN1yBu5Unf8SVBE4BTO92P02/ACcGYQxicgCLFUGQKlq4uSrwSPaBYl7FHcYl5SERgxnIGCGnaGMdL2vC7waCj2/U/iKoBF9I1lBH9/aKCSjTd3h2UYo7gg6n5nY/ENbzylDt42T3ATmvnVJfYhSNKA9Dv/zryknfnHYYgBKHtz7pDZwWnYdxs78n2VEKwGj7TgbXuIPDpCkrMnU9PTKpHbXFYARA4H9qYORQmYazfIxUZRnKQNSR+GAOGrb8JK+ijeQdwzDAwIDAQAB",
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "icons": {
+    "16": "./public/logo.png",
+    "48": "./public/logo.png",
+    "128": "./public/logo.png"
+  },
+  "permissions": ["management", "tabs", "storage"]
+}

package/dist/extensions/chromium-manager-extension/pages/welcome.js

@@ -0,0 +1,34 @@
+async function getUserExtension() {
+  const allExtensions = await chrome.management.getAll()
+
+  return allExtensions.filter((extension) => {
+    return (
+      // Do not include itself
+      extension.id !== chrome.runtime.id &&
+      // Reload extension
+      extension.id !== 'igcijhgmihmjbbahdabahfbpffalcfnn' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })
+}
+
+async function onStartup() {
+  const userExtension = await getUserExtension()
+  const extensionName = document.getElementById('extensionName')
+  const extensionDescription = document.getElementById('extensionDescription')
+
+  extensionName.innerText = userExtension[0].name
+  extensionName.title = `• Name: ${userExtension[0].name}
+• ID: ${userExtension[0].id}
+• Version: ${userExtension[0].version}`
+
+  extensionDescription.innerText = userExtension[0].description
+
+  const learnMore = document.getElementById('learnMore')
+  learnMore.addEventListener('click', () => {
+    chrome.tabs.create({url: 'https://extension.js.org/'})
+  })
+}
+
+onStartup()

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

@@ -0,0 +1,145 @@
+const TEN_SECONDS_MS = 10 * 1000
+let webSocket = null
+
+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()
+  }
+
+  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()
+    }
+
+    if (message.changedFile) {
+      console.info(
+        `[Reload Service] Changes detected on ${message.changedFile}. Reloading extension...`
+      )
+
+      await messageAllExtensions(message.changedFile)
+    }
+  }
+
+  webSocket.onclose = () => {
+    console.info('[Reload Service] Connection closed.')
+    webSocket = null
+  }
+}
+
+export function disconnect() {
+  if (webSocket) {
+    webSocket.close()
+  }
+}
+
+async function getDevExtensions() {
+  const allExtensions = await new Promise((resolve) => {
+    chrome.management.getAll(resolve)
+  })
+
+  return allExtensions.filter((extension) => {
+    return (
+      // Do not include itself
+      extension.id !== chrome.runtime.id &&
+      // Manager extension
+      extension.id !== 'hkklidinfhnfidkjiknmmbmcloigimco' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })
+}
+
+async function messageAllExtensions(changedFile) {
+  // Check if the external extension is ready
+  const isExtensionReady = await checkExtensionReadiness()
+
+  if (isExtensionReady) {
+    const devExtensions = await getDevExtensions()
+    const reloadAll = devExtensions.map((extension) => {
+      chrome.runtime.sendMessage(extension.id, {changedFile}, (response) => {
+        if (response) {
+          console.info('[Reload Service] Extension reloaded and ready.')
+        }
+      })
+
+      return true
+    })
+
+    await Promise.all(reloadAll)
+  } else {
+    console.info('[Reload Service] External extension is not ready.')
+  }
+}
+
+async function requestInitialLoadData() {
+  const devExtensions = await getDevExtensions()
+
+  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)
+          }
+        }
+      )
+    })
+  })
+
+  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) {
+  return await new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function keepAlive() {
+  const keepAliveIntervalId = setInterval(() => {
+    if (webSocket) {
+      webSocket.send(JSON.stringify({status: 'ping'}))
+      console.info('[Reload Service] Listening for changes...')
+    } else {
+      clearInterval(keepAliveIntervalId)
+    }
+  }, TEN_SECONDS_MS)
+}

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

@@ -0,0 +1,58 @@
+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}`
+}
+chrome.tabs.query({active: true}, async ([initialTab]) => {
+  console.log(
+    `%c
+██████████████████████████████████████████████████████████
+██████████████████████████████████████████████████████████
+████████████████████████████    ██████████████████████████
+█████████████████████████        ██████    ███████████████
+███████████████████████     ███   ███         ████████████
+██████████████████████    ██████        ███    ███████████
+███████████████████████     ██████    ██████   ███████████
+████████████████   ██████   ██████████████     ███████████
+█████████████       ████    ████████████      ████████████
+███████████     ██         █████████████   ███████████████
+██████████    ██████    █████████████████    █████████████
+███████████    ████████████████████████████    ███████████
+█████████████    █████████████████    ██████    ██████████
+███████████████   ██████████████        ██      ██████████
+████████████      ████████████    ████       █████████████
+███████████      █████████████   ██████    ███████████████
+███████████   ██████    ██████     ███████████████████████
+███████████    ████       ██████    ██████████████████████
+████████████         ██    ███     ███████████████████████
+███████████████    ██████        █████████████████████████
+██████████████████████████    ████████████████████████████
+██████████████████████████████████████████████████████████
+██████████████████████████████████████████████████████████
+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/')
+  }
+})
+
+chrome.runtime.onInstalled.addListener(async () => {
+  let isConnected = false
+
+  if (isConnected) {
+    disconnect()
+  } else {
+    await connect()
+    isConnected = true
+    keepAlive()
+  }
+})

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

@@ -0,0 +1,67 @@
+async function getDevExtension() {
+  const allExtensions = await new Promise((resolve) => {
+    chrome.management.getAll(resolve)
+  })
+
+  const devExtensions = allExtensions.filter((extension) => {
+    return (
+      // Do not include itself
+      extension.id !== chrome.runtime.id &&
+      // Reload extension
+      extension.id !== 'igcijhgmihmjbbahdabahfbpffalcfnn' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })
+
+  return devExtensions[0]
+}
+
+// Ideas here are adapted from
+// https://github.com/jeremyben/webpack-chrome-extension-launcher
+// Released under MIT license.
+
+// Create a new tab and set it to background.
+// We want the user-selected page to be active,
+// not chrome://extensions.
+export function createExtensionsPageTab(initialTab, url) {
+  // Check if url tab is open
+  chrome.tabs.query({url: 'chrome://extensions/'}, (tabs) => {
+    const extensionsTabExist = tabs.length > 0
+
+    // Return if url exists
+    if (extensionsTabExist) return
+
+    // Create an inactive tab
+    chrome.tabs.create(
+      {url, active: false},
+      function setBackgroundTab(extensionsTab) {
+        // Get current url tab and move it left.
+        // This action auto-activates the tab
+        chrome.tabs.move(extensionsTab.id, {index: 0}, () => {
+          // Get user-selected initial page tab and activate the right tab
+          setTimeout(() => {
+            chrome.tabs.update(initialTab.id, {active: true})
+          }, 500)
+        })
+      }
+    )
+  })
+}
+
+// Function to handle first run logic
+export async function handleFirstRun() {
+  chrome.tabs.update({url: 'chrome://extensions/'})
+
+  const devExtension = await getDevExtension()
+
+  chrome.storage.local.get(devExtension.id, (result) => {
+    if (result[devExtension.id] && result[devExtension.id].didRun) {
+      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/edge-manager-extension/manifest.json

@@ -0,0 +1,17 @@
+{
+  "name": "Extension Manager",
+  "description": "Extension.js developer tools for tabs and reload management.",
+  "version": "1.0",
+  "manifest_version": 3,
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAolEJq/DBHxY5dBpOqBRWNCl7vRPBvJPlpEzF19fYFVzzaH44AF6+sKjN3jwIKlsgI82F3TIuwoNFiN1yBu5Unf8SVBE4BTO92P02/ACcGYQxicgCLFUGQKlq4uSrwSPaBYl7FHcYl5SERgxnIGCGnaGMdL2vC7waCj2/U/iKoBF9I1lBH9/aKCSjTd3h2UYo7gg6n5nY/ENbzylDt42T3ATmvnVJfYhSNKA9Dv/zryknfnHYYgBKHtz7pDZwWnYdxs78n2VEKwGj7TgbXuIPDpCkrMnU9PTKpHbXFYARA4H9qYORQmYazfIxUZRnKQNSR+GAOGrb8JK+ijeQdwzDAwIDAQAB",
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "icons": {
+    "16": "./public/logo.png",
+    "48": "./public/logo.png",
+    "128": "./public/logo.png"
+  },
+  "permissions": ["management", "tabs", "storage"]
+}