extension-create 2.0.0-alpha.24 → 2.0.0-alpha.27

package/dist/module.js

@@ -1,31 +1,31 @@
-"use strict";var Ve=Object.create;var k=Object.defineProperty;var Xe=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var Ue=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var qe=(e,n)=>{for(var o in n)k(e,o,{get:n[o],enumerable:!0})},j=(e,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of Le(n))!Ye.call(e,i)&&i!==o&&k(e,i,{get:()=>n[i],enumerable:!(r=Xe(n,i))||r.enumerable});return e};var a=(e,n,o)=>(o=e!=null?Ve(Ue(e)):{},j(n||!e||!e.__esModule?k(o,"default",{value:e,enumerable:!0}):o,e)),He=e=>j(k({},"__esModule",{value:!0}),e);var mn={};qe(mn,{extensionCreate:()=>ln});module.exports=He(mn);var C=a(require("path"));var x=a(require("path")),t=require("@colors/colors/safe"),A=a(require("fs/promises")),G=require("package-manager-detector");function O(e){let n=x.default.basename(e);return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Failed to write in the destination directory
+"use strict";var Ae=Object.create;var v=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var We=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var Le=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},N=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of We(t))!ze.call(e,i)&&i!==o&&v(e,i,{get:()=>t[i],enumerable:!(r=Ge(t,i))||r.enumerable});return e};var a=(e,t,o)=>(o=e!=null?Ae(Oe(e)):{},N(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),Ve=e=>N(v({},"__esModule",{value:!0}),e);var rt={};Le(rt,{extensionCreate:()=>it});module.exports=Ve(rt);var _=a(require("path"));var y=a(require("path")),n=require("@colors/colors/safe"),j=a(require("fs/promises")),A=require("package-manager-detector");function G(e){let t=y.default.basename(e);return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Failed to write in the destination directory
 
 Path is not writable. Ensure you have write permissions for this folder.
-${(0,t.red)("NOT WRITEABLE")}: ${(0,t.underline)(n)}`}async function W(e,n){let o=x.default.basename(e),r=`
-Conflict! Path to ${(0,t.cyan)(o)} includes conflicting files:
+${(0,n.red)("NOT WRITEABLE")}: ${(0,n.underline)(t)}`}async function W(e,t){let o=y.default.basename(e),r=`
+Conflict! Path to ${(0,n.cyan)(o)} includes conflicting files:
 
-`;for(let i of n){let s=await A.default.lstat(x.default.join(e,i));r+=s.isDirectory()?`${(0,t.gray)("-")} ${(0,t.brightYellow)(i)}
-`:`${(0,t.gray)("-")} ${(0,t.brightYellow)(i)}
+`;for(let i of t){let s=await j.default.lstat(y.default.join(e,i));r+=s.isDirectory()?`${(0,n.gray)("-")} ${(0,n.brightYellow)(i)}
+`:`${(0,n.gray)("-")} ${(0,n.brightYellow)(i)}
 `}return r+=`
 You need to either rename/remove the files listed above, or choose a new directory name for your extension.
 
-Path to conflicting directory: ${(0,t.underline)(e)}`,r}function z(){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} You need to provide an extension name to create one. See ${(0,t.brightYellow)("--help")} for command info.`}function V(){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} URLs are not allowed as a project path. Either write a name or a path to a local folder.`}async function X(e,n){let o=x.default.relative(process.cwd(),e),r=await(0,G.detect)(),i="npm run";switch(r?.name){case"yarn":i="yarn dev";break;case"pnpm":i="pnpm dev";break;default:i="npm run dev"}return process.env.npm_config_user_agent&&process.env.npm_config_user_agent.includes("pnpm")&&(i="pnpm dev"),`\u{1F9E9} - ${(0,t.brightGreen)("Success!")} Extension ${(0,t.cyan)(n)} created.
+Path to conflicting directory: ${(0,n.underline)(e)}`,r}function O(){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} You need to provide an extension name to create one. See ${(0,n.brightYellow)("--help")} for command info.`}function z(){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} URLs are not allowed as a project path. Either write a name or a path to a local folder.`}async function L(e,t){let o=y.default.relative(process.cwd(),e),r=await(0,A.detect)(),i="npm run";switch(r?.name){case"yarn":i="yarn dev";break;case"pnpm":i="pnpm dev";break;default:i="npm run dev"}return process.env.npm_config_user_agent&&process.env.npm_config_user_agent.includes("pnpm")&&(i="pnpm dev"),`\u{1F9E9} - ${(0,n.brightGreen)("Success!")} Extension ${(0,n.cyan)(t)} created.
 
-Now ${(0,t.magenta)(`cd ${(0,t.underline)(o)}`)} and ${(0,t.magenta)(`${i}`)} to open a new browser instance
+Now ${(0,n.magenta)(`cd ${(0,n.underline)(o)}`)} and ${(0,n.magenta)(`${i}`)} to open a new browser instance
 with your extension installed, loaded, and enabled for development.
 
