diff --git a/.npmignore b/.npmignore
index 0f000d8..2f44d39 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,9 +1,18 @@
+# OS
+.DS_Store
+
+# debug & development
 __tests__
+*.spec.ts
+*.test.ts
+
+# npm
 node_modules
 yarn.lock
 package-lock.json
 pnpm-lock.yaml
+*.log
 
+# others
 .gitignore
-.DS_Store
-*.log
\ No newline at end of file
+.gitattributes
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc7deda..293cc79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,20 @@
 
 ```txt
 Summary
-  1. this document follow SemVer2.0 protocol
-  2. use a PATCH for release version, also includes beta\alpha\rc
+  1. document grouping follow 'SemVer2.0' protocol
+  2. use 'PATCH' as a minimum granularity
   3. use concise descriptions
-  4. type: feat\fix\update\perf\remove\other
-  5. version stamp follow the yyyy.MM.dd format
+  4. type: feat \ fix \ update \ perf \ remove \ docs \ chore
+  5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.4.0 [2022.07.06]
+
+- feat: add inferno framework templates
+- perf: update mustache CHANGELOG, README, DOCS, add tags & keywords
+- perf: cli framework selection use colors, and sorted by total ranking
+- docs: preview use code image replace screenshot
+
 ## 0.3.0 [2022.07.02]
 
 - feat: add solid framework templates
diff --git a/README.md b/README.md
index 5b2e117..3cde54c 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,18 @@
 # Create Chrome Extension (.crx)
 
+[![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)
 ![GitHub Language Count](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)
 
-> Next generation chrome extension generater
+> Generating your chrome extension, multiple boilerplates supported!
 
-- ⚡️ Lightning Fast HMR(use vite2)
-- 🗂 Multiple Framework Support
-- 📦 Optimized Builds
-- 📚 Documentation
+- 🚀 Lightning Fast HMR(use [Vite2](https://vitejs.dev))
+- 🥡 Out of Box
+- 🌈 Multiple Frontend Framework Supported(8+)
+- 🥢 Multiple Language Supported(TypeScript & JavaScript)
+- 🧶 Optimized Builds
 
 ## Installing
 
@@ -69,15 +71,16 @@ framework presets include:
 - [React](https://reactjs.org/)
 - [Vue](https://vuejs.org/)
 - [Svelte](https://svelte.dev/)
-- [Solid](https://www.solidjs.com/)
 - [Preact](https://preactjs.com/)
+- [Solid](https://www.solidjs.com/)
 - [Lit](https://lit.dev/)
+- [Inferno](https://www.infernojs.org/)
 - [Vanilla](http://vanilla-js.com/)
 
 languages presets include:
 
-- JavaScript
-- TypeScript
+- [JavaScript](https://www.javascript.com/)
+- [TypeScript](https://www.typescriptlang.org/)
 
 ## Preview
 
diff --git a/docs/crx-build.png b/docs/crx-build.png
index 7b9939a..40e3106 100644
Binary files a/docs/crx-build.png and b/docs/crx-build.png differ
diff --git a/docs/crx-install.png b/docs/crx-install.png
index 25532fd..3cd36c6 100644
Binary files a/docs/crx-install.png and b/docs/crx-install.png differ
diff --git a/docs/crx-run.png b/docs/crx-run.png
index 15fc145..34ff34e 100644
Binary files a/docs/crx-run.png and b/docs/crx-run.png differ
diff --git a/index.js b/index.js
index c153059..e3088d3 100755
--- a/index.js
+++ b/index.js
@@ -7,132 +7,148 @@ import minimist from 'minimist'
 import prompts from 'prompts'
 import mustache from 'mustache'
 import { fileURLToPath } from 'url'
-import {
-  blue,
-  lightBlue,
-  yellow,
-  lightYellow,
-  magenta,
-  green,
-  red,
-  lightCyan,
-  lightRed,
-  reset,
-} from 'kolorist'
+import { red, ansi256, reset } from 'kolorist'
 
 const argv = minimist(process.argv.slice(2), { string: ['_'] })
 const cwd = process.cwd()
 
+/**
+ * sorted by total ranking
+ */
 const Boilerplates = [
   {
-    name: 'react',
-    color: lightCyan,
+    name: 'react', // star:191 wd:15097
+    kolor: ansi256(81),
     variants: [
       {
         name: 'react-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'react-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'vue',
-    color: green,
+    name: 'vue', // star:197 wd:3223
+    kolor: ansi256(36),
     variants: [
       {
         name: 'vue-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'vue-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'solid',
-    color: blue,
+    name: 'svelte', // star:60.3 wd:339
+    kolor: ansi256(203),
     variants: [
       {
-        name: 'solid-js',
+        name: 'svelte-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
-        name: 'solid-ts',
+        name: 'svelte-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'svelte',
-    color: lightRed,
+    name: 'preact', // star:32 wd:1385
+    kolor: ansi256(56),
     variants: [
       {
-        name: 'svelte-js',
+        name: 'preact-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
-        name: 'svelte-ts',
+        name: 'preact-ts',
+        display: 'TypeScript',
+        kolor: ansi256(25),
+      },
+    ],
+  },
+  {
+    name: 'solid', // star:19.9 wd:30
+    kolor: ansi256(25),
+    variants: [
+      {
+        name: 'solid-js',
+        display: 'JavaScript',
+        kolor: ansi256(226),
+      },
+      {
+        name: 'solid-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'lit',
-    color: lightBlue,
+    name: 'lit', // star:11.9 wd:306
+    kolor: ansi256(43),
     variants: [
       {
         name: 'lit-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'lit-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
   {
-    name: 'preact',
-    color: magenta,
+    name: 'inferno', // star:15.5 wd:88
+    kolor: ansi256(202),
     variants: [
       {
-        name: 'preact-js',
+        name: 'inferno-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
-        name: 'preact-ts',
+        name: 'inferno-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
+  // {
+  //   name: 'alpinejs', // star: wd:93
+  //   color: ansi256(1),
+  // },
+  // {
+  //   name: 'qwik', // star:4.5 wd:0.8
+  //   kolor: ansi256(69),
+  // },
   {
-    name: 'vanilla',
-    color: lightYellow,
+    name: 'vanilla', // star:0 wd:0
+    kolor: ansi256(230),
     variants: [
       {
         name: 'vanilla-js',
         display: 'JavaScript',
-        color: yellow,
+        kolor: ansi256(226),
       },
       {
         name: 'vanilla-ts',
         display: 'TypeScript',
-        color: blue,
+        kolor: ansi256(25),
       },
     ],
   },
@@ -224,7 +240,7 @@ async function init() {
               : reset('Framework:'),
           initial: 0,
           choices: Boilerplates.map((framework) => {
-            const frameworkColor = framework.color
+            const frameworkColor = framework.kolor
             return {
               title: frameworkColor(framework.name),
               value: framework,
@@ -238,7 +254,7 @@ async function init() {
           // @ts-ignore
           choices: (framework) =>
             framework.variants.map((variant) => {
-              const variantColor = variant.color
+              const variantColor = variant.kolor
               return {
                 title: variantColor(variant.name),
                 value: variant.name,
@@ -271,7 +287,7 @@ async function init() {
   // determine template
   template = variant || framework || template
 
-  console.log(`\nScaffolding project in ${root}...`)
+  console.log(`\nGenerating project in ${root}...`)
 
   // template boilerplate
   const templateDir = path.resolve(fileURLToPath(import.meta.url), '..', `template-${template}`)
@@ -286,6 +302,7 @@ async function init() {
     now: new Date().format('yyyy.MM.dd'),
     //@ts-ignore
     nowYear: new Date().format('yyyy'),
+    framework: (framework.name || '').replace(/\S/, (str) => str.toUpperCase()),
   }
 
   const write = (file, content) => {
diff --git a/__tests__/cli.spec.ts b/index.spec.ts
similarity index 95%
rename from __tests__/cli.spec.ts
rename to index.spec.ts
index aaa0f9d..465cc0a 100644
--- a/__tests__/cli.spec.ts
+++ b/index.spec.ts
@@ -77,7 +77,7 @@ test('successfully scaffolds a project based on vue starter template', () => {
   const generatedFiles = readdirSync(genPath).sort()
 
   // Assertions
-  expect(stdout).toContain(`Scaffolding project in ${genPath}`)
+  expect(stdout).toContain(`Generating project in ${genPath}`)
   expect(templateFiles).toEqual(generatedFiles)
 })
 
@@ -88,6 +88,6 @@ test('works with the -t alias', () => {
   const generatedFiles = readdirSync(genPath).sort()
 
   // Assertions
-  expect(stdout).toContain(`Scaffolding project in ${genPath}`)
+  expect(stdout).toContain(`Generating project in ${genPath}`)
   expect(templateFiles).toEqual(generatedFiles)
 })
diff --git a/mustache/CHANGELOG.md.mustache b/mustache/CHANGELOG.md.mustache
index 2005c0b..3bb4059 100644
--- a/mustache/CHANGELOG.md.mustache
+++ b/mustache/CHANGELOG.md.mustache
@@ -1,15 +1,15 @@
 # CHANGELOG
 
 ```txt
