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

package/dist/module.js

@@ -1,4 +1,4 @@
-"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("detect-package-manager");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 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
 
 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=`
@@ -9,7 +9,7 @@ Conflict! Path to ${(0,t.cyan)(o)} includes conflicting files:
 `}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){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,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.
 
 Now ${(0,t.magenta)(`cd ${(0,t.underline)(o)}`)} and ${(0,t.magenta)(`${i}`)} to open a new browser instance
 with your extension installed, loaded, and enabled for development.
@@ -25,7 +25,7 @@ ${(0,t.red)(n.message||n.toString())}`}function oe(){return"Symlink created succ
 ${(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("detect-package-manager");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){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,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.
 // 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.

package/dist/test-template-action/README.md

@@ -0,0 +1,35 @@
+# test-template-action
+
+> 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-action/action/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>Action 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 class="popup">
+    <header>
+      <h1>
+        <img
+          class="action"
+          src="../images/extension_128.png"
+          alt="The Extension logo"
+          width="72px"
+        />
+        <br />
+        Welcome to your Action 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-action/action/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-action/action/styles.css

@@ -0,0 +1,23 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  padding: 2em;
+}
+
+h1 {
+  font-size: 2.7em;
+}
+
+.action {
+  filter: grayscale(1);
+  transition:
+    filter 2s,
+    border-color 2s;
+}
+
+.action:hover {
+  filter: grayscale(0);
+  border-color: aquamarine;
+}

package/dist/test-template-action/manifest.json

@@ -0,0 +1,21 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-action",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "action": {
+    "default_popup": "action/index.html",
+    "default_title": "Action",
+    "default_icon": {
+      "16": "images/extension_16.png",
+      "48": "images/extension_48.png",
+      "128": "images/extension_128.png"
+    }
+  },
+  "author": "Your Name"
+}

package/dist/test-template-action/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "test-template-action",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "extension": "latest"
+  }
+}

package/dist/test-template-action-chatgpt/.env.example

@@ -0,0 +1 @@
+EXTENSION_OPENAI_API_KEY='My API Key'

package/dist/test-template-action-chatgpt/README.md

@@ -0,0 +1,35 @@
+# test-template-action-chatgpt
+
+> 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-action-chatgpt/action/ActionApp.tsx

@@ -0,0 +1,118 @@
+import {useState, type FormEvent} from 'react'
+import OpenAI from 'openai'
+import chatgptLogo from '../images/chatgpt.png'
+import extensionJsLogo from '../images/extension_128.png'
+
+const openai = new OpenAI({
+  apiKey: process.env.EXTENSION_OPENAI_API_KEY!,
+  dangerouslyAllowBrowser: true
+})
+
+interface Message {
+  content: string
+  role: 'user' | 'assistant'
+}
+
+function ActionApp() {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      content:
+        'Hello there! This is your ChatGPT extension sample, ' +
+        'built with React, Tailwind.css, and DaisyUI. ' +
+        'For it to work, create a .env file with your EXTENSION_OPENAI_API_KEY. ' +
+        "You can get an API key from OpenAI's website",
+      role: 'assistant'
+    },
+    {
+      content: 'https://platform.openai.com/api-keys',
+      role: 'assistant'
+    }
+  ])
+
+  const [isTyping, setIsTyping] = useState(false)
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const form = e.target as HTMLFormElement
+    const input = form[0] as HTMLInputElement
+
+    const newMessage: Message = {
+      content: input.value,
+      role: 'user'
+    }
+
+    const newMessages = [...messages, newMessage]
+
+    setMessages(newMessages)
+    setIsTyping(true)
+    form.reset()
+
+    const completion = await openai.chat.completions.create({
+      model: 'gpt-3.5-turbo',
+      messages: newMessages
+    })
+
+    setMessages([...newMessages, completion.choices[0].message as Message])
+    setIsTyping(false)
+  }
+
+  return (
+    <section className="container mx-auto p-5 fixed inset-0">
+      <div className="w-full h-full flex flex-col">
+        <div className="flex-grow overflow-auto">
+          {messages.length &&
+            messages.map((msg, i) => (
+              <div
+                className={`chat ${
+                  msg.role === 'assistant' ? 'chat-start' : 'chat-end'
+                }`}
+                key={'chatKey' + i}
+              >
+                <div className="chat-image avatar">
+                  <div className="w-10 rounded-full">
+                    <img
+                      src={
+                        msg.role === 'assistant' ? chatgptLogo : extensionJsLogo
+                      }
+                      alt="avatar"
+                    />
+                  </div>
+                </div>
+                <div className="chat-bubble">{msg.content}</div>
+              </div>
+            ))}
+        </div>
+
+        <form className="form-control items-center" onSubmit={handleSubmit}>
+          <div className="input-group max-w-full w-[800px] relative flex items-center">
+            {isTyping && (
+              <small className="absolute -top-5 left-0.5 animate-pulse">
+                ChatGPT Extension is typing...
+              </small>
+            )}
+
+            <input
+              type="text"
+              placeholder="Ask ChatGPT a question."
+              className="input input-bordered flex-grow mr-2.5"
+              required
+            />
+            <button className="btn btn-square" type="submit">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+              >
+                <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+      </div>
+    </section>
+  )
+}
+
+export default ActionApp

package/dist/test-template-action-chatgpt/action/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ChatGPT Template</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this extension.</noscript>
+    <div id="root"></div>
+  </body>
+  <script src="./scripts.tsx"></script>
+</html>

package/dist/test-template-action-chatgpt/action/scripts.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import ActionApp from './ActionApp'
+import './styles.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root')!)
+
+root.render(
+  <React.StrictMode>
+    <ActionApp />
+  </React.StrictMode>
+)

package/dist/test-template-action-chatgpt/action/styles.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#root {
+  width: 350px;
+  height: 600px;
+}

package/dist/test-template-action-chatgpt/manifest.json

@@ -0,0 +1,21 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-action-chatgpt",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "action": {
+    "default_icon": {
+      "16": "images/extension_16.png",
+      "48": "images/extension_48.png",
+      "128": "images/extension_128.png"
+    },
+    "default_title": "ChatGPT",
+    "default_popup": "action/index.html"
+  },
+  "author": "Your Name"
+}

package/dist/test-template-action-chatgpt/package.json

@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "name": "test-template-action-chatgpt",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "daisyui": "^4.12.10",
+    "openai": "^4.57.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  }
+}

package/dist/test-template-action-chatgpt/postcss.config.js

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

package/dist/test-template-action-chatgpt/tailwind.config.js

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

package/dist/test-template-action-chatgpt/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-config-stylelint/README.md

@@ -0,0 +1,35 @@
+# test-template-config-stylelint
+
+> 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-stylelint/images/stylelint.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2393" viewBox="0 0 256 245" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M129.74 243.648c28-100.109 27.188-100.563 47.425-171.942l4.864 2.816c2.65 1.516 4.813.268 4.813-2.778V37.696C192.218 18.893 196.416 4.352 197.658 0h21.92L256 33.728 232.077 54.4l18.093 19.565-119.226 169.683c-.576.96-1.389.742-1.203 0zm13.025-215.782c1.088 0 1.958.595 1.958 1.344v17.44c0 .73-.877 1.324-1.958 1.324h-29.44c-1.088 0-1.965-.595-1.965-1.33V29.196c0-.736.877-1.344 1.958-1.344h29.44l.007.013zM179.117 8.55L146.72 27.251c.371.576.602 1.235.602 1.952v17.453c0 .896-.359 1.715-.935 2.368l32.723 18.893c2.228 1.293 4.058.237 4.058-2.336V10.893c0-2.58-1.818-3.629-4.051-2.343zm-70.362 38.106v-17.46c0-.716.23-1.375.602-1.945L76.96 8.538c-2.227-1.28-4.058-.23-4.058 2.342v54.688c0 2.573 1.83 3.629 4.064 2.336l32.717-18.893c-.576-.659-.921-1.472-.921-2.368l-.007.013zm16.301 196.992h1.203C98.266 143.539 99.072 143.085 78.835 71.706l-4.864 2.816c-2.643 1.516-4.813.268-4.813-2.778V37.696C63.782 18.899 59.584 4.352 58.342 0H36.43L0 33.728 23.917 54.4 5.824 73.971l119.232 169.677zM127.11 84.41a8.845 8.845 0 1 0 0-17.69 8.845 8.845 0 0 0 0 17.69zm0 52.576a8.845 8.845 0 1 0 0-17.69 8.845 8.845 0 0 0 0 17.69zm0 52.588a8.845 8.845 0 1 0 0-17.69 8.845 8.845 0 0 0 0 17.69z"/></svg>

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

@@ -0,0 +1,15 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "test-template-config-stylelint",
+  "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-stylelint/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>Stylelint 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="stylelint"
+          src="../images/stylelint.svg"
+          alt="The Stylelint logo"
+          width="120px"
+        />
+        <br />
+        Welcome to your Stylelint 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-stylelint/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
+})