[Tooling] Add CLI for Custom Extension Template Setup

[Blushyes]

Currently, this template is not yet able to cleanly and quickly set up a new project if I don't need to use certain pages, such as the options page or side page.

It might be worth considering using a CLI tool to initialize the project, allowing users to select which features they need, such as options, side pages, etc. Additionally, specific configurations could be added through a CLI command like cli-name add options-page.

[mubaidr]

This is very valid request, as:

• This will reduce complexity for new users.
• Make features more modular and independent so they can be removed or added with ease.

I will look into this.

[Blushyes]

Perhaps we can do it like this:

my-template/
├── bin/
│   └── cli.js          # Executable entry file
├── templates/          # Directory for template files
│   └── default/        # Default template
|   └── nuxt/           # Future Nuxt Template
├── package.json        # Package description file
└── README.md           # Documentation file

And the package.json would look something like this:

{
  "name": "create-my-template", // Package name, must start with create-
  ...
}

Then users can directly use pnpm create our-template-name to create a project.

What do you think? I can try solving this issue.

[mubaidr]

Would love any kind of contributions!

This is good but actually, I am looking into more granular feature selection during init. Like:

Usage:

# Sample interactive output:

? Select base pages to include:
❯◉ Background
 ◉ Popup
 ◉ Options
 ◉ Content Script
 ◉ Devtools Panel
 ◉ Side Panel

? Choose features to include:
❯◉ File-based Routing
 ◉ i18n
 ◉ Theme Switcher
 ◉ Notivue Notifications
 ◉ Pinia Store

✔ Scaffolding complete.
→ Run `cd my-extension && pnpm install && pnpm dev`

Feature List

Below is a sample list of available features grouped by category.

📄 Pages

• Background Script
• Action Popup
• Options Page
• Content Script
• Devtools Panel
• Browser Side Panel
• Install/Update Event Pages
• Offscreen Page (e.g. audio/screen recording)
• Sample Pages (Contact, About, Pricing)

Looking forward for your valuable feedback.

[Blushyes]

Would love any kind of contributions!

This is good but actually, I am looking into more granular feature selection during init. Like:

Usage:

Sample interactive output:

? Select base pages to include:
❯◉ Background
◉ Popup
◉ Options
◉ Content Script
◉ Devtools Panel
◉ Side Panel

? Choose features to include:
❯◉ File-based Routing
◉ i18n
◉ Theme Switcher
◉ Notivue Notifications
◉ Pinia Store

✔ Scaffolding complete.
→ Run cd my-extension && pnpm install && pnpm dev

Feature List

Below is a sample list of available features grouped by category.

📄 Pages

• Background Script[ ] Action Popup[ ] Options Page[ ] Content Script[ ] Devtools Panel[ ] Browser Side Panel[ ] Install/Update Event Pages[ ] Offscreen Page (e.g. audio/screen recording)[ ] Sample Pages (Contact, About, Pricing)

Looking forward for your valuable feedback.

That's certainly the case. In fact, our cli.js will include options for users to select the functionality they desire.

[mubaidr]

This is great that we are on a same page. Please let me know if you want to continue on this.

[Blushyes]

This is great that we are on a same page. Please let me know if you want to continue on this.

Yes, I will try to implement it.

[mubaidr]

Awesome! looking forward!

[Blushyes]

After some thought, I realized that directly modifying this project would result in high coupling and potentially "pollute" the template. So, I decided to create a separate CLI project instead.

Later, I discovered that this could be entirely generalized into a universal project for creating templates via npm create. The user would input the URL of a target repository, and based on the configuration within that repository, the tool could modularize a template project accordingly.

Thus, I went ahead and built a generalized tool, which I named Kern (short for "Kernel," emphasizing the tool's foundational flexibility).

However, it is still a very simple demo at this stage. It seems to be working correctly already. You can use my repository as an example.

I've already published it to npm. You can try it out using npm create kern my-project or pnpm create kern my-project, just use https://github.com/Blushyes/kern.git as the initial URL.

[Blushyes]

Tomorrow, I'll continue to improve kern. Once it’s fully built, we’ll only need to add a template.config.json file in the template project to enable modular creation of template projects. 🥳

[mubaidr]

This sounds great! Looking forward!

But apart for files inclusion/ exclusion, we may also need to run some scripts to update config files based on user selection?

[Blushyes]

This sounds great! Looking forward!

But apart for files inclusion/ exclusion, we may also need to run some scripts to update config files based on user selection?

Yes, it seems that we also need to allow users to utilize some scripts for flexible expansion. This might require some thoughtful design.

[mubaidr]

BTW why not use existing geenrators for this pupose? like this one here, its maintained and covers many cases: https://github.com/plopjs/plop

[Blushyes]

BTW why not use existing geenrators for this pupose? like this one here, its maintained and covers many cases: https://github.com/plopjs/plop

It looks pretty good.