-Summary:
-  1. this document follow SemVer2.0
-  2. use a PATCH for release version, also includes beta\alpha\rc
+Summary
+  1. document grouping follow 'SemVer2.0' protocol
+  2. use 'PATCH' as a minimum granularity
   3. use concise descriptions
-  4. type: feat\fix\update\perf\remove\other
-  5. version stamp follow the yyyy.MM.dd format
+  4. type: feat \ fix \ update \ perf \ remove \ docs \ chore
+  5. version timestamp follow the yyyy.MM.dd format
 ```
 
 ## 0.0.0 [{{ now }}]
 
 - feat: initial
-- feat: generator by create-chrome-ext
+- feat: generator by ![create-chrome-ext](https://www.npmjs.com/package/create-chrome-ext)
diff --git a/mustache/README.md.mustache b/mustache/README.md.mustache
index 3e2b33c..77ce8d5 100755
--- a/mustache/README.md.mustache
+++ b/mustache/README.md.mustache
@@ -1,26 +1,44 @@
 # {{ name }}
 
-## Installing and Running
+> a chrome extension tools built with Vite + {{ framework }}, and Manifest v3
 
-### Procedures
+## Installing
 
-1. Check if your [Node.js](https://nodejs.org/) version is >= **14**.
-2. Clone this repository.
-3. Change the package's `your name`, `description`, and `repository` fields in `package.json`.
-4. Change the name of your extension on `src/manifest.js`.
-5. Run `pnpm install` to install the dependencies.
-6. Run `pnpm build`
+1. Check if your `Node.js` version is >= **14**.
+2. Change or configurate the name of your extension on `src/manifest`.
+3. Run `npm install` to install the dependencies.
+
+## Developing
+
+run the command
+
+```shell
+$ cd {{ name }}
+
+$ npm run dev
+```
+
+### Chrome Extension Developer Mode
+
+1. set your Chrome browser 'Developer mode' up
+2. click 'Load unpacked', and select `{{name}}/build` folder
+
+### Nomal FrontEnd Developer Mode
+
+1. access `http://localhost:3000/`
+2. when debugging popup page, open `/popup.html`
+3. when debugging options page, open `/options.html`
 
 ## Packing
 
 After the development of your extension run the command
 
 ```shell
-$ pnpm build
+$ npm build
 ```
 
 Now, the content of `build` folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the [official guide](https://developer.chrome.com/webstore/publish) to more infos about publishing.
 
 ---
 
-Power by create-chrome-ext | [Github](https://github.com/guocaoyi/create-chrome-ext)
+Generated by [create-chrome-ext](https://github.com/guocaoyi/create-chrome-ext)
diff --git a/package.json b/package.json
index 22fb771..ac8874d 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "create-chrome-ext",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
-  "description": "Scaffolding Your First Chrome Extension",
+  "description": "Generating your chrome extension, multiple boilerplates supported!",
   "author": "yalda",
   "license": "MIT",
   "main": "index.js",
@@ -27,18 +27,18 @@
   },
   "keywords": [
     "chrome",
-    "crx",
-    "extension",
     "chrome-extension",
-    "creater",
-    "create-crx",
-    "create-chrome-extension",
+    "template",
+    "boilerplate",
+    "create-chrome-ext",
     "react",
     "vue",
     "svelte",
-    "solidjs",
+    "preact",
+    "solid",
     "lit",
-    "preact"
+    "qwik",
+    "vanilla"
   ],
   "bugs": {
     "url": "https://github.com/guocaoyi/create-chrome-ext/issues"
@@ -50,11 +50,9 @@
     "mustache": "^4.2.0",
     "prompts": "^2.4.2"
   },
-  "devDependencies": {
-    "@types/node": "14.18.18",
-    "prettier": "2.7.1"
-  },
   "optionalDependencies": {
+    "@types/node": "14.18.18",
+    "prettier": "^2.7.1",
     "svelte": "^3.44.0",
     "prettier-plugin-svelte": "^2.7.0"
   }
diff --git a/template-inferno-js/options.html b/template-inferno-js/options.html
new file mode 100644
index 0000000..6034079
--- /dev/null
+++ b/template-inferno-js/options.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Inferno + JS + Vite App - Options</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-inferno-js/package.json b/template-inferno-js/package.json
new file mode 100644
index 0000000..15fbc3a
--- /dev/null
+++ b/template-inferno-js/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "chrome-extension-inferno-js",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "inferno",
+    "infernojs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "inferno": "^8.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.x",
+    "@babel/parser": "7.x",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "vite-plugin-inferno": "0.0.0",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/template-inferno-js/popup.html b/template-inferno-js/popup.html
new file mode 100644
index 0000000..d55009b
--- /dev/null
+++ b/template-inferno-js/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Inferno + JS + Vite App - Popup</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-inferno-js/public/icons/logo.ico b/template-inferno-js/public/icons/logo.ico
new file mode 100644
index 0000000..3efc42b
Binary files /dev/null and b/template-inferno-js/public/icons/logo.ico differ
diff --git a/template-inferno-js/public/icons/logo.svg b/template-inferno-js/public/icons/logo.svg
new file mode 100644
index 0000000..39f0a3b
--- /dev/null
+++ b/template-inferno-js/public/icons/logo.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657119751192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2292" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 0C228.266667 0 0 228.266667 0 512s228.266667 512 512 512 512-228.266667 512-512S795.733333 0 512 0z m224 727.466667c0 23.466667-17.066667 40.533333-40.533333 40.533333H328.533333c-21.333333 0-40.533333-19.2-40.533333-40.533333V296.533333c0-23.466667 17.066667-40.533333 40.533333-40.533333h366.933334c21.333333 0 40.533333 19.2 40.533333 40.533333v430.933334z" fill="#d81e06" p-id="2293"></path><path d="M473.6 727.466667h221.866667V411.733333H473.6v315.733334zM328.533333 727.466667h106.666667V411.733333h-106.666667v315.733334zM328.533333 296.533333v74.666667h369.066667V298.666667H328.533333z" fill="#d81e06" p-id="2294"></path></svg>
\ No newline at end of file
diff --git a/template-inferno-js/public/img/logo-128.png b/template-inferno-js/public/img/logo-128.png
new file mode 100644
index 0000000..831e55f
Binary files /dev/null and b/template-inferno-js/public/img/logo-128.png differ
diff --git a/template-inferno-js/public/img/logo-16.png b/template-inferno-js/public/img/logo-16.png
new file mode 100644
index 0000000..19e5fdc
Binary files /dev/null and b/template-inferno-js/public/img/logo-16.png differ
diff --git a/template-inferno-js/public/img/logo-34.png b/template-inferno-js/public/img/logo-34.png
new file mode 100644
index 0000000..cfff7cd
Binary files /dev/null and b/template-inferno-js/public/img/logo-34.png differ
diff --git a/template-inferno-js/public/img/logo-48.png b/template-inferno-js/public/img/logo-48.png
new file mode 100644
index 0000000..3afe570
Binary files /dev/null and b/template-inferno-js/public/img/logo-48.png differ
diff --git a/template-inferno-js/src/assets/inferno.svg b/template-inferno-js/src/assets/inferno.svg
new file mode 100644
index 0000000..daaadfb
--- /dev/null
+++ b/template-inferno-js/src/assets/inferno.svg
@@ -0,0 +1 @@
+<svg class="inferno-logo" version="1.0" viewBox="0 0 320 320" width="80" height="80" preserveAspectRatio="xMidYMid meet" __source="[object Object]"><g fill="#494949" stroke="none" __source="[object Object]"><path fill="#FF3232" d="m144.9 258.5c-43.4-6.1-78.3-46.3-79.2-90-0.7-25.3 8.3-51.7 27-69.1-2 10-8.4 22.4-6.5 34.1 0 14.4 13.7 28.5 28.5 24.6 13.3-3.2 18.3-18.8 14.7-30.8-3.6-16.3-12.1-31.8-9.6-49 2.4-32.4 26.9-58 53.9-73.3 5.5-4 3.6-0.7 1.1 3.2-9.2 14.9-10.5 34-2.6 49.7 11.5 27 34 50.4 35.3 81 0.3 6.3-1.9 22.4 7.3 12 14.6-13.6 13.5-36.2 6.9-53.5-1.8-9.7 9.9 6.6 12.8 9.4 25.3 31.7 26.7 79.9 2.7 112.8-20.1 29.2-57.2 44.9-92.1 38.9z" __source="[object Object]"></path><path d="M139.3 315.4C82.4 307.7 34.8 268.1 16.4 213.1 10.7 196 9.1 185.5 9 165.5c0-12.5 0.4-19.6 1.8-27 11-59.3 54.6-106 112.4-120.6 6.3-1.6 12-2.9 12.8-2.9 2.5 0 1.5 2.1-3.5 7.6-10.7 11.7-19.3 27.7-22.8 42.3l-1.7 7.4-7 4.8C77.3 93 61.3 117.3 56 145.1c-1.9 9.8-2.1 29-0.5 38.1 7.9 43.8 41.7 78.1 85 86.3 16.8 3.2 38.6 1.5 54.3-4.1 31.8-11.4 56-36.3 66-67.9 3.7-11.8 4.8-19.2 4.8-32.3 0-24.5-7-45.2-21.8-64.9-12.9-17.1-28.6-27.9-54.5-37.5-3.3-1.2-7.3-9.7-9.4-19.8-1.6-7.8-0.9-15.2 2.1-22.7 1.5-3.7 2.1-4.2 4.8-4.2 4.9 0 20.8 4.6 31.5 9 45.6 19 79.3 59.9 89.9 109 3.3 15.1 3.7 43.1 0.9 58-14.9 80.2-89.5 134.4-169.9 123.5z" fill="#494949" __source="[object Object]"></path></g></svg>
\ No newline at end of file
diff --git a/template-inferno-js/src/assets/logo.png b/template-inferno-js/src/assets/logo.png
new file mode 100644
index 0000000..be58bff
Binary files /dev/null and b/template-inferno-js/src/assets/logo.png differ
diff --git a/template-inferno-js/src/background/index.js b/template-inferno-js/src/background/index.js
new file mode 100644
index 0000000..95a1239
--- /dev/null
+++ b/template-inferno-js/src/background/index.js
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-inferno-js background script')
+
+export {}
diff --git a/template-inferno-js/src/content/index.js b/template-inferno-js/src/content/index.js
new file mode 100644
index 0000000..593374c
--- /dev/null
+++ b/template-inferno-js/src/content/index.js
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-inferno-js content script')
+
+export {}
diff --git a/template-inferno-js/src/manifest.js b/template-inferno-js/src/manifest.js
new file mode 100644
index 0000000..e41ff31
--- /dev/null
+++ b/template-inferno-js/src/manifest.js
@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: '',
+  version: '0.0.0',
+  manifest_version: 3,
+  icons: {
+    16: 'img/logo-16.png',
+    32: 'img/logo-34.png',
+    48: 'img/logo-48.png',
+    128: 'img/logo-128.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
+  options_page: 'options.html',
+  background: {
+    service_worker: 'src/background/index.js',
+    type: 'module',
+  },
+  content_scripts: [
+    {
+      matches: ['http://*/*', 'https://*/*'],
+      js: ['src/content/index.js'],
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
+      matches: [],
+    },
+  ],
+  permissions: [],
+})
diff --git a/template-inferno-js/src/options/Options.css b/template-inferno-js/src/options/Options.css
new file mode 100644
index 0000000..da8094d
--- /dev/null
+++ b/template-inferno-js/src/options/Options.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #d81e06;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-inferno-js/src/options/Options.jsx b/template-inferno-js/src/options/Options.jsx
new file mode 100644
index 0000000..42b1239
--- /dev/null
+++ b/template-inferno-js/src/options/Options.jsx
@@ -0,0 +1,22 @@
+import { Component } from 'inferno'
+import './Options.css'
+
+export class Options extends Component {
+  render() {
+    const crx = 'create-chrome-ext'
+
+    return (
+      <main>
+        <h3>Options Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  }
+}
+
+export default Options
diff --git a/template-inferno-js/src/options/index.css b/template-inferno-js/src/options/index.css
new file mode 100644
index 0000000..8a3e44d
--- /dev/null
+++ b/template-inferno-js/src/options/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-inferno-js/src/options/index.jsx b/template-inferno-js/src/options/index.jsx
new file mode 100644
index 0000000..518629f
--- /dev/null
+++ b/template-inferno-js/src/options/index.jsx
@@ -0,0 +1,5 @@
+import { render } from 'inferno'
+import './index.css'
+import { Options } from './Options'
+
+render(<Options />, document.getElementById('app') ?? document.body)
diff --git a/template-inferno-js/src/popup/Popup.css b/template-inferno-js/src/popup/Popup.css
new file mode 100644
index 0000000..da8094d
--- /dev/null
+++ b/template-inferno-js/src/popup/Popup.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #d81e06;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-inferno-js/src/popup/Popup.jsx b/template-inferno-js/src/popup/Popup.jsx
new file mode 100644
index 0000000..fe6c166
--- /dev/null
+++ b/template-inferno-js/src/popup/Popup.jsx
@@ -0,0 +1,22 @@
+import { Component } from 'inferno'
+import './Popup.css'
+
+export class Popup extends Component {
+  render() {
+    const crx = 'create-chrome-ext'
+
+    return (
+      <main>
+        <h3>Popup Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  }
+}
+
+export default Popup
diff --git a/template-inferno-js/src/popup/index.css b/template-inferno-js/src/popup/index.css
new file mode 100644
index 0000000..8a3e44d
--- /dev/null
+++ b/template-inferno-js/src/popup/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-inferno-js/src/popup/index.jsx b/template-inferno-js/src/popup/index.jsx
new file mode 100644
index 0000000..104418b
--- /dev/null
+++ b/template-inferno-js/src/popup/index.jsx
@@ -0,0 +1,5 @@
+import { render } from 'inferno'
+import './index.css'
+import { Popup } from './Popup'
+
+render(<Popup />, document.getElementById('app') ?? document.body)
diff --git a/template-inferno-js/vite.config.js b/template-inferno-js/vite.config.js
new file mode 100644
index 0000000..b9c748f
--- /dev/null
+++ b/template-inferno-js/vite.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import { crx } from '@crxjs/vite-plugin'
+import inferno from 'vite-plugin-inferno'
+
+import manifest from './src/manifest.js'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'build',
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'assets/chunk-[hash].js',
+        },
+      },
+    },
+
+    plugins: [crx({ manifest }), inferno()],
+  }
+})
diff --git a/template-inferno-ts/options.html b/template-inferno-ts/options.html
new file mode 100644
index 0000000..539e5b0
--- /dev/null
+++ b/template-inferno-ts/options.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Inferno + TS + Vite App - Options</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-inferno-ts/package.json b/template-inferno-ts/package.json
new file mode 100644
index 0000000..da33f7e
--- /dev/null
+++ b/template-inferno-ts/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "chrome-extension-inferno-js",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "inferno",
+    "infernojs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "inferno": "^8.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.x",
+    "@babel/parser": "7.x",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "vite-plugin-inferno": "0.0.0",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/template-inferno-ts/popup.html b/template-inferno-ts/popup.html
new file mode 100644
index 0000000..f5acd90
--- /dev/null
+++ b/template-inferno-ts/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Inferno + TS + Vite App - Popup</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-inferno-ts/public/icons/logo.ico b/template-inferno-ts/public/icons/logo.ico
new file mode 100644
index 0000000..3efc42b
Binary files /dev/null and b/template-inferno-ts/public/icons/logo.ico differ
diff --git a/template-inferno-ts/public/icons/logo.svg b/template-inferno-ts/public/icons/logo.svg
new file mode 100644
index 0000000..39f0a3b
--- /dev/null
+++ b/template-inferno-ts/public/icons/logo.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657119751192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2292" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 0C228.266667 0 0 228.266667 0 512s228.266667 512 512 512 512-228.266667 512-512S795.733333 0 512 0z m224 727.466667c0 23.466667-17.066667 40.533333-40.533333 40.533333H328.533333c-21.333333 0-40.533333-19.2-40.533333-40.533333V296.533333c0-23.466667 17.066667-40.533333 40.533333-40.533333h366.933334c21.333333 0 40.533333 19.2 40.533333 40.533333v430.933334z" fill="#d81e06" p-id="2293"></path><path d="M473.6 727.466667h221.866667V411.733333H473.6v315.733334zM328.533333 727.466667h106.666667V411.733333h-106.666667v315.733334zM328.533333 296.533333v74.666667h369.066667V298.666667H328.533333z" fill="#d81e06" p-id="2294"></path></svg>
\ No newline at end of file
diff --git a/template-inferno-ts/public/img/logo-128.png b/template-inferno-ts/public/img/logo-128.png
new file mode 100644
index 0000000..831e55f
Binary files /dev/null and b/template-inferno-ts/public/img/logo-128.png differ
diff --git a/template-inferno-ts/public/img/logo-16.png b/template-inferno-ts/public/img/logo-16.png
new file mode 100644
index 0000000..19e5fdc
Binary files /dev/null and b/template-inferno-ts/public/img/logo-16.png differ
diff --git a/template-inferno-ts/public/img/logo-34.png b/template-inferno-ts/public/img/logo-34.png
new file mode 100644
index 0000000..cfff7cd
Binary files /dev/null and b/template-inferno-ts/public/img/logo-34.png differ
diff --git a/template-inferno-ts/public/img/logo-48.png b/template-inferno-ts/public/img/logo-48.png
new file mode 100644
index 0000000..3afe570
Binary files /dev/null and b/template-inferno-ts/public/img/logo-48.png differ
diff --git a/template-inferno-ts/src/assets/inferno.svg b/template-inferno-ts/src/assets/inferno.svg
new file mode 100644
index 0000000..daaadfb
--- /dev/null
+++ b/template-inferno-ts/src/assets/inferno.svg
@@ -0,0 +1 @@
+<svg class="inferno-logo" version="1.0" viewBox="0 0 320 320" width="80" height="80" preserveAspectRatio="xMidYMid meet" __source="[object Object]"><g fill="#494949" stroke="none" __source="[object Object]"><path fill="#FF3232" d="m144.9 258.5c-43.4-6.1-78.3-46.3-79.2-90-0.7-25.3 8.3-51.7 27-69.1-2 10-8.4 22.4-6.5 34.1 0 14.4 13.7 28.5 28.5 24.6 13.3-3.2 18.3-18.8 14.7-30.8-3.6-16.3-12.1-31.8-9.6-49 2.4-32.4 26.9-58 53.9-73.3 5.5-4 3.6-0.7 1.1 3.2-9.2 14.9-10.5 34-2.6 49.7 11.5 27 34 50.4 35.3 81 0.3 6.3-1.9 22.4 7.3 12 14.6-13.6 13.5-36.2 6.9-53.5-1.8-9.7 9.9 6.6 12.8 9.4 25.3 31.7 26.7 79.9 2.7 112.8-20.1 29.2-57.2 44.9-92.1 38.9z" __source="[object Object]"></path><path d="M139.3 315.4C82.4 307.7 34.8 268.1 16.4 213.1 10.7 196 9.1 185.5 9 165.5c0-12.5 0.4-19.6 1.8-27 11-59.3 54.6-106 112.4-120.6 6.3-1.6 12-2.9 12.8-2.9 2.5 0 1.5 2.1-3.5 7.6-10.7 11.7-19.3 27.7-22.8 42.3l-1.7 7.4-7 4.8C77.3 93 61.3 117.3 56 145.1c-1.9 9.8-2.1 29-0.5 38.1 7.9 43.8 41.7 78.1 85 86.3 16.8 3.2 38.6 1.5 54.3-4.1 31.8-11.4 56-36.3 66-67.9 3.7-11.8 4.8-19.2 4.8-32.3 0-24.5-7-45.2-21.8-64.9-12.9-17.1-28.6-27.9-54.5-37.5-3.3-1.2-7.3-9.7-9.4-19.8-1.6-7.8-0.9-15.2 2.1-22.7 1.5-3.7 2.1-4.2 4.8-4.2 4.9 0 20.8 4.6 31.5 9 45.6 19 79.3 59.9 89.9 109 3.3 15.1 3.7 43.1 0.9 58-14.9 80.2-89.5 134.4-169.9 123.5z" fill="#494949" __source="[object Object]"></path></g></svg>
\ No newline at end of file
diff --git a/template-inferno-ts/src/assets/logo.png b/template-inferno-ts/src/assets/logo.png
new file mode 100644
index 0000000..be58bff
Binary files /dev/null and b/template-inferno-ts/src/assets/logo.png differ
diff --git a/template-inferno-ts/src/background/index.ts b/template-inferno-ts/src/background/index.ts
new file mode 100644
index 0000000..3220700
--- /dev/null
+++ b/template-inferno-ts/src/background/index.ts
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-inferno-ts background script')
+
+export {}
diff --git a/template-inferno-ts/src/content/index.ts b/template-inferno-ts/src/content/index.ts
new file mode 100644
index 0000000..0f07f2f
--- /dev/null
+++ b/template-inferno-ts/src/content/index.ts
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-inferno-ts content script')
+
+export {}
diff --git a/template-inferno-ts/src/global.d.ts b/template-inferno-ts/src/global.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/template-inferno-ts/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/template-inferno-ts/src/manifest.ts b/template-inferno-ts/src/manifest.ts
new file mode 100644
index 0000000..3c64c7b
--- /dev/null
+++ b/template-inferno-ts/src/manifest.ts
@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: '',
+  version: '0.0.0',
+  manifest_version: 3,
+  icons: {
+    16: 'img/logo-16.png',
+    32: 'img/logo-34.png',
+    48: 'img/logo-48.png',
+    128: 'img/logo-128.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
+  options_page: 'options.html',
+  background: {
+    service_worker: 'src/background/index.ts',
+    type: 'module',
+  },
+  content_scripts: [
+    {
+      matches: ['http://*/*', 'https://*/*'],
+      js: ['src/content/index.ts'],
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
+      matches: [],
+    },
+  ],
+  permissions: [],
+})
diff --git a/template-inferno-ts/src/options/Options.css b/template-inferno-ts/src/options/Options.css
new file mode 100644
index 0000000..da8094d
--- /dev/null
+++ b/template-inferno-ts/src/options/Options.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #d81e06;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-inferno-ts/src/options/Options.tsx b/template-inferno-ts/src/options/Options.tsx
new file mode 100644
index 0000000..42b1239
--- /dev/null
+++ b/template-inferno-ts/src/options/Options.tsx
@@ -0,0 +1,22 @@
+import { Component } from 'inferno'
+import './Options.css'
+
+export class Options extends Component {
+  render() {
+    const crx = 'create-chrome-ext'
+
+    return (
+      <main>
+        <h3>Options Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  }
+}
+
+export default Options
diff --git a/template-inferno-ts/src/options/index.css b/template-inferno-ts/src/options/index.css
new file mode 100644
index 0000000..8a3e44d
--- /dev/null
+++ b/template-inferno-ts/src/options/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-inferno-ts/src/options/index.tsx b/template-inferno-ts/src/options/index.tsx
new file mode 100644
index 0000000..b921d6a
--- /dev/null
+++ b/template-inferno-ts/src/options/index.tsx
@@ -0,0 +1,5 @@
+import { render } from 'inferno'
+import './index.css'
+import { Options } from './Options'
+
+render(<Options />, document.getElementById('app')!)
diff --git a/template-inferno-ts/src/popup/Popup.css b/template-inferno-ts/src/popup/Popup.css
new file mode 100644
index 0000000..da8094d
--- /dev/null
+++ b/template-inferno-ts/src/popup/Popup.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #d81e06;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-inferno-ts/src/popup/Popup.tsx b/template-inferno-ts/src/popup/Popup.tsx
new file mode 100644
index 0000000..fe6c166
--- /dev/null
+++ b/template-inferno-ts/src/popup/Popup.tsx
@@ -0,0 +1,22 @@
+import { Component } from 'inferno'
+import './Popup.css'
+
+export class Popup extends Component {
+  render() {
+    const crx = 'create-chrome-ext'
+
+    return (
+      <main>
+        <h3>Popup Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  }
+}
+
+export default Popup
diff --git a/template-inferno-ts/src/popup/index.css b/template-inferno-ts/src/popup/index.css
new file mode 100644
index 0000000..8a3e44d
--- /dev/null
+++ b/template-inferno-ts/src/popup/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-inferno-ts/src/popup/index.tsx b/template-inferno-ts/src/popup/index.tsx
new file mode 100644
index 0000000..73a25cf
--- /dev/null
+++ b/template-inferno-ts/src/popup/index.tsx
@@ -0,0 +1,5 @@
+import { render } from 'inferno'
+import './index.css'
+import { Popup } from './Popup'
+
+render(<Popup />, document.getElementById('app')!)
diff --git a/template-inferno-ts/tsconfig.json b/template-inferno-ts/tsconfig.json
new file mode 100644
index 0000000..0a24dec
--- /dev/null
+++ b/template-inferno-ts/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/template-inferno-ts/tsconfig.node.json b/template-inferno-ts/tsconfig.node.json
new file mode 100644
index 0000000..65dbdb9
--- /dev/null
+++ b/template-inferno-ts/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/template-inferno-ts/vite.config.ts b/template-inferno-ts/vite.config.ts
new file mode 100644
index 0000000..4383e45
--- /dev/null
+++ b/template-inferno-ts/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import { crx } from '@crxjs/vite-plugin'
+import inferno from 'vite-plugin-inferno'
+
+import manifest from './src/manifest'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'build',
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'assets/chunk-[hash].js',
+        },
+      },
+    },
+
+    plugins: [crx({ manifest }), inferno()],
+  }
+})
diff --git a/template-lit-js/options.html b/template-lit-js/options.html
index 3bbd8af..f58eac7 100644
--- a/template-lit-js/options.html
+++ b/template-lit-js/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Lit + JS + Vite App - Options</title>
     <link rel="stylesheet" href="./src/index.css" />
