|
| 1 | +# Create Chrome Extension (.crx) |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +[](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small) |
| 6 | +[](https://www.npmjs.com/package/create-chrome-ext) |
| 7 | +[](https://www.npmjs.com/package/create-chrome-ext) |
| 8 | + |
| 9 | +[](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml) |
| 10 | + |
| 11 | +> Chrome 插件生成器,支持多种框架模板! |
| 12 | +
|
| 13 | +- 🚀 迅速的热更能力(采用 [Vite2](https://vitejs.dev)) |
| 14 | +- 🥡 开箱即用 |
| 15 | +- 🌈 多种前端框架支撑 (9+) |
| 16 | +- 🥢 支撑 TypeScript 以及 JavaScript |
| 17 | +- 🌗 明亮以及暗黑模式 |
| 18 | + |
| 19 | +## 安装 |
| 20 | + |
| 21 | +> Node >= 14.18.0 |
| 22 | +
|
| 23 | +```bash |
| 24 | +# 使用 npm create 命令 |
| 25 | +λ npm create chrome-ext |
| 26 | + |
| 27 | +# 或者使用 npx 命令 |
| 28 | +λ npx create-chrome-ext |
| 29 | + |
| 30 | +# 或者使用 npm init 命令 |
| 31 | +λ npm init chrome-ext |
| 32 | +``` |
| 33 | + |
| 34 | +## 用例 |
| 35 | + |
| 36 | +您还可以通过其他命令行配置直接指定项目名称和要使用的模板。比如 Vite + Svelte 项目,运行: |
| 37 | + |
| 38 | +```bash |
| 39 | +# npm 6.x |
| 40 | +λ npm create chrome-ext@latest my-crx-app --template svelte-js |
| 41 | + |
| 42 | +# npm 版本 7 以上, 注意 -- 命令选项 |
| 43 | +λ npm create chrome-ext@latest my-crx-app -- --template react-ts |
| 44 | + |
| 45 | +# or yarn |
| 46 | +λ yarn create chrome-ext my-crx-app --template vue-ts |
| 47 | + |
| 48 | +# or pnpm |
| 49 | +λ pnpm create chrome-ext my-crx-app --template vanilla-ts |
| 50 | +``` |
| 51 | + |
| 52 | +You can also generator the project with `crx` cli, run: |
| 53 | + |
| 54 | +```bash |
| 55 | +λ npm install create-chrome-ext --global |
| 56 | + |
| 57 | +# and then |
| 58 | +λ crx my-crx-app |
| 59 | +# or |
| 60 | +λ crx my-crx-app --template preact-js |
| 61 | +# or use create-chrome-exe (global env) |
| 62 | +λ create-chrome-ext my-crx-app |
| 63 | +``` |
| 64 | + |
| 65 | +## 模板 |
| 66 | + |
| 67 | +预置的前端架构: |
| 68 | + |
| 69 | +[React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com) |
| 70 | + |
| 71 | +语言支持: |
| 72 | + |
| 73 | +[JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/) |
| 74 | + |
| 75 | +## 预览 |
| 76 | + |
| 77 | + |
| 78 | + |
| 79 | + |
0 commit comments