Merge pull request #52 from guocaoyi/feat/0.9.0

Feat/0.9.0
guocaoyi · Oct 14, 2023 · fa0566d · fa0566d
2 parents f26c1b2 + 5708849
commit fa0566d
Show file tree

Hide file tree

Showing 87 changed files with 1,252 additions and 661 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,11 +9,13 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
-## Next [xxxx.xx.xx]
+## 0.9.0 [xxxx.xx.xx]
 
-- feat: vite version update to 3.x
 - fix: vue framework vite @3 error (issue #51)
+- feat: depen version update, <vite@4.x>
+- feat: support devtool panel
 - doc: update README.md
+- doc: i18n, supprt French \ Deutsch \ Русский \ 日本語 \ Indonesian
 
 ## 0.8.9 [2023.10.09]
 

diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
 # Create Chrome Extension (.crx)
 
-![crx-preview](./docs/crx-preview.png)
-
+![crx-preview](./docs/img/crx-preview.png)
 [![OSCS Status](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
 [![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
 [![npm-download](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
@@ -10,13 +9,13 @@
 
 > Scaffolding your chrome extension, multiple boilerplates supported!
 
-- 🚀 Lightning Fast HMR(use [Vite3](https://vitejs.dev))
+- 🚀 Lightning Fast HMR(use [Vite4](https://vitejs.dev))
 - 🥡 Out of Box
-- 🌈 Multiple Frontend Framework Supported (10+)
-- 🥢 Multiple Language Supported (TypeScript & JavaScript)
-- 🧶 Optimized Builds
+- 🌈 Multiple Frontend Framework Supported ([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))
+- 🥢 Multiple Language Supported ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
+- 🧶 Optimized Builds (Background \ Content \ Popup \ Options \ SidePanel \ DevtoolsPanel)
 
-[EN](./README.md) · [中文](./README_zh.md)
+[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [한국어](./docs/README.ko-KR.md) · [Indonesian](./docs/README.id-ID.md) · [Русский](./docs/README.ja-JP.md) · [Deutsch](./docs/README.de-DE.md) · [日本語](./docs/README.ja-JP.md) (Translation support by ChatGPT)
 
 ## Installing
 
@@ -64,18 +63,8 @@ You can also generator the project with `crx` cli, run:
 λ create-chrome-ext my-crx-app
 ```
 
-## Supported Templates
-
-framework presets include:
-
-[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)
-
-languages supported:
-
-[JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/)
-
 ## Preview
 
-![crx-run](./docs/crx-run.png)
-![crx-install](./docs/crx-install.png)
-![crx-build](./docs/crx-build.png)
+![crx-run](./docs/img/crx-run.png)
+![crx-install](./docs/img/crx-install.png)
+![crx-build](./docs/img/crx-build.png)
diff --git a/docs/README.de-DE.md b/docs/README.de-DE.md
@@ -0,0 +1,70 @@
+# Erstellen einer Chrome-Erweiterung (.crx)
+
+![Vorschau crx](./img/crx-preview.png)
+[![OSCS-Status](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
+[![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
+[![npm-Downloads](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
+![GitHub-Sprachanzahl](https://img.shields.io/github/languages/count/guocaoyi/create-chrome-ext)
+[![npm-Veröffentlichung](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml)
+
+> Strukturieren Sie Ihre Chrome-Erweiterung, mit Unterstützung mehrerer Boilerplates!
+
+- 🚀 Blitzschnelle HMR (Verwendung von [Vite4](https://vitejs.dev))
+- 🥡 Sofort einsatzbereit
+- 🌈 Unterstützung mehrerer Frontend-Frameworks ([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))
+- 🥢 Unterstützung mehrerer Sprachen ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
+- 🧶 Optimierte Builds (Hintergrund · Inhalt · Popup · Optionen · Seitenleiste · Devtools-Panel)
+
+[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+
+## Installation
+
+> Node >= 14.18.0
+
+```bash
+# Verwenden Sie den Befehl npm-create oder verwenden Sie pnpm | yarn
+λ npm create chrome-ext
+
+# oder verwenden Sie den Befehl npx
+λ npx create-chrome-ext
+
+# oder verwenden Sie den Befehl npm-init
+λ npm init chrome-ext
+```
+
+## Verwendung
+
+Sie können auch direkt den Projektnamen und die Vorlage, die Sie verwenden möchten, über zusätzliche Befehlszeilenoptionen angeben. Um beispielsweise eine Vite + Svelte-Projektstruktur zu erstellen, führen Sie folgenden Befehl aus:
+
+```bash
+# npm 6.x
+λ npm create chrome-ext@latest my-crx-app --template svelte-js
+
+# oder npm 7+, es ist ein zusätzlicher Doppelstrich erforderlich:
+λ npm create chrome-ext@latest my-crx-app -- --template react-ts
+
+# oder yarn
+λ yarn create chrome-ext my-crx-app --template vue-ts
+
+# oder pnpm
+λ pnpm create chrome-ext my-crx-app --template vanilla-ts
+```
+
+Sie können das Projekt auch mit dem Befehlszeilen-Tool `crx` generieren. Führen Sie dazu den folgenden Befehl aus:
+
+```bash
+λ npm install create-chrome-ext --global
+
+# und dann
+λ crx my-crx-app
+# oder
+λ crx my-crx-app --template preact-js
+# oder verwenden Sie create-chrome-exe (globale Umgebung)
+λ create-chrome-ext my-crx-app
+```
+
+## Vorschau
+
+![crx-Ausführung](./img/crx-run.png)
+![crx-Installation](./img/crx-install.png)
+![crx-Build](./img/crx-build.png)
diff --git a/docs/README.fr-FR.md b/docs/README.fr-FR.md
@@ -0,0 +1,70 @@
+# Créer une extension Chrome (.crx)
+
+![Aperçu crx](./img/crx-preview.png)
+[![Statut OSCS](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
+[![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
+[![Téléchargements npm](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
+![Nombre de langages GitHub](https://img.shields.io/github/languages/count/guocaoyi/create-chrome-ext)
+[![npm publish](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml)
+
+> Créez la structure de votre extension Chrome, avec prise en charge de plusieurs modèles de démarrage !
+
+- 🚀 Mise à jour rapide avec HMR (utilisation de [Vite4](https://vitejs.dev))
+- 🥡 Prêt à l'emploi
+- 🌈 Prise en charge de plusieurs frameworks frontend ([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))
+- 🥢 Prise en charge de plusieurs langages ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
+- 🧶 Création optimisée
+
+[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+
+## Installation
+
+> Node >= 14.18.0
+
+```bash
+# Utilisez la commande npm-create, ou utilisez pnpm | yarn
+λ npm create chrome-ext
+
+# ou utilisez la commande npx
+λ npx create-chrome-ext
+
+# ou utilisez la commande npm-init
+λ npm init chrome-ext
+```
+
+## Utilisation
+
+Vous pouvez également spécifier directement le nom du projet et le modèle que vous souhaitez utiliser via des options de ligne de commande supplémentaires. Par exemple, pour créer la structure d'un projet Vite + Svelte, exécutez la commande suivante :
+
+```bash
+# npm 6.x
+λ npm create chrome-ext@latest my-crx-app --template svelte-js
+
+# ou npm 7+, un double tiret supplémentaire est nécessaire :
+λ npm create chrome-ext@latest my-crx-app -- --template react-ts
+
+# ou yarn
+λ yarn create chrome-ext my-crx-app --template vue-ts
+
+# ou pnpm
+λ pnpm create chrome-ext my-crx-app --template vanilla-ts
+```
+
+Vous pouvez également générer le projet avec l'interface de ligne de commande `crx`, exécutez la commande suivante :
+
+```bash
+λ npm install create-chrome-ext --global
+
+# puis
+λ crx my-crx-app
+# ou
+λ crx my-crx-app --template preact-js
+# ou utilisez create-chrome-exe (environnement global)
+λ create-chrome-ext my-crx-app
+```
+
+## Aperçu
+
+![Exécution de crx](./img/crx-run.png)
+![Installation de crx](./img/crx-install.png)
+![Création de crx](./img/crx-build.png)
diff --git a/docs/README.id-ID.md b/docs/README.id-ID.md
@@ -0,0 +1,70 @@
+# Buat Ekstensi Chrome (.crx)
+
+![Pratinjau crx](./docs/crx-preview.png)
+[![Status OSCS](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
+[![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
+[![Unduh npm](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
+![Jumlah Bahasa GitHub](https://img.shields.io/github/languages/count/guocaoyi/create-chrome-ext)
+[![Penerbitan npm](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml)
+
+> Membentuk ekstensi Chrome Anda, dengan dukungan berbagai boilerplate!
+
+- 🚀 HMR Cepat (menggunakan [Vite4](https://vitejs.dev))
+- 🥡 Siap Pakai
+- 🌈 Mendukung Berbagai Framework Frontend ([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))
+- 🥢 Mendukung Berbagai Bahasa ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
+- 🧶 Pembangunan Teroptimasi (Latar Belakang · Konten · Popup · Opsi · Panel Sisi · Panel Devtools)
+
+[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+
+## Instalasi
+
+> Node >= 14.18.0
+
+```bash
+# Gunakan perintah npm-create, atau gunakan pnpm atau yarn
+λ npm create chrome-ext
+
+# atau gunakan perintah npx
+λ npx create-chrome-ext
+
+# atau gunakan perintah npm-init
+λ npm init chrome-ext
+```
+
+## Penggunaan
+
+Anda juga dapat langsung menentukan nama proyek dan templat yang ingin Anda gunakan melalui opsi baris perintah tambahan. Misalnya, untuk membentuk proyek Vite + Svelte, jalankan:
+
+```bash
+# npm 6.x
+λ npm create chrome-ext@latest my-crx-app --template svelte-js
+
+# atau npm 7+, perlu tambahan tanda dua lini:
+λ npm create chrome-ext@latest my-crx-app -- --template react-ts
+
+# atau gunakan yarn
+λ yarn create chrome-ext my-crx-app --template vue-ts
+
+# atau pnpm
+λ pnpm create chrome-ext my-crx-app --template vanilla-ts
+```
+
+Anda juga dapat membuat proyek dengan perintah baris `crx`, jalankan:
+
+```bash
+λ npm install create-chrome-ext --global
+
+# dan kemudian
+λ crx my-crx-app
+# atau
+λ crx my-crx-app --template preact-js
+# atau gunakan create-chrome-exe (lingkungan global)
+λ create-chrome-ext my-crx-app
+```
+
+## Pratinjau
+
+![crx-berjalan](./docs/crx-run.png)
+![crx-pasang](./docs/crx-install.png)
+![crx-bangun](./docs/crx-build.png)
diff --git a/docs/README.ja-JP.md b/docs/README.ja-JP.md
@@ -0,0 +1,70 @@
+# Chrome拡張機能を作成する（.crx）
+
+![crxプレビュー](./img/crx-preview.png)
+[![OSCSステータス](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
+[![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
+[![npmダウンロード](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
+![GitHub言語数](https://img.shields.io/github/languages/count/guocaoyi/create-chrome-ext)
+[![npm公開](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml)
+
+> Chrome拡張機能の骨組みを作成します。複数のボイラープレートがサポートされています！
+
+- 🚀 高速なHMR（[Vite4](https://vitejs.dev)を使用）
+- 🥡 すぐに使える
+- 🌈 複数のフロントエンドフレームワークをサポート（[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)）
+- 🥢 複数の言語をサポート（[JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/)）
+- 🧶 最適化されたビルド
+
+[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+
+## インストール
+
+> Node >= 14.18.0
+
+```bash
+# npm-createコマンドを使用するか、pnpmまたはyarnを使用します
+λ npm create chrome-ext
+
+# またはnpxコマンドを使用します
+λ npx create-chrome-ext
+
+# またはnpm-initコマンドを使用します
+λ npm init chrome-ext
+```
+
+## 使用法
+
+追加のコマンドラインオプションを使用して、プロジェクト名と使用したいテンプレートを直接指定することもできます。例えば、Vite + Svelteプロジェクトの骨組みを作成するには、次のコマンドを実行します：
+
+```bash
+# npm 6.x
+λ npm create chrome-ext@latest my-crx-app --template svelte-js
+
+# またはnpm 7+、追加の二重ダッシュが必要です：
+λ npm create chrome-ext@latest my-crx-app -- --template react-ts
+
+# またはyarnを使用します
+λ yarn create chrome-ext my-crx-app --template vue-ts
+
+# またはpnpmを使用します
+λ pnpm create chrome-ext my-crx-app --template vanilla-ts
+```
+
+プロジェクトを`crx` CLIで生成することもできます。次のコマンドを実行してください：
+
+```bash
+λ npm install create-chrome-ext --global
+
+# そして
+λ crx my-crx-app
+# または
+λ crx my-crx-app --template preact-js
+# またはcreate-chrome-exe（グローバル環境を使用）
+λ create-chrome-ext my-crx-app
+```
+
+## プレビュー
+
+![crx実行](./img/crx-run.png)
+![crxインストール](./img/crx-install.png)
+![crxビルド](./img/crx-build.png)