extension-develop 2.0.0-alpha.26 → 2.0.0-alpha.29

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

@@ -1,3 +1,3 @@
-"use strict";var R=Object.create;var m=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var A=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})},N=(t,n,s,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of A(n))!C.call(t,r)&&r!==s&&m(t,r,{get:()=>n[r],enumerable:!(e=I(n,r))||e.enumerable});return t};var a=(t,n,s)=>(s=t!=null?R(P(t)):{},N(n||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),L=t=>N(m({},"__esModule",{value:!0}),t);var G={};U(G,{default:()=>M});module.exports=L(G);var x=a(require("path")),S=a(require("fs")),T=require("loader-utils"),w=require("schema-utils");var b=a(require("fs")),d=a(require("path")),v=a(require("parse5-utils"));var f=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=f.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"script"})}else if(e.nodeName==="link"){let r=f.default.getAttribute(e,"href"),i=f.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=f.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=f.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"staticSrc"})}else h(e,n)}function j(t,n){let s={css:[],js:[],static:[]};if(!t)return s;let e=n||b.default.readFileSync(t,{encoding:"utf8"}),r=v.default.parse(e),i=(o,c)=>d.default.join(d.default.dirname(o),c.startsWith("/")?d.default.relative(d.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 p=i(t,u);switch(y){case"script":s.js?.push(p);break;case"css":s.css?.push(p);break;case"staticSrc":case"staticHref":if(u.startsWith("#"))break;s.static?.push(p);break;default:break}});return{css:s.css,js:s.js,static:s.static}}}var _=a(require("path")),$=a(require("fs")),z=require("child_process"),J=require("package-manager-detector");var q=a(require("path")),l=require("@colors/colors/safe");var E=a(require("path")),H=E.default.join(process.cwd(),"node_modules/extension-develop/dist/certs"),F=["chrome","edge"],W=["firefox"],Z=[...F,...W];function O(t){let n=_.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 V={type:"object",properties:{test:{type:"string"},manifestPath:{type:"string"},includeList:{type:"object"},excludeList:{type:"object"}}};function M(t){let n=this.getOptions(),s=n.manifestPath,e=x.default.dirname(s);(0,w.validate)(V,n,{name:"html:ensure-hmr-for-scripts",baseDataPath:"options"});let r=(0,T.urlToRequest)(this.resourcePath),i=`
+"use strict";var R=Object.create;var m=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var A=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 A(n))!C.call(t,r)&&r!==s&&m(t,r,{get:()=>n[r],enumerable:!(e=I(n,r))||e.enumerable});return t};var a=(t,n,s)=>(s=t!=null?R(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 G={};U(G,{default:()=>M});module.exports=L(G);var x=a(require("path")),S=a(require("fs")),T=require("loader-utils"),w=require("schema-utils");var N=a(require("fs")),d=a(require("path")),v=a(require("parse5-utils"));var f=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=f.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"script"})}else if(e.nodeName==="link"){let r=f.default.getAttribute(e,"href"),i=f.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=f.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=f.default.getAttribute(e,"src");if(!r||g(r))continue;n({filePath:r,childNode:e,assetType:"staticSrc"})}else h(e,n)}function j(t,n){let s={css:[],js:[],static:[]};if(!t)return s;let e=n||N.default.readFileSync(t,{encoding:"utf8"}),r=v.default.parse(e),i=(o,c)=>d.default.join(d.default.dirname(o),c.startsWith("/")?d.default.relative(d.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 p=i(t,u);switch(y){case"script":s.js?.push(p);break;case"css":s.css?.push(p);break;case"staticSrc":case"staticHref":if(u.startsWith("#"))break;s.static?.push(p);break;default:break}});return{css:s.css,js:s.js,static:s.static}}}var _=a(require("path")),$=a(require("fs")),z=require("child_process"),J=require("package-manager-detector");var q=a(require("path")),l=require("@colors/colors/safe");var E=a(require("path")),H=E.default.join(process.cwd(),"node_modules/extension-develop/dist/certs"),F=["chrome","edge"],W=["firefox"],Z=[...F,...W];function O(t){let n=_.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 V={type:"object",properties:{test:{type:"string"},manifestPath:{type:"string"},includeList:{type:"object"},excludeList:{type:"object"}}};function M(t){let n=this.getOptions(),s=n.manifestPath,e=x.default.dirname(s);(0,w.validate)(V,n,{name:"html:ensure-hmr-for-scripts",baseDataPath:"options"});let r=(0,T.urlToRequest)(this.resourcePath),i=`
 if (import.meta.webpackHot) { import.meta.webpackHot.accept() };
   `;if(O(e))return t;let o=n.includeList||{};for(let c of Object.entries(o)){let[,u]=c;if(u){if(!S.default.existsSync(u))return;let p=j(u)?.js||[];for(let k of p){let D=x.default.resolve(e,k);if(r.includes(D))return`${i}${t}`}}}return t}

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

@@ -0,0 +1,62 @@
+async function getDevExtension() {
+  const allExtensions = await browser.management.getAll()
+
+  return allExtensions.filter((extension) => {
+    return (
+      // Reload extension
+      extension.name !== 'Extension Manager' &&
+      // 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('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('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
+    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)
+  }
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "Extension Manager",
+  "description": "Extension.js developer tools for tabs and reload management.",
+  "version": "1.0",
+  "manifest_version": 2,
+  "background": {
+    "scripts": ["background.js"],
+    "type": "module"
+  },
+  "icons": {
+    "16": "./public/logo.png",
+    "48": "./public/logo.png",
+    "128": "./public/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;
+}

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

@@ -0,0 +1,267 @@
+/* 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: #4a4a4a;
+  background-color: #f9f9f9;
+  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: #1d7484;
+}
+
+a {
+  text-decoration: none;
+  color: #1d7484;
+}
+a:visited {
+  color: #144f5a;
+}
+a:hover {
+  color: #982c61;
+  border-bottom: 2px solid #4a4a4a;
+}
+
+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 #1d7484;
+  margin-bottom: 2.5rem;
+  background-color: #f1f1f1;
+}
+
+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: #f1f1f1;
+  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: #f1f1f1;
+  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 #f1f1f1;
+}
+
+/* Buttons, forms and input */
+input,
+textarea {
+  border: 1px solid #4a4a4a;
+}
+input:focus,
+textarea:focus {
+  border: 1px solid #1d7484;
+}
+
+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: #1d7484;
+  color: #f9f9f9;
+  border-radius: 1px;
+  border: 1px solid #1d7484;
+  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: #982c61;
+  color: #f9f9f9;
+  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: #4a4a4a;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  margin-bottom: 10px;
+  background-color: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+textarea:focus,
+select:focus,
+input:focus {
+  border: 1px solid #1d7484;
+  outline: 0;
+}
+
+input[type='checkbox']:focus {
+  outline: 1px dotted #1d7484;
+}
+
+label,
+legend,
+fieldset {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}

package/dist/extensions/gecko-based-manager-extension/pages/welcome.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <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>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./sakura.css" media="screen" />
+    <link
+      rel="stylesheet"
+      href="./sakura-dark.css"
+      media="screen and (prefers-color-scheme: dark)"
+    />
+    <style>
+      .center-middle {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="center-middle">
+      <h1 style="font-size: 4.2em">
+        Gecko-based Add-on<br />
+        <a href="#"><span id="extensionName"></span></a><br />
+        ready.
+      </h1>
+      <p id="extensionDescription"></p>
+      <p>
+        <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.
+      </p>
+      <button id="learnMore">
+        🧩 Learn more about developing cross-browser extensions
+      </button>
+    </div>
+    <script src="welcome.js"></script>
+  </body>
+</html>