diff --git a/template-lit-js/package.json b/template-lit-js/package.json
index 84010d2..df13e4d 100644
--- a/template-lit-js/package.json
+++ b/template-lit-js/package.json
@@ -1,13 +1,20 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-lit-js",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
-  "files": [
-    "dist"
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "lit",
+    "lit-element",
+    "vite",
+    "create-chrome-ext"
   ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -18,7 +25,7 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-lit-js/popup.html b/template-lit-js/popup.html
index 685d2c3..b4915ce 100644
--- a/template-lit-js/popup.html
+++ b/template-lit-js/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Lit + JS + Vite App - Popup</title>
     <link rel="stylesheet" href="./src/index.css" />
diff --git a/template-lit-js/src/manifest.js b/template-lit-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-lit-js/src/manifest.js
+++ b/template-lit-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-lit-ts/options.html b/template-lit-ts/options.html
index 288af96..5ac72e0 100644
--- a/template-lit-ts/options.html
+++ b/template-lit-ts/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Lit + TS + Vite App - Options</title>
     <link rel="stylesheet" href="./src/index.css" />
diff --git a/template-lit-ts/package.json b/template-lit-ts/package.json
index 9bb2342..6049841 100644
--- a/template-lit-ts/package.json
+++ b/template-lit-ts/package.json
@@ -1,14 +1,20 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-lit-ts",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
-  "files": [
-    "dist",
-    "types"
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "lit",
+    "lit-element",
+    "vite",
+    "create-chrome-ext"
   ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -19,7 +25,7 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^2.9.13"
   }
diff --git a/template-lit-ts/popup.html b/template-lit-ts/popup.html
index 0a6793b..5f00fe3 100644
--- a/template-lit-ts/popup.html
+++ b/template-lit-ts/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Lit + TS + Vite App - Popup</title>
     <link rel="stylesheet" href="./src/index.css" />
diff --git a/template-lit-ts/src/manifest.ts b/template-lit-ts/src/manifest.ts
index 2df17ce..3c64c7b 100644
--- a/template-lit-ts/src/manifest.ts
+++ b/template-lit-ts/src/manifest.ts
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-preact-js/options.html b/template-preact-js/options.html
index 256106b..4dbf005 100644
--- a/template-preact-js/options.html
+++ b/template-preact-js/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Preact + JS + Vite App - Options</title>
   </head>
diff --git a/template-preact-js/package.json b/template-preact-js/package.json
index 2019a7e..cfac05f 100644
--- a/template-preact-js/package.json
+++ b/template-preact-js/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-preact-js",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "preact",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -17,7 +26,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@preact/preset-vite": "^2.3.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-preact-js/src/manifest.js b/template-preact-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-preact-js/src/manifest.js
+++ b/template-preact-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-preact-ts/options.html b/template-preact-ts/options.html
index 1bef303..7e85206 100644
--- a/template-preact-ts/options.html
+++ b/template-preact-ts/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Preact + TS + Vite App - Options</title>
   </head>
diff --git a/template-preact-ts/package.json b/template-preact-ts/package.json
index c46e0ee..d1ccbe1 100644
--- a/template-preact-ts/package.json
+++ b/template-preact-ts/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-preact-ts",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "preact",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -17,8 +26,8 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@preact/preset-vite": "^2.3.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.6.4",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-preact-ts/src/manifest.ts b/template-preact-ts/src/manifest.ts
index e360f47..6e50228 100644
--- a/template-preact-ts/src/manifest.ts
+++ b/template-preact-ts/src/manifest.ts
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-qwik-js/options.html b/template-qwik-js/options.html
new file mode 100644
index 0000000..0c02c3e
--- /dev/null
+++ b/template-qwik-js/options.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Qwik + JS + Vite App - Options</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-qwik-js/package.json b/template-qwik-js/package.json
new file mode 100644
index 0000000..9402810
--- /dev/null
+++ b/template-qwik-js/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "chrome-extension-qwik-js",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "qwik",
+    "build.io",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "fmt": "prettier --write '**/*.{jsx,js,json,css,scss,md}'"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "^0.0.34",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "@types/node": "^17.0.17",
+    "prettier": "^2.7.1",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/template-qwik-js/popup.html b/template-qwik-js/popup.html
new file mode 100644
index 0000000..2db7c13
--- /dev/null
+++ b/template-qwik-js/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Qwik + JS + Vite App - Popup</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-qwik-js/public/icons/logo.ico b/template-qwik-js/public/icons/logo.ico
new file mode 100644
index 0000000..29fcda0
Binary files /dev/null and b/template-qwik-js/public/icons/logo.ico differ
diff --git a/template-qwik-js/public/icons/logo.svg b/template-qwik-js/public/icons/logo.svg
new file mode 100644
index 0000000..e4101ab
--- /dev/null
+++ b/template-qwik-js/public/icons/logo.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657014524772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2267" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 0C228.266667 0 0 228.266667 0 512s228.266667 512 512 512 512-228.266667 512-512S795.733333 0 512 0z m224 727.466667c0 23.466667-17.066667 40.533333-40.533333 40.533333H328.533333c-21.333333 0-40.533333-19.2-40.533333-40.533333V296.533333c0-23.466667 17.066667-40.533333 40.533333-40.533333h366.933334c21.333333 0 40.533333 19.2 40.533333 40.533333v430.933334z" fill="#5f87ff" p-id="2268"></path><path d="M473.6 727.466667h221.866667V411.733333H473.6v315.733334zM328.533333 727.466667h106.666667V411.733333h-106.666667v315.733334zM328.533333 296.533333v74.666667h369.066667V298.666667H328.533333z" fill="#5f87ff" p-id="2269"></path></svg>
\ No newline at end of file
diff --git a/template-qwik-js/public/img/logo-128.png b/template-qwik-js/public/img/logo-128.png
new file mode 100644
index 0000000..188fbc2
Binary files /dev/null and b/template-qwik-js/public/img/logo-128.png differ
diff --git a/template-qwik-js/public/img/logo-16.png b/template-qwik-js/public/img/logo-16.png
new file mode 100644
index 0000000..c8fc861
Binary files /dev/null and b/template-qwik-js/public/img/logo-16.png differ
diff --git a/template-qwik-js/public/img/logo-34.png b/template-qwik-js/public/img/logo-34.png
new file mode 100644
index 0000000..2bf45ed
Binary files /dev/null and b/template-qwik-js/public/img/logo-34.png differ
diff --git a/template-qwik-js/public/img/logo-48.png b/template-qwik-js/public/img/logo-48.png
new file mode 100644
index 0000000..78b6a92
Binary files /dev/null and b/template-qwik-js/public/img/logo-48.png differ
diff --git a/template-qwik-js/src/assets/logo.png b/template-qwik-js/src/assets/logo.png
new file mode 100644
index 0000000..5d28df6
Binary files /dev/null and b/template-qwik-js/src/assets/logo.png differ
diff --git a/template-qwik-js/src/background/index.js b/template-qwik-js/src/background/index.js
new file mode 100644
index 0000000..09c91f8
--- /dev/null
+++ b/template-qwik-js/src/background/index.js
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-qwik-ts background script')
+
+export {}
diff --git a/template-qwik-js/src/content/index.js b/template-qwik-js/src/content/index.js
new file mode 100644
index 0000000..eaa6a2f
--- /dev/null
+++ b/template-qwik-js/src/content/index.js
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-qwik-ts content script')
+
+export {}
diff --git a/template-qwik-js/src/manifest.js b/template-qwik-js/src/manifest.js
new file mode 100644
index 0000000..e41ff31
--- /dev/null
+++ b/template-qwik-js/src/manifest.js
@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: '',
+  version: '0.0.0',
+  manifest_version: 3,
+  icons: {
+    16: 'img/logo-16.png',
+    32: 'img/logo-34.png',
+    48: 'img/logo-48.png',
+    128: 'img/logo-128.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
+  options_page: 'options.html',
+  background: {
+    service_worker: 'src/background/index.js',
+    type: 'module',
+  },
+  content_scripts: [
+    {
+      matches: ['http://*/*', 'https://*/*'],
+      js: ['src/content/index.js'],
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
+      matches: [],
+    },
+  ],
+  permissions: [],
+})
diff --git a/template-qwik-js/src/options/Options.css b/template-qwik-js/src/options/Options.css
new file mode 100644
index 0000000..0ec43d5
--- /dev/null
+++ b/template-qwik-js/src/options/Options.css
@@ -0,0 +1,48 @@
+#root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #673ab8;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-qwik-js/src/options/Options.jsx b/template-qwik-js/src/options/Options.jsx
new file mode 100644
index 0000000..4f02e4e
--- /dev/null
+++ b/template-qwik-js/src/options/Options.jsx
@@ -0,0 +1,25 @@
+import { component$, useStore } from '@builder.io/qwik'
+import './Options.css'
+
+export const Options = component$(
+  (props) => {
+    const crx = useStore('create-chrome-ext')
+
+    return (
+      <main>
+        <h3>Options Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  },
+  {
+    name: 'Options',
+  },
+)
+
+export default Options
diff --git a/template-qwik-js/src/options/index.css b/template-qwik-js/src/options/index.css
new file mode 100644
index 0000000..4748300
--- /dev/null
+++ b/template-qwik-js/src/options/index.css
@@ -0,0 +1,26 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
diff --git a/template-qwik-js/src/options/index.jsx b/template-qwik-js/src/options/index.jsx
new file mode 100644
index 0000000..1164705
--- /dev/null
+++ b/template-qwik-js/src/options/index.jsx
@@ -0,0 +1,6 @@
+import { render, jsx } from '@builder.io/qwik'
+
+import { Options } from './Options'
+import './index.css'
+
+render(document.getElementById('app') ?? document.body, jsx(Options, {}))
diff --git a/template-qwik-js/src/popup/Popup.css b/template-qwik-js/src/popup/Popup.css
new file mode 100644
index 0000000..c5cfc48
--- /dev/null
+++ b/template-qwik-js/src/popup/Popup.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #673ab8;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-qwik-js/src/popup/Popup.jsx b/template-qwik-js/src/popup/Popup.jsx
new file mode 100644
index 0000000..85d478e
--- /dev/null
+++ b/template-qwik-js/src/popup/Popup.jsx
@@ -0,0 +1,25 @@
+import { component$, useStore } from '@builder.io/qwik'
+import './Popup.css'
+
+export const Popup = component$(
+  (props) => {
+    const crx = useStore('create-chrome-ext')
+
+    return (
+      <main>
+        <h3>Popup Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  },
+  {
+    name: 'Popup',
+  },
+)
+
+export default Popup
diff --git a/template-qwik-js/src/popup/index.css b/template-qwik-js/src/popup/index.css
new file mode 100644
index 0000000..8a3e44d
--- /dev/null
+++ b/template-qwik-js/src/popup/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-qwik-js/src/popup/index.jsx b/template-qwik-js/src/popup/index.jsx
new file mode 100644
index 0000000..bbff301
--- /dev/null
+++ b/template-qwik-js/src/popup/index.jsx
@@ -0,0 +1,6 @@
+import { render, jsx } from '@builder.io/qwik'
+
+import { Popup } from './Popup'
+import './index.css'
+
+render(document.getElementById('#app') ?? document.body, jsx(Popup, {}))
diff --git a/template-qwik-js/vite.config.js b/template-qwik-js/vite.config.js
new file mode 100644
index 0000000..76065e7
--- /dev/null
+++ b/template-qwik-js/vite.config.js
@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+import { dirname, resolve } from 'path'
+import { writeFile, mkdir } from 'fs/promises'
+import { crx } from '@crxjs/vite-plugin'
+
+import manifest from './src/manifest.js'
+
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'build',
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'assets/chunk-[hash].js',
+        },
+      },
+    },
+    plugins: [
+      crx({ manifest }),
+      // qwikVite({
+      //   // On `clientonly` mode, lets disable SSR in development, so app is fully client bootstrapped
+      //   ssr: mode === 'clientonly' ? false : undefined,
+      //   srcDir: resolve('./src'),
+      //   entryStrategy: {
+      //     type: 'single',
+      //   },
+      //   // symbolsOutput: (data) => {
+      //   //   outputJSON('./server/q-symbols.json', data)
+      //   // },
+      // }),
+    ],
+  }
+})
+
+async function outputJSON(path, data) {
+  await mkdir(dirname(path), { recursive: true })
+  await writeFile(path, JSON.stringify(data, null, 2))
+}
diff --git a/template-qwik-ts/options.html b/template-qwik-ts/options.html
new file mode 100644
index 0000000..895388f
--- /dev/null
+++ b/template-qwik-ts/options.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Qwik + TS + Vite App - Options</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-qwik-ts/package.json b/template-qwik-ts/package.json
new file mode 100644
index 0000000..0ee9958
--- /dev/null
+++ b/template-qwik-ts/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "chrome-extension-qwik-ts",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "qwik",
+    "build.io",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build.client": "vite build --outDir server/public",
+    "preview": "vite preview",
+    "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "^0.0.34",
+    "@crxjs/vite-plugin": "^1.0.12",
+    "@types/node": "17.0.17",
+    "express": "4.17.2",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/template-qwik-ts/popup.html b/template-qwik-ts/popup.html
new file mode 100644
index 0000000..f8be340
--- /dev/null
+++ b/template-qwik-ts/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Qwik + TS + Vite App - Popup</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-qwik-ts/public/icons/logo.ico b/template-qwik-ts/public/icons/logo.ico
new file mode 100644
index 0000000..29fcda0
Binary files /dev/null and b/template-qwik-ts/public/icons/logo.ico differ
diff --git a/template-qwik-ts/public/icons/logo.svg b/template-qwik-ts/public/icons/logo.svg
new file mode 100644
index 0000000..e4101ab
--- /dev/null
+++ b/template-qwik-ts/public/icons/logo.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657014524772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2267" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 0C228.266667 0 0 228.266667 0 512s228.266667 512 512 512 512-228.266667 512-512S795.733333 0 512 0z m224 727.466667c0 23.466667-17.066667 40.533333-40.533333 40.533333H328.533333c-21.333333 0-40.533333-19.2-40.533333-40.533333V296.533333c0-23.466667 17.066667-40.533333 40.533333-40.533333h366.933334c21.333333 0 40.533333 19.2 40.533333 40.533333v430.933334z" fill="#5f87ff" p-id="2268"></path><path d="M473.6 727.466667h221.866667V411.733333H473.6v315.733334zM328.533333 727.466667h106.666667V411.733333h-106.666667v315.733334zM328.533333 296.533333v74.666667h369.066667V298.666667H328.533333z" fill="#5f87ff" p-id="2269"></path></svg>
\ No newline at end of file
diff --git a/template-qwik-ts/public/img/logo-128.png b/template-qwik-ts/public/img/logo-128.png
new file mode 100644
index 0000000..188fbc2
Binary files /dev/null and b/template-qwik-ts/public/img/logo-128.png differ
diff --git a/template-qwik-ts/public/img/logo-16.png b/template-qwik-ts/public/img/logo-16.png
new file mode 100644
index 0000000..c8fc861
Binary files /dev/null and b/template-qwik-ts/public/img/logo-16.png differ
diff --git a/template-qwik-ts/public/img/logo-34.png b/template-qwik-ts/public/img/logo-34.png
new file mode 100644
index 0000000..2bf45ed
Binary files /dev/null and b/template-qwik-ts/public/img/logo-34.png differ
diff --git a/template-qwik-ts/public/img/logo-48.png b/template-qwik-ts/public/img/logo-48.png
new file mode 100644
index 0000000..78b6a92
Binary files /dev/null and b/template-qwik-ts/public/img/logo-48.png differ
diff --git a/template-qwik-ts/src/assets/logo.png b/template-qwik-ts/src/assets/logo.png
new file mode 100644
index 0000000..5d28df6
Binary files /dev/null and b/template-qwik-ts/src/assets/logo.png differ
diff --git a/template-qwik-ts/src/background/index.ts b/template-qwik-ts/src/background/index.ts
new file mode 100644
index 0000000..09c91f8
--- /dev/null
+++ b/template-qwik-ts/src/background/index.ts
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-qwik-ts background script')
+
+export {}
diff --git a/template-qwik-ts/src/content/index.ts b/template-qwik-ts/src/content/index.ts
new file mode 100644
index 0000000..eaa6a2f
--- /dev/null
+++ b/template-qwik-ts/src/content/index.ts
@@ -0,0 +1,3 @@
+console.info('chrome-ext template-qwik-ts content script')
+
+export {}
diff --git a/template-qwik-ts/src/global.d.ts b/template-qwik-ts/src/global.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/template-qwik-ts/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/template-qwik-ts/src/manifest.ts b/template-qwik-ts/src/manifest.ts
new file mode 100644
index 0000000..6e50228
--- /dev/null
+++ b/template-qwik-ts/src/manifest.ts
@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: '',
+  version: '0.0.0',
+  manifest_version: 3,
+  icons: {
+    '16': 'img/logo-16.png',
+    '32': 'img/logo-34.png',
+    '48': 'img/logo-48.png',
+    '128': 'img/logo-128.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
+  options_page: 'options.html',
+  background: {
+    service_worker: 'src/background/index.ts',
+    type: 'module',
+  },
+  content_scripts: [
+    {
+      matches: ['http://*/*', 'https://*/*'],
+      js: ['src/content/index.ts'],
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
+      matches: [],
+    },
+  ],
+  permissions: [],
+})
diff --git a/template-qwik-ts/src/options/Options.css b/template-qwik-ts/src/options/Options.css
new file mode 100644
index 0000000..0ec43d5
--- /dev/null
+++ b/template-qwik-ts/src/options/Options.css
@@ -0,0 +1,48 @@
+#root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #673ab8;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-qwik-ts/src/options/Options.tsx b/template-qwik-ts/src/options/Options.tsx
new file mode 100644
index 0000000..0a3a211
--- /dev/null
+++ b/template-qwik-ts/src/options/Options.tsx
@@ -0,0 +1,24 @@
+import { component$, Host } from '@builder.io/qwik'
+import './Options.css'
+
+interface Props {}
+
+export const Options = component$((props: Props) => {
+  const crx = 'create-chrome-ext'
+
+  return (
+    <Host>
+      <main>
+        <h3>Options Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    </Host>
+  )
+})
+
+export default Options
diff --git a/template-qwik-ts/src/options/index.css b/template-qwik-ts/src/options/index.css
new file mode 100644
index 0000000..4748300
--- /dev/null
+++ b/template-qwik-ts/src/options/index.css
@@ -0,0 +1,26 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
diff --git a/template-qwik-ts/src/options/index.tsx b/template-qwik-ts/src/options/index.tsx
new file mode 100644
index 0000000..1164705
--- /dev/null
+++ b/template-qwik-ts/src/options/index.tsx
@@ -0,0 +1,6 @@
+import { render, jsx } from '@builder.io/qwik'
+
+import { Options } from './Options'
+import './index.css'
+
+render(document.getElementById('app') ?? document.body, jsx(Options, {}))
diff --git a/template-qwik-ts/src/popup/Popup.css b/template-qwik-ts/src/popup/Popup.css
new file mode 100644
index 0000000..c5cfc48
--- /dev/null
+++ b/template-qwik-ts/src/popup/Popup.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #673ab8;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-qwik-ts/src/popup/Popup.tsx b/template-qwik-ts/src/popup/Popup.tsx
new file mode 100644
index 0000000..6844cac
--- /dev/null
+++ b/template-qwik-ts/src/popup/Popup.tsx
@@ -0,0 +1,24 @@
+import { component$, useStore, Host } from '@builder.io/qwik'
+import './Popup.css'
+
+interface Props {}
+
+export const Popup = component$((props: Props) => {
+  const crx = 'create-chrome-ext'
+
+  return (
+    <Host>
+      <main>
+        <h3>Popup Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    </Host>
+  )
+})
+
+export default Popup
diff --git a/template-qwik-ts/src/popup/index.css b/template-qwik-ts/src/popup/index.css
new file mode 100644
index 0000000..8a3e44d
--- /dev/null
+++ b/template-qwik-ts/src/popup/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-qwik-ts/src/popup/index.tsx b/template-qwik-ts/src/popup/index.tsx
new file mode 100644
index 0000000..f938bf0
--- /dev/null
+++ b/template-qwik-ts/src/popup/index.tsx
@@ -0,0 +1,6 @@
+import { render, jsx } from '@builder.io/qwik'
+
+import { Popup } from './Popup'
+import './index.css'
+
+render(document.getElementById('app') ?? document.body, jsx(Popup, {}))
diff --git a/template-qwik-ts/tsconfig.node.json b/template-qwik-ts/tsconfig.node.json
new file mode 100644
index 0000000..a75fb40
--- /dev/null
+++ b/template-qwik-ts/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts", "src/**/*.ts"]
+}
diff --git a/template-qwik-ts/vite.config.ts b/template-qwik-ts/vite.config.ts
new file mode 100644
index 0000000..de6d8a2
--- /dev/null
+++ b/template-qwik-ts/vite.config.ts
@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+import { dirname, resolve } from 'path'
+import { writeFile, mkdir } from 'fs/promises'
+import { crx } from '@crxjs/vite-plugin'
+
+import manifest from './src/manifest'
+
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'build',
+      rollupOptions: {
+        // input: {
+        //   popup: resolve(__dirname, 'popup.html'),
+        //   options: resolve(__dirname, 'options.html'),
+        // },
+        output: {
+          chunkFileNames: 'assets/chunk-[hash].js',
+        },
+      },
+    },
+    plugins: [
+      crx({ manifest }),
+      // qwikVite({
+      //   srcDir: resolve('./src'),
+      //   entryStrategy: {
+      //     type: 'single',
+      //   },
+      //   // symbolsOutput: (data) => {
+      //   //   outputJSON('./server/q-symbols.json', data)
+      //   // },
+      // }),
+    ],
+  }
+})
+
+async function outputJSON(path: string, data: any) {
+  await mkdir(dirname(path), { recursive: true })
+  await writeFile(path, JSON.stringify(data, null, 2))
+}
diff --git a/template-react-js/options.html b/template-react-js/options.html
index 24739a9..8ec517c 100644
--- a/template-react-js/options.html
+++ b/template-react-js/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + React + JS + Vite App - Options</title>
   </head>
