create excutable

.github/workflows/build.yml

@@ -12,6 +12,9 @@ jobs:
   build:
     name: Create artifacts
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./template
     steps:
       - uses: actions/checkout@v4
       - uses: actions/cache@v4

.github/workflows/release.yml

@@ -10,21 +10,6 @@ jobs:
     if: startsWith(github.ref, 'refs/tags/v')  
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/cache@v4
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '21'
-      - name: install dependency
-        run: yarn
-      - name: Create chrome artifacts
-        run: yarn zip
-      - name: Create Firefox artifacts
-        run: yarn zip:firefox
-
       - name: Build Changelog
         id: github_release
         uses: mikepenz/release-changelog-builder-action@v5
@@ -35,7 +20,6 @@ jobs:
         with:
           draft: true
           body: ${{steps.github_release.outputs.changelog}}
-          files: ./package/*
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.gitignore

@@ -1,23 +1 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/package
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.history
-*.log
-
-# secrets
-secrets.*.js
+node_modules

README.md

@@ -1,45 +0,0 @@
-# my-crx-app
-
-> a chrome/firefox extension tools built with Vite + React-js, and Manifest v3
-
-## Installing
-
-1. Check if your `Node.js` version is >= **14**.
-2. Change or configurate the name of your extension on `src/manifest`.
-3. Run `yarn` to install the dependencies.
-
-## Developing
-
-run the command
-
-```shell
-$ cd my-crx-app
-
-$ yarn dev
-```
-
-### Chrome Extension Developer Mode
-
-1. set your Chrome browser 'Developer mode' up
-2. click 'Load unpacked', and select `my-crx-app/build` folder
-
-### Firefox Extension Developer Mode
-
-1. Build your project firstly by running `yarn build:firefox`
-2. Open Firefox and go to `about:debugging#/runtime/this-firefox`
-3. Click on 'Load Temporary Add-on' and select `my-crx-app/build` folder
-
-
-## Packing
-
-After the development of your extension run the command
-
-```shell
-$ yarn zip # for chrome
-or
-$ yarn zip:firefox # for firefox
-```
-
----
-
-Generated by [create-chrome-ext](https://github.com/guocaoyi/create-chrome-ext)

generate.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+import fs from "fs-extra";
+import ignore from "ignore";
+import inquirer from "inquirer";
+import { fileURLToPath } from "node:url";
+import path from "path";
+
+async function generateProject() {
+  const answers = await inquirer.prompt([
+    { name: "name", message: "Project name:", default: "my-crx-app" },
+    { name: "version", message: "Version:", default: "0.0.0" },
+    { name: "description", message: "Description:", default: "" },
+    { name: "author", message: "Author:", default: "" },
+  ]);
+
+  const templateDir = path.resolve(
+    fileURLToPath(import.meta.url),
+    "..",
+    "template"
+  );
+
+  const outputDir = path.join(process.cwd(), answers.name);
+
+  // await fs.copy(templateDir, outputDir);
+  // console.log(`Copied template to ${outputDir}`);
+
+  // Load .gitignore rules
+  const gitignorePath = path.join(templateDir, ".gitignore");
+  let ig = ignore();
+  if (fs.existsSync(gitignorePath)) {
+    const gitignoreContent = fs.readFileSync(gitignorePath, "utf8");
+    ig = ignore().add(gitignoreContent);
+  }
+
+  // Copy template with .gitignore filtering
+  await fs.copy(templateDir, outputDir, {
+    filter: (src) => {
+      const relativePath = path.relative(templateDir, src);
+      return relativePath === "" || !ig.ignores(relativePath);
+    },
+  });
+
+  // Update package.json
+  const packageJsonPath = path.join(outputDir, "package.json");
+  let packageJson = await fs.readFile(packageJsonPath, "utf-8");
+
+  const pkg = JSON.parse(packageJson, "utf-8");
+  pkg.name = answers.name;
+  pkg.displayName = answers.name;
+  pkg.version = answers.version;
+  pkg.description = answers.description;
+  pkg.author = answers.author;
+
+  await fs.writeFile(packageJsonPath, JSON.stringify(pkg, null, 2));
+
+  // Update README.md
+  const readmePath = path.join(outputDir, "README.md");
+  let readmeContent = await fs.readFile(readmePath, "utf8");
+  readmeContent = readmeContent.replace(/my-crx-app/g, answers.name);
+  await fs.writeFile(readmePath, readmeContent);
+
+  console.log(`
+   Suggest you next step:
+    1. cd ${path.relative(process.cwd(), outputDir)}
+    2. Run yarn install
+    3. Open chrome://extensions/ in your browser
+    4. Check the box for Developer mode in the top right.
+    5. Click the Load unpacked extension button.
+    6. Select the build/ directory that was created.
+  `);
+}
+
+generateProject().catch(console.error);

package.json

@@ -1,51 +1,15 @@
 {
-  "name": "my-crx-app",
-  "displayName": "my-crx-app",
-  "version": "0.0.0",
-  "author": "**",
-  "description": "",
-  "type": "module",
+  "name": "browser-extension-template",
+  "version": "1.0.0",
+  "main": "generate.js",
   "license": "MIT",
-  "keywords": [
-    "chrome-extension",
-    "firefox-extension",
-    "react",
-    "vite",
-    "create-chrome-ext"
-  ],
-  "engines": {
-    "node": ">=14.18.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:firefox": "BROWSER=firefox vite build",
-    "preview": "vite preview",
-    "fmt": "prettier --write '**/*.{jsx,js,json,css,scss,md}'",
-    "zip": "yarn build && node src/zip.js",
-    "zip:firefox": "export BROWSER=firefox && yarn build && node src/zip.js"
+  "bin": {
+    "gen-ext": "./generate.js"
   },