-${(0,t.brightGreen)("You are ready")}. Time to hack on your extension!`}function L(e){return`\u{1F423} - Starting a new browser extension named ${(0,t.cyan)(e)}...`}function U(){return"\u{1F91E} - Checking if destination path is writeable..."}function Y(){return"\u{1F50E} - Scanning for potential conflicting files..."}function q(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't create directory ${(0,t.cyan)(e)}:
-${(0,t.red)(n)}`}function H(e){return`\u{1F537} - Writing type definitions for ${(0,t.cyan)(e)}...`}function B(e){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Failed to write the extension type definition.
-${(0,t.red)(e)}`}function h(e,n){return n==="init"?`\u{1F9F0} - Installing ${(0,t.cyan)(e)}...`:`\u{1F9F0} - Installing ${(0,t.cyan)(e)} from template ${(0,t.magenta)(n)}...`}function b(e,n,o){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't find template ${(0,t.magenta)(n)} for ${(0,t.cyan)(e)}:
-${(0,t.red)(o)}`}function K(e){return`\u{1F332} - Initializing git repository for ${(0,t.cyan)(e)}...`}function Q(e,n,o){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Command ${(0,t.brightYellow)(e)} ${(0,t.brightYellow)(n.join(" "))} failed with exit code ${o}`}function Z(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Child process error: Can't initialize ${(0,t.brightYellow)("git")} for ${(0,t.cyan)(e)}:
-${(0,t.red)(n.message)}`}function ee(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't initialize ${(0,t.brightYellow)("git")} for ${(0,t.cyan)(e)}:
-${(0,t.red)(n.message||n.toString())}`}function ne(){return"\u{1F6E0}  - Installing dependencies... (takes a moment)"}function te(e,n,o){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Command ${e} ${n.join(" ")} failed with exit code ${o}`}function ie(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Child process error: Can't install dependencies for ${(0,t.cyan)(e)}:
-${(0,t.red)(n)}`}function re(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't install dependencies for ${(0,t.cyan)(e)}:
-${(0,t.red)(n.message||n.toString())}`}function oe(){return"Symlink created successfully."}function se(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Failed to create symlink: ${(0,t.red)(e)} ${(0,t.red)(n.join(" "))}`}function ae(){return`\u{1F4DD} - Writing ${(0,t.brightYellow)("package.json")} metadata...`}function ce(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't write ${(0,t.brightYellow)("package.json")} for ${(0,t.cyan)(e)}:
-${(0,t.red)(n)}`}function le(){return`\u{1F4DC} - Writing ${(0,t.brightYellow)("manifest.json")} metadata...`}function me(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't write ${(0,t.brightYellow)("manifest.json")} for ${(0,t.cyan)(e)}:
-${(0,t.red)(n)}`}function pe(){return`\u{1F4C4} - Writing ${(0,t.brightYellow)("README.md")} metadata...`}function ge(){return`\u{1F648} - Writing ${(0,t.brightYellow)(".gitignore")} lines...`}function de(e,n){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't write the ${(0,t.brightYellow)("README.md")} file for ${(0,t.cyan)(e)}:
-${(0,t.red)(n)}`}function fe(e){return`\u{1F91D} - Ensuring ${(0,t.cyan)(e)} folder exists...`}function ue(e){return`${(0,t.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Error while checking directory writability:
-`+(0,t.red)(e)}var E=a(require("fs/promises")),$=a(require("path")),we=require("package-manager-detector");async function _(e,n){let o=await E.default.readdir(e,{withFileTypes:!0});return await E.default.mkdir(n,{recursive:!0}),await Promise.all(o.map(async r=>{let i=$.default.join(e,r.name),s=$.default.join(n,r.name);r.isDirectory()?await _(i,s):await E.default.copyFile(i,s)}))}async function y(){let e=await(0,we.detect)(),n="npm";if(process.env.npm_config_user_agent&&process.env.npm_config_user_agent.includes("pnpm"))return"pnpm";switch(e?.name){case"yarn":n="yarn";break;case"pnpm":n="pnpm";break;default:n="npm"}return n}function ye(e){let n=$.default.resolve(__dirname,"template");return $.default.resolve(e,n)}async function xe(e,n){try{return console.log(fe(n)),await E.default.mkdir(e,{recursive:!0}),!0}catch(o){return console.log(ue(o)),!1}}function he(e){return e!=="init"}function Ee(e){return e.includes("typescript")||e.includes("react")||e.includes("preact")||e.includes("svelte")||e.includes("solid")}var $e=a(require("path")),S=a(require("fs/promises"));var Be=["LICENSE","node_modules"];async function ve(e,n){console.log(L(n));try{let o=await xe(e,n);console.log(U()),o||(console.error(O(e)),process.exit(1));let r=await S.default.readdir(e);console.log(Y());let i=await Promise.all(r.filter(s=>!s.startsWith(".")).filter(s=>!s.endsWith(".log")).filter(s=>!Be.includes(s)).map(async s=>(await S.default.lstat($e.default.join(e,s))).isDirectory()?`${s}/`:`${s}`));if(i.length>0){let s=await W(e,i);throw new Error(s)}}catch(o){console.error(q(n,o)),process.exit(1)}}var ke=a(require("path"));async function be(e,n,o){let r=ke.default.resolve(__dirname,"template");try{console.log(h(n,o)),await _(r,e)}catch(i){console.error(b(n,o,i)),process.exit(1)}}var p=a(require("path")),f=a(require("fs/promises")),De=a(require("go-git-it"));async function Fe(e,n,o){let r=p.default.dirname(e),i=p.default.basename(o),c=`https://github.com/extension-js/extension.js/tree/main/examples/${o}`;try{await f.default.mkdir(e,{recursive:!0});let l="";if(process.env.EXTENSION_ENV==="development"?(console.log(h(n,o)),l=p.default.join(e,i),await f.default.cp(p.default.join(__dirname,"..","..","..","examples",i),l,{recursive:!0})):(await(0,De.default)(c,r,h(n,i)),l=p.default.join(r,i)),n!==i){let m=p.default.join(r,n);await f.default.mkdir(m,{recursive:!0});let g=await f.default.readdir(l);for(let u of g)await f.default.rename(p.default.join(l,u),p.default.join(m,u));await f.default.rm(l,{recursive:!0,force:!0})}else{let m=p.default.join(r,n+"-temp");await f.default.rename(l,m);let g=p.default.join(m,i),u=p.default.join(r,n);await f.default.mkdir(u,{recursive:!0});let ze=await f.default.readdir(g);for(let N of ze)await f.default.rename(p.default.join(g,N),p.default.join(u,N));await f.default.rm(m,{recursive:!0,force:!0})}}catch(l){console.error(b(n,i,l)),process.exit(1)}}var v=a(require("path")),P=a(require("fs/promises"));var Ke={dev:process.env.EXTENSION_ENV==="development"?"node node_modules/extension dev":"extension dev",start:process.env.EXTENSION_ENV==="development"?"node node_modules/extension start":"extension start",build:process.env.EXTENSION_ENV==="development"?"node node_modules/extension build":"extension build"};async function Te(e,n,o){let r=ye(process.cwd()),i=he(o)?v.default.join(e,"package.json"):v.default.join(r,"package.json"),s=await P.default.readFile(i),c=JSON.parse(s.toString());c.scripts=c.scripts||{},c.dependencies=c.dependencies||{},c.devDependencies={...c.devDependencies||{},extension:process.env.EXTENSION_ENV==="development"?"*":"latest"};let l={...c,name:v.default.basename(e),private:!0,scripts:{...c.scripts,...Ke},dependencies:c.dependencies,devDependencies:c.devDependencies,author:{name:"Your Name",email:"your@email.com",url:"https://yourwebsite.com"}};try{console.log(ae()),await P.default.writeFile(v.default.join(e,"package.json"),JSON.stringify(l,null,2))}catch(m){console.error(ce(n,m)),process.exit(1)}}var Se=a(require("path")),Pe=require("cross-spawn"),Ie=a(require("fs"));var Ce=a(require("path")),I=require("cross-spawn");async function _e(e){let n=Ce.default.join(__dirname,"../../cli"),o=await y(),r=["link"];await new Promise((i,s)=>{(0,I.spawn)(o,r,{cwd:n}).on("close",()=>{(0,I.spawn)(o,[...r,"extension"],{stdio:"inherit",cwd:e}).on("close",m=>{m===0?(console.log(oe()),i()):s(new Error(se(o,r)))})})}),console.log("Symlink creation completed.")}function Qe(){return["install","--silent"]}async function Je(e,n){let o=Se.default.join(e,"node_modules"),r=await y(),i=Qe();console.log(ne()),process.env.EXTENSION_ENV==="development"&&await _e(e);try{let s=process.cwd();process.chdir(e),await Ie.default.promises.mkdir(o,{recursive:!0});let c=process.env.EXTENSION_ENV==="development"?"inherit":"ignore",l=(0,Pe.spawn)(r,i,{stdio:c});await new Promise((m,g)=>{l.on("close",u=>{process.chdir(s),u!==0?g(new Error(te(r,i,u))):m()}),l.on("error",u=>{process.chdir(s),console.error(ie(n,u)),g(u)})})}catch(s){console.error(re(n,s)),process.exit(1)}}var D=a(require("path")),F=a(require("fs/promises"));async function Me(e,n){let o=await F.default.readFile(D.default.join(__dirname,"template","README.md"),"utf-8"),r=await y(),i=require(D.default.join(e,"manifest.json")),s=o.replaceAll("[projectName]",n).replaceAll("[templateDescription]",i.description).replaceAll("[runCommand]",r);try{console.log(pe()),await F.default.mkdir(e,{recursive:!0}),await F.default.writeFile(D.default.join(e,"README.md"),s)}catch(c){console.error(de(n,c)),process.exit(1)}}var T=a(require("path")),J=a(require("fs/promises"));async function Re(e,n){let o=T.default.join(e,"manifest.json"),r=await J.default.readFile(o),s={...JSON.parse(r.toString()),name:T.default.basename(e),author:"Your Name"};try{console.log(le()),await J.default.writeFile(T.default.join(e,"manifest.json"),JSON.stringify(s,null,2))}catch(c){console.error(me(n,c)),process.exit(1)}}var M=a(require("path")),R=a(require("fs/promises"));async function Ne(e,n){let o=M.default.join(e,"extension-env.d.ts"),r=process.env.EXTENSION_ENV==="development"?M.default.resolve(process.cwd(),"programs/cli/types"):"extension/dist/types",i=`// Required Extension.js types for TypeScript projects.
+${(0,n.brightGreen)("You are ready")}. Time to hack on your extension!`}function V(e){return`\u{1F423} - Starting a new browser extension named ${(0,n.cyan)(e)}...`}function X(){return"\u{1F91E} - Checking if destination path is writeable..."}function U(){return"\u{1F50E} - Scanning for potential conflicting files..."}function Y(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't create directory ${(0,n.cyan)(e)}:
+${(0,n.red)(t)}`}function q(e){return`\u{1F537} - Writing type definitions for ${(0,n.cyan)(e)}...`}function H(e){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Failed to write the extension type definition.
+${(0,n.red)(e)}`}function x(e,t){return t==="init"?`\u{1F9F0} - Installing ${(0,n.cyan)(e)}...`:`\u{1F9F0} - Installing ${(0,n.cyan)(e)} from template ${(0,n.magenta)(t)}...`}function b(e,t,o){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't find template ${(0,n.magenta)(t)} for ${(0,n.cyan)(e)}:
+${(0,n.red)(o)}`}function B(e){return`\u{1F332} - Initializing git repository for ${(0,n.cyan)(e)}...`}function K(e,t,o){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Command ${(0,n.brightYellow)(e)} ${(0,n.brightYellow)(t.join(" "))} failed with exit code ${o}`}function Q(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Child process error: Can't initialize ${(0,n.brightYellow)("git")} for ${(0,n.cyan)(e)}:
+${(0,n.red)(t.message)}`}function Z(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't initialize ${(0,n.brightYellow)("git")} for ${(0,n.cyan)(e)}:
+${(0,n.red)(t.message||t.toString())}`}function ee(){return"\u{1F6E0}  - Installing dependencies... (takes a moment)"}function te(e,t,o){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Command ${e} ${t.join(" ")} failed with exit code ${o}`}function ne(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Child process error: Can't install dependencies for ${(0,n.cyan)(e)}:
+${(0,n.red)(t)}`}function ie(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't install dependencies for ${(0,n.cyan)(e)}:
+${(0,n.red)(t.message||t.toString())}`}function re(){return`\u{1F4DD} - Writing ${(0,n.brightYellow)("package.json")} metadata...`}function oe(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't write ${(0,n.brightYellow)("package.json")} for ${(0,n.cyan)(e)}:
+${(0,n.red)(t)}`}function se(){return`\u{1F4DC} - Writing ${(0,n.brightYellow)("manifest.json")} metadata...`}function ae(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't write ${(0,n.brightYellow)("manifest.json")} for ${(0,n.cyan)(e)}:
+${(0,n.red)(t)}`}function ce(){return`\u{1F4C4} - Writing ${(0,n.brightYellow)("README.md")} metadata...`}function le(){return`\u{1F648} - Writing ${(0,n.brightYellow)(".gitignore")} lines...`}function me(e,t){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Can't write the ${(0,n.brightYellow)("README.md")} file for ${(0,n.cyan)(e)}:
+${(0,n.red)(t)}`}function pe(e){return`\u{1F91D} - Ensuring ${(0,n.cyan)(e)} folder exists...`}function ge(e){return`${(0,n.red)("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")} Error while checking directory writability:
+`+(0,n.red)(e)}var h=a(require("fs/promises")),E=a(require("path")),de=require("package-manager-detector");async function C(e,t){let o=await h.default.readdir(e,{withFileTypes:!0});return await h.default.mkdir(t,{recursive:!0}),await Promise.all(o.map(async r=>{let i=E.default.join(e,r.name),s=E.default.join(t,r.name);r.isDirectory()?await C(i,s):await h.default.copyFile(i,s)}))}async function D(){let e=await(0,de.detect)(),t="npm";if(process.env.npm_config_user_agent&&process.env.npm_config_user_agent.includes("pnpm"))return"pnpm";switch(e?.name){case"yarn":t="yarn";break;case"pnpm":t="pnpm";break;default:t="npm"}return t}function fe(e){let t=E.default.resolve(__dirname,"template");return E.default.resolve(e,t)}async function ue(e,t){try{return console.log(pe(t)),await h.default.mkdir(e,{recursive:!0}),!0}catch(o){return console.log(ge(o)),!1}}function we(e){return e!=="init"}function ye(e){return e.includes("typescript")||e.includes("react")||e.includes("preact")||e.includes("svelte")||e.includes("solid")}var xe=a(require("path")),P=a(require("fs/promises"));var Xe=["LICENSE","node_modules"];async function he(e,t){console.log(V(t));try{let o=await ue(e,t);console.log(X()),o||(console.error(G(e)),process.exit(1));let r=await P.default.readdir(e);console.log(U());let i=await Promise.all(r.filter(s=>!s.startsWith(".")).filter(s=>!s.endsWith(".log")).filter(s=>!Xe.includes(s)).map(async s=>(await P.default.lstat(xe.default.join(e,s))).isDirectory()?`${s}/`:`${s}`));if(i.length>0){let s=await W(e,i);throw new Error(s)}}catch(o){console.error(Y(t,o)),process.exit(1)}}var Ee=a(require("path"));async function $e(e,t,o){let r=Ee.default.resolve(__dirname,"template");try{console.log(x(t,o)),await C(r,e)}catch(i){console.error(b(t,o,i)),process.exit(1)}}var m=a(require("path")),f=a(require("fs/promises")),ve=a(require("go-git-it"));async function be(e,t,o){let r=m.default.dirname(e),i=m.default.basename(o),c=`https://github.com/extension-js/extension.js/tree/main/examples/${o}`;try{await f.default.mkdir(e,{recursive:!0});let l="";if(process.env.EXTENSION_ENV==="development"?(console.log(x(t,o)),l=m.default.join(e,i),await f.default.cp(m.default.join(__dirname,"..","..","..","examples",i),l,{recursive:!0})):(await(0,ve.default)(c,r,x(t,i)),l=m.default.join(r,i)),t!==i){let p=m.default.join(r,t);await f.default.mkdir(p,{recursive:!0});let g=await f.default.readdir(l);for(let u of g)await f.default.rename(m.default.join(l,u),m.default.join(p,u));await f.default.rm(l,{recursive:!0,force:!0})}else{let p=m.default.join(r,t+"-temp");await f.default.rename(l,p);let g=m.default.join(p,i),u=m.default.join(r,t);await f.default.mkdir(u,{recursive:!0});let je=await f.default.readdir(g);for(let R of je)await f.default.rename(m.default.join(g,R),m.default.join(u,R));await f.default.rm(p,{recursive:!0,force:!0})}}catch(l){console.error(b(t,i,l)),process.exit(1)}}var $=a(require("path")),S=a(require("fs/promises"));var Ue={dev:process.env.EXTENSION_ENV==="development"?"node node_modules/extension dev":"extension dev",start:process.env.EXTENSION_ENV==="development"?"node node_modules/extension start":"extension start",build:process.env.EXTENSION_ENV==="development"?"node node_modules/extension build":"extension build"};async function De(e,t,o){let r=fe(process.cwd()),i=we(o)?$.default.join(e,"package.json"):$.default.join(r,"package.json"),s=await S.default.readFile(i),c=JSON.parse(s.toString());c.scripts=c.scripts||{},c.dependencies=c.dependencies||{},c.devDependencies={...c.devDependencies||{},extension:process.env.EXTENSION_ENV==="development"?"*":"latest"};let l={...c,name:$.default.basename(e),private:!0,scripts:{...c.scripts,...Ue},dependencies:c.dependencies,devDependencies:c.devDependencies,author:{name:"Your Name",email:"your@email.com",url:"https://yourwebsite.com"}};try{console.log(re()),await S.default.writeFile($.default.join(e,"package.json"),JSON.stringify(l,null,2))}catch(p){console.error(oe(t,p)),process.exit(1)}}var Fe=a(require("path")),Te=require("cross-spawn"),ke=a(require("fs"));function Ye(){return["install","--silent"]}async function _e(e,t){let o=Fe.default.join(e,"node_modules"),r=await D(),i=Ye();console.log(ee());try{let s=process.cwd();process.chdir(e),await ke.default.promises.mkdir(o,{recursive:!0});let c=process.env.EXTENSION_ENV==="development"?"inherit":"ignore",l=(0,Te.spawn)(r,i,{stdio:c});await new Promise((p,g)=>{l.on("close",u=>{process.chdir(s),u!==0?g(new Error(te(r,i,u))):p()}),l.on("error",u=>{process.chdir(s),console.error(ne(t,u)),g(u)})})}catch(s){console.error(ie(t,s)),process.exit(1)}}var F=a(require("path")),T=a(require("fs/promises"));async function Ce(e,t){let o=await T.default.readFile(F.default.join(__dirname,"template","README.md"),"utf-8"),r=await D(),i=require(F.default.join(e,"manifest.json")),s=o.replaceAll("[projectName]",t).replaceAll("[templateDescription]",i.description).replaceAll("[runCommand]",r);try{console.log(ce()),await T.default.mkdir(e,{recursive:!0}),await T.default.writeFile(F.default.join(e,"README.md"),s)}catch(c){console.error(me(t,c)),process.exit(1)}}var k=a(require("path")),I=a(require("fs/promises"));async function Pe(e,t){let o=k.default.join(e,"manifest.json"),r=await I.default.readFile(o),s={...JSON.parse(r.toString()),name:k.default.basename(e),author:"Your Name"};try{console.log(se()),await I.default.writeFile(k.default.join(e,"manifest.json"),JSON.stringify(s,null,2))}catch(c){console.error(ae(t,c)),process.exit(1)}}var J=a(require("path")),M=a(require("fs/promises"));async function Se(e,t){let o=J.default.join(e,"extension-env.d.ts"),r=process.env.EXTENSION_ENV==="development"?J.default.resolve(process.cwd(),"programs/cli/types"):"extension/dist/types",i=`// Required Extension.js types for TypeScript projects.
 // This file is auto-generated and should not be excluded.
 // If you need additional types, consider creating a new *.d.ts file and
 // referencing it in the "include" array of your tsconfig.json file.
@@ -34,5 +34,5 @@ ${(0,t.red)(n)}`}function fe(e){return`\u{1F91D} - Ensuring ${(0,t.cyan)(e)} fol
 
 // Polyfill types for browser.* APIs.
 /// <reference types="${r}/polyfill.d.ts" />
-`;try{await R.default.mkdir(e,{recursive:!0}),console.log(H(n)),await R.default.writeFile(o,i)}catch(s){console.error(B(s)),process.exit(1)}}var je=a(require("fs/promises")),Ae=a(require("path"));var Ze=["","# dependencies","node_modules"],en=["","# testing","coverage"],nn=["","# production","dist"],tn=["","# misc",".DS_Store"],rn=["","# local env files",".env.local",".env.development.local",".env.test.local",".env.production.local"],on=["","# debug files","npm-debug.log*","yarn-debug.log*","yarn-error.log*"],sn=["","# lock files","yarn.lock","package-lock.json"],an=["","# extension.js","extension-env.d.ts"],cn=["# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.",...Ze,...en,...nn,...tn,...rn,...sn,...on,...an];async function Ge(e){let n=Ae.default.join(e,".gitignore"),o=await je.default.open(n,"a+").catch(s=>{console.error(s),process.exit(1)}),r=new Set;for await(let s of o.readLines({autoClose:!1}))s=s.trim(),s.length!==0&&r.add(s);let i=cn.filter(s=>!r.has(s));for(;i[i.length-1]==="";)i.pop();console.log(ge()),await o.appendFile(i.join(`
-`),{flush:!0}).catch(s=>{console.error(s),process.exit(1)})}var Oe=require("cross-spawn");async function We(e,n){let o="git",r=["init","--quiet"];console.log(K(n));try{let i=process.cwd();process.chdir(e);let s=process.env.EXTENSION_ENV==="development"?"inherit":"ignore",c=(0,Oe.spawn)(o,r,{stdio:s});await new Promise((l,m)=>{c.on("close",g=>{process.chdir(i),g!==0?m(new Error(Q(o,r,g))):l()}),c.on("error",g=>{process.chdir(i),console.error(Z(n,g)),m(g)})})}catch(i){console.error(ee(n,i)),process.exit(1)}}async function ln(e,{template:n="init",install:o=!0}){if(!e)throw new Error(z());if(e.startsWith("http"))throw new Error(V());let r=C.default.isAbsolute(e)?e:C.default.join(process.cwd(),e),i=C.default.basename(r);try{await ve(r,i),n==="init"?await be(r,i,n):await Fe(r,i,n),await Te(r,i,n),o&&await Je(r,i),await Me(r,i),await Re(r,i),await We(r,i),await Ge(r),Ee(n)&&await Ne(r,i);let s=await X(r,i);console.log(s)}catch(s){throw console.error(s),s}}0&&(module.exports={extensionCreate});
+`;try{await M.default.mkdir(e,{recursive:!0}),console.log(q(t)),await M.default.writeFile(o,i)}catch(s){console.error(H(s)),process.exit(1)}}var Ie=a(require("fs/promises")),Je=a(require("path"));var qe=["","# dependencies","node_modules"],He=["","# testing","coverage"],Be=["","# production","dist"],Ke=["","# misc",".DS_Store"],Qe=["","# local env files",".env.local",".env.development.local",".env.test.local",".env.production.local"],Ze=["","# debug files","npm-debug.log*","yarn-debug.log*","yarn-error.log*"],et=["","# lock files","yarn.lock","package-lock.json"],tt=["","# extension.js","extension-env.d.ts"],nt=["# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.",...qe,...He,...Be,...Ke,...Qe,...et,...Ze,...tt];async function Me(e){let t=Je.default.join(e,".gitignore"),o=await Ie.default.open(t,"a+").catch(s=>{console.error(s),process.exit(1)}),r=new Set;for await(let s of o.readLines({autoClose:!1}))s=s.trim(),s.length!==0&&r.add(s);let i=nt.filter(s=>!r.has(s));for(;i[i.length-1]==="";)i.pop();console.log(le()),await o.appendFile(i.join(`
+`),{flush:!0}).catch(s=>{console.error(s),process.exit(1)})}var Re=require("cross-spawn");async function Ne(e,t){let o="git",r=["init","--quiet"];console.log(B(t));try{let i=process.cwd();process.chdir(e);let s=process.env.EXTENSION_ENV==="development"?"inherit":"ignore",c=(0,Re.spawn)(o,r,{stdio:s});await new Promise((l,p)=>{c.on("close",g=>{process.chdir(i),g!==0?p(new Error(K(o,r,g))):l()}),c.on("error",g=>{process.chdir(i),console.error(Q(t,g)),p(g)})})}catch(i){console.error(Z(t,i)),process.exit(1)}}async function it(e,{template:t="init",install:o=!0}){if(!e)throw new Error(O());if(e.startsWith("http"))throw new Error(z());let r=_.default.isAbsolute(e)?e:_.default.join(process.cwd(),e),i=_.default.basename(r);try{await he(r,i),t==="init"?await $e(r,i,t):await be(r,i,t),await De(r,i,t),o&&await _e(r,i),await Ce(r,i),await Pe(r,i),await Ne(r,i),await Me(r),ye(t)&&await Se(r,i);let s=await L(r,i);console.log(s)}catch(s){throw console.error(s),s}}0&&(module.exports={extensionCreate});

package/dist/test-template-config-babel/README.md

@@ -0,0 +1,35 @@
+# test-template-config-babel
+
+> An Extension.js example.
+
+## Available Scripts
+
+In the project directory, you can run the following scripts:
+
+### pnpm dev
+
+**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
+
+```bash
+pnpm dev
+```
+
+### pnpm start
+
+**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
+
+```bash
+pnpm start
+```
+
+### pnpm build
+
+**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
+
+```bash
+pnpm build
+```
+
+## Learn More
+
+To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).

package/dist/test-template-config-babel/babel.config.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["modern-browser-extension"],
+  "plugins": []
+}

package/dist/test-template-config-babel/extension.config.js

@@ -0,0 +1,17 @@
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.module.rules.push(
+      // https://webpack.js.org/loaders/babel-loader/
+      // https://babeljs.io/docs/en/babel-loader
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: __dirname,
+        exclude: /node_modules/,
+        loader: require.resolve('babel-loader')
+      }
+    )
+
+    return config
+  }
+}

package/dist/test-template-config-babel/manifest.json

@@ -0,0 +1,15 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-config-babel",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/index.html"
+  },
+  "author": "Your Name"
+}

package/dist/test-template-config-babel/newtab/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Babel Extension</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/sakura.css/css/sakura.css"
+      media="screen"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/sakura.css/css/sakura-dark.css"
+      media="screen and (prefers-color-scheme: dark)"
+    />
+    <link rel="stylesheet" href="./styles.css" media="screen" />
+  </head>
+  <body>
+    <header>
+      <h1>
+        <img
+          class="babel"
+          src="../images/babel.png"
+          alt="The Babel logo"
+          width="120px"
+        />
+        <br />
+        Welcome to your Babel Extension
+      </h1>
+      <p>
+        Learn more about creating cross-browser extensions at
+        <a href="https://extension.js.org" target="_blank"
+          >https://extension.js.org</a
+        >.
+      </p>
+    </header>
+  </body>
+  <script src="./scripts.js"></script>
+</html>

package/dist/test-template-config-babel/newtab/scripts.js

@@ -0,0 +1,11 @@
+function getManifest() {
+  return chrome.runtime.getManifest()
+}
+
+const manifest = getManifest()
+
+console.table({
+  name: manifest.name,
+  version: manifest.version,
+  description: manifest.description
+})

package/dist/test-template-config-babel/newtab/styles.css

@@ -0,0 +1,22 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+
+h1 {
+  font-size: 4.7em;
+}
+
+.babel:hover {
+  filter: grayscale(1);
+  transition:
+    filter 2s,
+    border-color 2s;
+}
+
+.new:hover {
+  filter: grayscale(0);
+  border-color: aquamarine;
+}

package/dist/test-template-config-babel/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "test-template-config-babel",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "babel-loader": "^9.1.3",
+    "babel-preset-modern-browser-extension": "^0.7.0",
+    "stylelint": "^16.7.0",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {}
+}

package/dist/test-template-config-stylelint/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}

package/dist/test-template-config-stylelint/newtab/index.html

@@ -14,7 +14,7 @@
       href="https://unpkg.com/sakura.css/css/sakura-dark.css"
       media="screen and (prefers-color-scheme: dark)"
     />
-    <link rel="stylesheet" href="./styles.css" media="screen" />
+    <link rel="stylesheet" href="./styles.scss" media="screen" />
   </head>
   <body>
     <header>

package/dist/test-template-config-stylelint/package.json

@@ -9,14 +9,15 @@
     "url": "https://yourwebsite.com"
   },
   "scripts": {
-    "lint:css": "stylelint '**/*.css'",
+    "lint:css": "npx stylelint '**/*.scss'",
     "dev": "extension dev",
     "start": "extension start",
     "build": "extension build"
   },
   "devDependencies": {
+    "sass": "^1.77.8",
     "stylelint": "^16.7.0",
-    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "extension": "latest"
   },
   "dependencies": {}

package/dist/test-template-content-extension-config/README.md

@@ -0,0 +1,35 @@
+# test-template-content-extension-config
+
+> An Extension.js example.
+
+## Available Scripts
+
+In the project directory, you can run the following scripts:
+
+### pnpm dev
+
+**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
+
+```bash
+pnpm dev
+```
+
+### pnpm start
+
+**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
+
+```bash
+pnpm start
+```
+
+### pnpm build
+
+**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
+
+```bash
+pnpm build
+```
+
+## Learn More
+
+To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).

package/dist/test-template-content-extension-config/background.ts

@@ -0,0 +1 @@
+console.log('Hello from the background script!')

package/dist/test-template-content-extension-config/content/ContentApp.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import ReactLogo from '../images/logo.svg'
+import tailwindBg from '../images/tailwind_bg.png'
+import typescriptLogo from '../images/typescript.png'
+import tailwindLogo from '../images/tailwind.png'
+import chromeWindowBg from '../images/chromeWindow.png'
+
+export default function ContentApp() {
+  const [isdialogOpen, setIsDialogOpen] = React.useState(true)
+
+  if (!isdialogOpen) {
+    return (
+      <div className="mx-auto p-6">
+        <button
+          onClick={() => setIsDialogOpen(true)}
+          className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+        >
+          🧩 Open content script hint <span aria-hidden="true">+</span>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl md:px-0 lg:p-6">
+      <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+        <div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
+          <div className="w-[108rem] flex-none flex justify-end">
+            <picture>
+              <img
+                src={tailwindBg}
+                alt=""
+                className="w-[90rem] flex-none max-w-none hidden dark:block"
+                decoding="async"
+              />
+            </picture>
+          </div>
+        </div>
+        <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
+          <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
+            <ReactLogo className="relative inline-block w-12" />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="TypeScript logo"
+              src={typescriptLogo}
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="Tailwind logo"
+              src={tailwindLogo}
+              className="relative inline-block w-12"
+            />
+          </div>
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+            This is a content script running React, TypeScript, and Tailwind.css
+          </h2>
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+            Learn more about creating cross-browser extensions by{' '}
+            <button
+              onClick={() => setIsDialogOpen(false)}
+              className="underline hover:no-underline
+            "
+            >
+              closing this hint
+            </button>
+            .
+          </p>
+        </div>
+        <div className="relative mt-16 h-80 lg:mt-8">
+          <img
+            className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
+            src={chromeWindowBg}
+            alt="Chrome window screenshot"
+            width="1824"
+            height="1080"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/test-template-content-extension-config/content/scripts.tsx

@@ -0,0 +1,17 @@
+import ReactDOM from 'react-dom/client'
+import ContentApp from './ContentApp'
+import './styles.css'
+
+setTimeout(initial, 1000)
+
+function initial() {
+  // Create a new div element and append it to the document's body
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Use `createRoot` to create a root, then render the <App /> component
+  // Note that `createRoot` takes the container DOM node, not the React element
+  const root = ReactDOM.createRoot(rootDiv)
+  root.render(<ContentApp />)
+}

package/dist/test-template-content-extension-config/content/styles.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#extension-root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+}

package/dist/test-template-content-extension-config/extension.config.js

@@ -0,0 +1,22 @@
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.svg$/i,
+        type: 'asset',
+        // *.svg?url
+        resourceQuery: /url/
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        // exclude react component if *.svg?url
+        resourceQuery: {not: [/url/]},
+        use: ['@svgr/webpack']
+      }
+    )
+
+    return config
+  }
+}

package/dist/test-template-content-extension-config/images/logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>

package/dist/test-template-content-extension-config/manifest.json

@@ -0,0 +1,28 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-content-extension-config",
+  "description": "An Extension.js example.",
+  "background": {
+    "chromium:service_worker": "background.ts",
+    "firefox:scripts": [
+      "background.ts"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://extension.js.org/*"
+      ],
+      "js": [
+        "./content/scripts.tsx"
+      ]
+    }
+  ],
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "author": "Your Name"
+}

package/dist/test-template-content-extension-config/package.json

@@ -0,0 +1,34 @@
+{
+  "private": true,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cezaraugusto/extension.git",
+    "directory": "programs/create/templates/content-extension-config"
+  },
+  "name": "test-template-content-extension-config",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "dependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  }
+}

package/dist/test-template-content-extension-config/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/dist/test-template-content-extension-config/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./content/**/*.tsx'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

package/dist/test-template-content-extension-config/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}

package/dist/test-template-content-react-svgr/README.md

@@ -0,0 +1,35 @@
+# test-template-content-react-svgr
+
+> An Extension.js example.
+
+## Available Scripts
+
+In the project directory, you can run the following scripts:
+
+### pnpm dev
+
+**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
+
+```bash
+pnpm dev
+```
+
+### pnpm start
+
+**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
+
+```bash
+pnpm start
+```
+
+### pnpm build
+
+**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
+
+```bash
+pnpm build
+```
+
+## Learn More
+
+To learn more about creating cross-browser extensions with Extension.js, visit the [official documentation](https://extension.js.org).

package/dist/test-template-content-react-svgr/background.ts

@@ -0,0 +1 @@
+console.log('Hello from the background script!')

package/dist/test-template-content-react-svgr/content/ContentApp.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import ReactLogo from '../images/logo.svg'
+import tailwindBg from '../images/tailwind_bg.png'
+import typescriptLogo from '../images/typescript.png'
+import tailwindLogo from '../images/tailwind.png'
+import chromeWindowBg from '../images/chromeWindow.png'
+
+export default function ContentApp() {
+  const [isdialogOpen, setIsDialogOpen] = React.useState(true)
+
+  if (!isdialogOpen) {
+    return (
+      <div className="mx-auto p-6">
+        <button
+          onClick={() => setIsDialogOpen(true)}
+          className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+        >
+          🧩 Open content script hint <span aria-hidden="true">+</span>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl md:px-0 lg:p-6">
+      <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+        <div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
+          <div className="w-[108rem] flex-none flex justify-end">
+            <picture>
+              <img
+                src={tailwindBg}
+                alt=""
+                className="w-[90rem] flex-none max-w-none hidden dark:block"
+                decoding="async"
+              />
+            </picture>
+          </div>
+        </div>
+        <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
+          <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
+            <ReactLogo className="relative inline-block w-12" />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="TypeScript logo"
+              src={typescriptLogo}
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="Tailwind logo"
+              src={tailwindLogo}
+              className="relative inline-block w-12"
+            />
+          </div>
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+            This is a content script running React, TypeScript, and Tailwind.css
+          </h2>
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+            Learn more about creating cross-browser extensions by{' '}
+            <button
+              onClick={() => setIsDialogOpen(false)}
+              className="underline hover:no-underline
+            "
+            >
+              closing this hint
+            </button>
+            .
+          </p>
+        </div>
+        <div className="relative mt-16 h-80 lg:mt-8">
+          <img
+            className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
+            src={chromeWindowBg}
+            alt="Chrome window screenshot"
+            width="1824"
+            height="1080"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/test-template-content-react-svgr/content/scripts.tsx

@@ -0,0 +1,17 @@
+import ReactDOM from 'react-dom/client'
+import ContentApp from './ContentApp'
+import './styles.css'
+
+setTimeout(initial, 1000)
+
+function initial() {
+  // Create a new div element and append it to the document's body
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Use `createRoot` to create a root, then render the <App /> component
+  // Note that `createRoot` takes the container DOM node, not the React element
+  const root = ReactDOM.createRoot(rootDiv)
+  root.render(<ContentApp />)
+}

package/dist/test-template-content-react-svgr/content/styles.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#extension-root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+}

package/dist/test-template-content-react-svgr/extension.config.js

@@ -0,0 +1,22 @@
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.svg$/i,
+        type: 'asset',
+        // *.svg?url
+        resourceQuery: /url/
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        // exclude react component if *.svg?url
+        resourceQuery: {not: [/url/]},
+        use: ['@svgr/webpack']
+      }
+    )
+
+    return config
+  }
+}

package/dist/test-template-content-react-svgr/images/logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>

package/dist/test-template-content-react-svgr/manifest.json

@@ -0,0 +1,28 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-content-react-svgr",
+  "description": "An Extension.js example.",
+  "background": {
+    "chromium:service_worker": "background.ts",
+    "firefox:scripts": [
+      "background.ts"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://extension.js.org/*"
+      ],
+      "js": [
+        "./content/scripts.tsx"
+      ]
+    }
+  ],
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "author": "Your Name"
+}

package/dist/test-template-content-react-svgr/package.json

@@ -0,0 +1,34 @@
+{
+  "private": true,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cezaraugusto/extension.git",
+    "directory": "programs/create/templates/content-react-svgr"
+  },
+  "name": "test-template-content-react-svgr",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "dependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  }
+}

package/dist/test-template-content-react-svgr/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/dist/test-template-content-react-svgr/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./content/**/*.tsx'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

package/dist/test-template-content-react-svgr/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}

package/package.json

@@ -9,7 +9,7 @@
     "node": ">=18"
   },
   "name": "extension-create",
-  "version": "2.0.0-alpha.24",
+  "version": "2.0.0-alpha.27",
   "description": "The Extension.js create step",
   "main": "./dist/module.js",
   "types": "./dist/module.d.ts",

package/dist/test-template-config-stylelint/stylelint.config.json

@@ -1 +0,0 @@
-{"extends": ["stylelint-config-standard"]}