diff --git a/template-react-js/package.json b/template-react-js/package.json
index 8dfcdf8..f710853 100644
--- a/template-react-js/package.json
+++ b/template-react-js/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-react-js",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "react",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -20,7 +29,7 @@
     "@types/react-dom": "^18.0.5",
     "@crxjs/vite-plugin": "^1.0.12",
     "@vitejs/plugin-react": "^1.3.2",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-react-js/src/manifest.js b/template-react-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-react-js/src/manifest.js
+++ b/template-react-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-react-ts/options.html b/template-react-ts/options.html
index d3c73ce..2083993 100644
--- a/template-react-ts/options.html
+++ b/template-react-ts/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + React + TS + Vite App - Options</title>
   </head>
diff --git a/template-react-ts/package.json b/template-react-ts/package.json
index 0ec5590..195f77b 100644
--- a/template-react-ts/package.json
+++ b/template-react-ts/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-react-ts",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "react",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -20,7 +29,7 @@
     "@types/react-dom": "^18.0.5",
     "@crxjs/vite-plugin": "^1.0.12",
     "@vitejs/plugin-react": "^1.3.2",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^2.9.13"
   }
diff --git a/template-react-ts/src/manifest.ts b/template-react-ts/src/manifest.ts
index e360f47..6e50228 100644
--- a/template-react-ts/src/manifest.ts
+++ b/template-react-ts/src/manifest.ts
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-solid-js/package.json b/template-solid-js/package.json
index 4bfac1c..2e59efa 100644
--- a/template-solid-js/package.json
+++ b/template-solid-js/package.json
@@ -1,16 +1,29 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-solod-js",
   "version": "0.0.0",