+  "type": "module",
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "@eslint/js": "^9.20.0",
-    "@types/chrome": "^0.0.304",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@vitejs/plugin-react": "^4.1.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.20.1",
-    "eslint-plugin-react": "^7.37.4",
-    "glob": "^10.3.10",
-    "globals": "^15.15.0",
-    "gulp": "^4.0.2",
-    "gulp-zip": "^6.0.0",
-    "postcss": "^8.5.2",
-    "prettier": "^3.0.3",
-    "tailwindcss": "3",
-    "vite": "^4.4.11"
+    "fs-extra": "^11.3.0",
+    "ignore": "^7.0.3",
+    "inquirer": "^12.4.2"
   }
 }

template/.github/workflows/build.yml

@@ -0,0 +1,34 @@
+name: Build
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Create artifacts
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '21'
+      - name: install dependency
+        run: yarn
+      - name: Create chrome artifacts
+        run: yarn zip
+      - name: Create Firefox artifacts
+        run: yarn zip:firefox
+      - uses: actions/upload-artifact@v4
+        with:
+          name: extensions
+          path: |
+            package/*

template/.github/workflows/release.yml

@@ -0,0 +1,41 @@
+name: Release
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - 'v*.*'
+
+jobs:
+  release:
+    if: startsWith(github.ref, 'refs/tags/v')  
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '21'
+      - name: install dependency
+        run: yarn
+      - name: Create chrome artifacts
+        run: yarn zip
+      - name: Create Firefox artifacts
+        run: yarn zip:firefox
+
+      - name: Build Changelog
+        id: github_release
+        uses: mikepenz/release-changelog-builder-action@v5
+        with:
+          mode: 'COMMIT'
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: true
+          body: ${{steps.github_release.outputs.changelog}}
+          files: ./package/*
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

template/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/package
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.history
+*.log
+
+# secrets
+secrets.*.js

template/README.md

@@ -0,0 +1,45 @@
+# my-crx-app
+
+> a chrome/firefox extension tools built with Vite + React-js, and Manifest v3
+
+## Installing
+
+1. Check if your `Node.js` version is >= **14**.
+2. Change or configurate the name of your extension on `src/manifest`.
+3. Run `yarn` to install the dependencies.
+
+## Developing
+
+run the command
+
+```shell
+$ cd my-crx-app
+
+$ yarn dev
+```
+
+### Chrome Extension Developer Mode
+
+1. set your Chrome browser 'Developer mode' up
+2. click 'Load unpacked', and select `my-crx-app/build` folder
+
+### Firefox Extension Developer Mode
+
+1. Build your project firstly by running `yarn build:firefox`
+2. Open Firefox and go to `about:debugging#/runtime/this-firefox`
+3. Click on 'Load Temporary Add-on' and select `my-crx-app/build` folder
+
+
+## Packing
+
+After the development of your extension run the command
+
+```shell
+$ yarn zip # for chrome
+or
+$ yarn zip:firefox # for firefox
+```
+
+---
+
+Generated by [create-chrome-ext](https://github.com/guocaoyi/create-chrome-ext)