+  "author": "",
   "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "solid",
+    "solidjs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
-    "start": "vite",
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "preview": "vite preview",
+    "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'"
   },
-  "license": "MIT",
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
+    "prettier": "^2.7.1",
     "vite": "^2.9.9",
     "vite-plugin-solid": "^2.2.6"
   },
diff --git a/template-solid-js/src/manifest.js b/template-solid-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-solid-js/src/manifest.js
+++ b/template-solid-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json
index 10db96a..80d521d 100644
--- a/template-solid-ts/package.json
+++ b/template-solid-ts/package.json
@@ -1,16 +1,29 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-solid-ts",
   "version": "0.0.0",
+  "author": "",
   "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "solid",
+    "solidjs",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
-    "start": "vite",
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "preview": "vite preview",
+    "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'"
   },
-  "license": "MIT",
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
+    "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^2.9.9",
     "vite-plugin-solid": "^2.2.6"
diff --git a/template-solid-ts/src/manifest.tsx b/template-solid-ts/src/manifest.tsx
index 2df17ce..3c64c7b 100644
--- a/template-solid-ts/src/manifest.tsx
+++ b/template-solid-ts/src/manifest.tsx
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-svelte-js/options.html b/template-svelte-js/options.html
index 2cd947e..23a741f 100644
--- a/template-svelte-js/options.html
+++ b/template-svelte-js/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Svelte + JS + Vite App - Options</title>
   </head>
diff --git a/template-svelte-js/package.json b/template-svelte-js/package.json
index 46ce260..3e4fc7e 100755
--- a/template-svelte-js/package.json
+++ b/template-svelte-js/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-svelte-js",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "svelte",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,7 +24,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@sveltejs/vite-plugin-svelte": "1.0.0-next.49",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.44.0",
     "svelte-preprocess": "^4.9.8",
diff --git a/template-svelte-js/src/manifest.js b/template-svelte-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-svelte-js/src/manifest.js
+++ b/template-svelte-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-svelte-ts/options.html b/template-svelte-ts/options.html
index 2e810bf..b01bb55 100644
--- a/template-svelte-ts/options.html
+++ b/template-svelte-ts/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Svelte + TS + Vite App - Options</title>
   </head>
diff --git a/template-svelte-ts/package.json b/template-svelte-ts/package.json
index dd8e331..79d084d 100755
--- a/template-svelte-ts/package.json
+++ b/template-svelte-ts/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-svelte-ts",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "svelte",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,7 +24,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@sveltejs/vite-plugin-svelte": "1.0.0-next.49",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.44.0",
     "svelte-preprocess": "^4.9.8",
diff --git a/template-svelte-ts/src/manifest.ts b/template-svelte-ts/src/manifest.ts
index e360f47..6e50228 100644
--- a/template-svelte-ts/src/manifest.ts
+++ b/template-svelte-ts/src/manifest.ts
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-svelte-ts/tsconfig.json b/template-svelte-ts/tsconfig.json
index 4f6606d..3d0a51a 100644
--- a/template-svelte-ts/tsconfig.json
+++ b/template-svelte-ts/tsconfig.json
@@ -1,22 +1,21 @@
 {
   "compilerOptions": {
-    "target": "es2017",
-    "lib": ["DOM"],
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "module": "esnext",
-    "resolveJsonModule": true,
-    "moduleResolution": "node",
-    "importsNotUsedAsValues": "error",
-    "sourceMap": true,
-    "strict": false,
-    "esModuleInterop": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
     "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "allowJs": true,
-    "checkJs": true,
-    "isolatedModules": true
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/global.d.ts"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/template-vanilla-js/options.html b/template-vanilla-js/options.html
index b18ebb1..51b3926 100644
--- a/template-vanilla-js/options.html
+++ b/template-vanilla-js/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Vanilla + JS + Vite App - Options</title>
   </head>
diff --git a/template-vanilla-js/package.json b/template-vanilla-js/package.json
index a921082..81a9efe 100644
--- a/template-vanilla-js/package.json
+++ b/template-vanilla-js/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-vanilla-js",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "vanilla",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,7 +24,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@vitejs/plugin-react": "^1.3.2",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-vanilla-js/src/manifest.js b/template-vanilla-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-vanilla-js/src/manifest.js
+++ b/template-vanilla-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-vanilla-ts/options.html b/template-vanilla-ts/options.html
index 015f115..9b1fe06 100644
--- a/template-vanilla-ts/options.html
+++ b/template-vanilla-ts/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Vanilla + TS + Vite App - Options</title>
   </head>
diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json
index 8c8ce70..7f5a961 100644
--- a/template-vanilla-ts/package.json
+++ b/template-vanilla-ts/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-vanilla-ts",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "vanilla",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -14,8 +23,8 @@
   "dependencies": {},
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
-    "prettier": "^2.5.1",
-    "typescript": "^4.6.4",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-vanilla-ts/src/manifest.ts b/template-vanilla-ts/src/manifest.ts
index e360f47..6e50228 100644
--- a/template-vanilla-ts/src/manifest.ts
+++ b/template-vanilla-ts/src/manifest.ts
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-vue-js/options.html b/template-vue-js/options.html
index 8cc4247..6868cdd 100644
--- a/template-vue-js/options.html
+++ b/template-vue-js/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Vue + JS + Vite App - Options</title>
   </head>
diff --git a/template-vue-js/package.json b/template-vue-js/package.json
index fca7d2a..500e5f9 100644
--- a/template-vue-js/package.json
+++ b/template-vue-js/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-vue-js",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "vue",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -17,7 +26,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@vitejs/plugin-vue": "^2.3.3",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "vite": "^2.9.13"
   }
 }
diff --git a/template-vue-js/src/manifest.js b/template-vue-js/src/manifest.js
index c18360b..e41ff31 100644
--- a/template-vue-js/src/manifest.js
+++ b/template-vue-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {
diff --git a/template-vue-ts/options.html b/template-vue-ts/options.html
index 12ea39f..192beab 100644
--- a/template-vue-ts/options.html
+++ b/template-vue-ts/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extensioin + Vue + TS + Vite App - Options</title>
   </head>
diff --git a/template-vue-ts/package.json b/template-vue-ts/package.json
index e7d5757..2136c6b 100644
--- a/template-vue-ts/package.json
+++ b/template-vue-ts/package.json
@@ -1,10 +1,19 @@
 {
-  "name": "chrome-ext-starter",
+  "name": "chrome-extension-vue-ts",
   "version": "0.0.0",
-  "private": true,
   "author": "",
   "description": "",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "vue",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -17,8 +26,8 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.12",
     "@vitejs/plugin-vue": "^2.3.3",
-    "prettier": "^2.5.1",
-    "typescript": "^4.6.4",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4",
     "vite": "^2.9.13",
     "vue-tsc": "^0.38.2"
   }
diff --git a/template-vue-ts/src/manifest.ts b/template-vue-ts/src/manifest.ts
index 2df17ce..3c64c7b 100644
--- a/template-vue-ts/src/manifest.ts
+++ b/template-vue-ts/src/manifest.ts
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 
 export default defineManifest({
   name: 'create-chrome-ext',
-  description: 'A chrome extension boilerplate built by create-chrome-ext',
+  description: '',
   version: '0.0.0',
   manifest_version: 3,
   icons: {