diff --git a/CHANGELOG.md b/CHANGELOG.md
index c47d582..194b6b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,11 +11,10 @@ Summary
 
 ## 0.9.0 [xxxx.xx.xx]
 
-- fix: vue framework vite @3 error (issue #51)
 - feat: depen version update, <vite@4.x>
-- feat: support devtool panel
-- doc: update README.md
-- doc: i18n, supprt French \ Deutsch \ Русский \ 日本語 \ Indonesian
+- feat: support devtools \ sidepanel \ newtab override
+- feat: out of box functions, countor \ newtab timer \ events
+- doc: update README.md & i18n (French \ 한국어 \ Indonesian \ Русский \ Deutsch \ 日本語)
 
 ## 0.8.9 [2023.10.09]
 
diff --git a/README.md b/README.md
index 950192c..a56cdd7 100644
--- a/README.md
+++ b/README.md
@@ -9,13 +9,13 @@
 
 > Scaffolding your chrome extension, multiple boilerplates supported!
 
-- 🚀 Lightning Fast HMR(use [Vite4](https://vitejs.dev))
-- 🥡 Out of Box
-- 🌈 Multiple Frontend Framework Supported ([React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com))
+- 🚀 Lightning Fast HMR(use [Vite@latest](https://vitejs.dev))
+- 🌈 Multiple Framework Supported ([React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com))
 - 🥢 Multiple Language Supported ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
-- 🧶 Optimized Builds (Background \ Content \ Popup \ Options \ SidePanel \ DevtoolsPanel)
+- 🥡 Out of Box (Background \ Content \ Popup \ Options \ SidePanel \ DevTools \ NewTab)
+- 🧶 Optimized Builds
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [한국어](./docs/README.ko-KR.md) · [Indonesian](./docs/README.id-ID.md) · [Русский](./docs/README.ja-JP.md) · [Deutsch](./docs/README.de-DE.md) · [日本語](./docs/README.ja-JP.md) (Translation support by ChatGPT)
+[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [한국어](./docs/README.ko-KR.md) · [Indonesian](./docs/README.id-ID.md) · [Русский](./docs/README.ru-RU.md) · [Deutsch](./docs/README.de-DE.md) · [日本語](./docs/README.ja-JP.md) (Translated by ChatGPT)
 
 ## Installing
 
diff --git a/docs/README.de-DE.md b/docs/README.de-DE.md
index cc5c3ac..49494d3 100644
--- a/docs/README.de-DE.md
+++ b/docs/README.de-DE.md
@@ -10,12 +10,12 @@
 > Strukturieren Sie Ihre Chrome-Erweiterung, mit Unterstützung mehrerer Boilerplates!
 
 - 🚀 Blitzschnelle HMR (Verwendung von [Vite4](https://vitejs.dev))
-- 🥡 Sofort einsatzbereit
-- 🌈 Unterstützung mehrerer Frontend-Frameworks ([React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com))
+- 🌈 Unterstützung mehrerer Frameworks ([React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com))
 - 🥢 Unterstützung mehrerer Sprachen ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
-- 🧶 Optimierte Builds (Hintergrund · Inhalt · Popup · Optionen · Seitenleiste · Devtools-Panel)
+- 🥡 Sofort einsatzbereit (Background \ Content \ Popup \ Options \ SidePanel \ DevTools \ NewTab)
+- 🧶 Optimierte Builds
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## Installation
 
diff --git a/docs/README.fr-FR.md b/docs/README.fr-FR.md
index ba3c6fd..f550264 100644
--- a/docs/README.fr-FR.md
+++ b/docs/README.fr-FR.md
@@ -11,11 +11,11 @@
 
 - 🚀 Mise à jour rapide avec HMR (utilisation de [Vite4](https://vitejs.dev))
 - 🥡 Prêt à l'emploi
-- 🌈 Prise en charge de plusieurs frameworks frontend ([React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com))
+- 🌈 Prise en charge de plusieurs frameworks ([React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com))
 - 🥢 Prise en charge de plusieurs langages ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
 - 🧶 Création optimisée
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## Installation
 
diff --git a/docs/README.id-ID.md b/docs/README.id-ID.md
index efccea2..d9dfe5d 100644
--- a/docs/README.id-ID.md
+++ b/docs/README.id-ID.md
@@ -1,6 +1,6 @@
 # Buat Ekstensi Chrome (.crx)
 
-![Pratinjau crx](./docs/crx-preview.png)
+![Pratinjau crx](/docs/img/crx-preview.png)
 [![Status OSCS](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
 [![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
 [![Unduh npm](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
@@ -15,7 +15,7 @@
 - 🥢 Mendukung Berbagai Bahasa ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
 - 🧶 Pembangunan Teroptimasi (Latar Belakang · Konten · Popup · Opsi · Panel Sisi · Panel Devtools)
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## Instalasi
 
@@ -65,6 +65,6 @@ Anda juga dapat membuat proyek dengan perintah baris `crx`, jalankan:
 
 ## Pratinjau
 
-![crx-berjalan](./docs/crx-run.png)
-![crx-pasang](./docs/crx-install.png)
-![crx-bangun](./docs/crx-build.png)
+![crx-berjalan](/docs/img/crx-run.png)
+![crx-pasang](/docs/img/crx-install.png)
+![crx-bangun](/docs/img/crx-build.png)
diff --git a/docs/README.ja-JP.md b/docs/README.ja-JP.md
index 299df97..190e671 100644
--- a/docs/README.ja-JP.md
+++ b/docs/README.ja-JP.md
@@ -15,7 +15,7 @@
 - 🥢 複数の言語をサポート（[JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/)）
 - 🧶 最適化されたビルド
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## インストール
 
diff --git a/docs/README.ko-KR.md b/docs/README.ko-KR.md
index 7285b03..0a8b78d 100644
--- a/docs/README.ko-KR.md
+++ b/docs/README.ko-KR.md
@@ -15,7 +15,7 @@
 - 🥢 다양한 언어 지원 ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
 - 🧶 최적화된 빌드 (백그라운드 · 컨텐츠 · 팝업 · 옵션 · 사이드패널 · 개발도구 패널)
 
-[EN](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## 설치
 
diff --git a/docs/README.ru-RU.md b/docs/README.ru-RU.md
index a37b939..40b8416 100644
--- a/docs/README.ru-RU.md
+++ b/docs/README.ru-RU.md
@@ -15,7 +15,7 @@
 - 🥢 Поддержка нескольких языков ([JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/))
 - 🧶 Оптимизированные сборки (Фон · Контент · Всплывающее окно · Опции · Боковая панель · Панель инструментов разработчика)
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ru-RU.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## Установка
 
diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md
index 5f62cbb..7322d9e 100644
--- a/docs/README.zh-CN.md
+++ b/docs/README.zh-CN.md
@@ -14,7 +14,7 @@
 - 🌈 多种前端框架支持（[React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com)）
 - 🥢 多语言支持（[JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/)）
 
-[English](./README.md) · [简体中文](./docs/README.zh-CN.md) · [French](./docs/README.fr-FR.md) · [Deutsch](./docs/README.de-DE.md) · [Русский](./docs/README.ja-JP.md) · [日本語](./docs/README.ja-JP.md)
+[English](../README.md) · [简体中文](./README.zh-CN.md) · [French](./README.fr-FR.md) · [한국어](./README.ko-KR.md) · [Indonesian](./README.id-ID.md) · [Русский](./README.ru-RU.md) · [Deutsch](./README.de-DE.md) · [日本語](./README.ja-JP.md) (Translated by ChatGPT)
 
 ## 安装
 
diff --git a/template-svelte-js/devtools.html b/template-svelte-js/devtools.html
new file mode 100644
index 0000000..6f0e1b8
--- /dev/null
+++ b/template-svelte-js/devtools.html
@@ -0,0 +1,14 @@
+<!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 Extension + Svelte + JS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/devtools/index.js"></script>
+  </body>
+</html>
diff --git a/template-svelte-js/newtab.html b/template-svelte-js/newtab.html
new file mode 100644
index 0000000..7f5b0bf
--- /dev/null
+++ b/template-svelte-js/newtab.html
@@ -0,0 +1,14 @@
+<!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 Extension + Svelte + JS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/newtab/index.js"></script>
+  </body>
+</html>
diff --git a/template-svelte-js/options.html b/template-svelte-js/options.html
index e5de326..069ae8a 100644
--- a/template-svelte-js/options.html
+++ b/template-svelte-js/options.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Svelte + JS + Vite App - Options</title>
+    <title>Chrome Extension + Svelte + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-svelte-js/popup.html b/template-svelte-js/popup.html
index 6f46ce2..d934c0a 100644
--- a/template-svelte-js/popup.html
+++ b/template-svelte-js/popup.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Svelte + JS + Vite App - Popup</title>
+    <title>Chrome Extension + Svelte + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-svelte-js/sidepanel.html b/template-svelte-js/sidepanel.html
index 3f6aff2..1463bb2 100644
--- a/template-svelte-js/sidepanel.html
+++ b/template-svelte-js/sidepanel.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icon/logo.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Svelte + JS + Vite App - Sidepanel</title>
+    <title>Chrome Extension + Svelte + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-svelte-js/src/background/index.js b/template-svelte-js/src/background/index.js
index 8e2510d..4a0687b 100644
--- a/template-svelte-js/src/background/index.js
+++ b/template-svelte-js/src/background/index.js
@@ -1,3 +1,7 @@
-console.info('chrome-ext template-svelte-js background script')
+console.log('background is running')
 
-export {}
+chrome.runtime.onMessage.addListener((request) => {
+  if (request.type === 'COUNT') {
+    console.log('background has received a message from popup, and count is ', request?.count)
+  }
+})
diff --git a/template-svelte-js/src/content/index.js b/template-svelte-js/src/content/index.js
deleted file mode 100644
index 20aad39..0000000
--- a/template-svelte-js/src/content/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-console.info('chrome-ext template-svelte-js content script')
-
-export {}
diff --git a/template-svelte-js/src/contentScript/index.js b/template-svelte-js/src/contentScript/index.js
new file mode 100644
index 0000000..bbbc97d
--- /dev/null
+++ b/template-svelte-js/src/contentScript/index.js
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-svelte-js/src/devtools/DevTools.svelte b/template-svelte-js/src/devtools/DevTools.svelte
new file mode 100644
index 0000000..833e79c
--- /dev/null
+++ b/template-svelte-js/src/devtools/DevTools.svelte
@@ -0,0 +1,56 @@
+<script>
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+</script>
+
+<main>
+  <h3>DevTools Page</h3>
+
+  <a href={link} target="_blank">generated by create-chrome-ext</a>
+</main>
+
+<style>
+  :global(:root) {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
+  }
+
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  h3 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    font-weight: 200;
+    line-height: 1.2rem;
+    margin: 2rem auto;
+  }
+
+  a {
+    font-size: 0.5rem;
+    margin: 0.5rem;
+    color: #cccccc;
+    text-decoration: none;
+  }
+</style>
diff --git a/template-svelte-js/src/devtools/index.js b/template-svelte-js/src/devtools/index.js
index 336ce12..b5d85df 100644
--- a/template-svelte-js/src/devtools/index.js
+++ b/template-svelte-js/src/devtools/index.js
@@ -1 +1,11 @@
-export {}
+import App from './DevTools.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+chrome.devtools.panels.create('SvelteCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
+
+export default app
diff --git a/template-svelte-js/src/manifest.js b/template-svelte-js/src/manifest.js
index 54ea3b2..3b059b6 100644
--- a/template-svelte-js/src/manifest.js
+++ b/template-svelte-js/src/manifest.js
@@ -1,9 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
+import packageData from '../package.json'
 
 export default defineManifest({
-  name: 'create-chrome-ext',
-  description: '',
-  version: '0.0.0',
+  name: packageData.name,
+  description: packageData.description,
+  version: packageData.version,
   manifest_version: 3,
   icons: {
     16: 'img/logo-16.png',
@@ -16,6 +17,7 @@ export default defineManifest({
     default_icon: 'img/logo-48.png',
   },
   options_page: 'options.html',
+  devtools_page: 'devtools.html',
   background: {
     service_worker: 'src/background/index.js',
     type: 'module',
@@ -23,7 +25,7 @@ export default defineManifest({
   content_scripts: [
     {
       matches: ['http://*/*', 'https://*/*'],
-      js: ['src/content/index.js'],
+      js: ['src/contentScript/index.js'],
     },
   ],
   side_panel: {
@@ -35,5 +37,8 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: ['sidePanel'],
+  permissions: ['sidePanel', 'storage'],
+  chrome_url_overrides: {
+    newtab: 'newtab.html',
+  },
 })
diff --git a/template-svelte-js/src/newtab/NewTab.svelte b/template-svelte-js/src/newtab/NewTab.svelte
index 75e3eb7..67a2bce 100644
--- a/template-svelte-js/src/newtab/NewTab.svelte
+++ b/template-svelte-js/src/newtab/NewTab.svelte
@@ -1,52 +1,87 @@
 <script>
-  const crx = 'create-chrome-ext'
-</script>
+  import { onMount } from 'svelte'
+
+  const getTime = () => {
+    const date = new Date()
+    const hour = String(date.getHours()).padStart(2, '0')
+    const minute = String(date.getMinutes()).padStart(2, '0')
+    return `${hour}:${minute}`
+  }
 
-<main>
-  <h3>Options Page!</h3>
+  let time = getTime()
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
 
-  <h6>v 0.0.0</h6>
+  onMount(() => {
+    let intervalor = setInterval(() => {
+      time = getTime()
+    }, 1000)
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
-</main>
+    return () => clearInterval(intervalor)
+  })
+</script>
+
+<section>
+  <span />
+  <h1>{time}</h1>
+  <a href={link} target="_blank"> generated by create-chrome-ext </a>
+</section>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
   }
 
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
   }
 
-  h3 {
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  section::before {
+    content: '';
+    position: fixed;
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    background-image: url('https://source.unsplash.com/random');
+    background-size: cover;
+    filter: blur(10px);
+  }
+
+  section {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  h1 {
     color: #ff3e00;
     text-transform: uppercase;
-    font-size: 1.5rem;
-    font-weight: 200;
-    line-height: 1.2rem;
+    font-size: 6rem;
     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;
-    }
-  }
 </style>
diff --git a/template-svelte-js/src/newtab/index.js b/template-svelte-js/src/newtab/index.js
index e69de29..c284d05 100644
--- a/template-svelte-js/src/newtab/index.js
+++ b/template-svelte-js/src/newtab/index.js
@@ -0,0 +1,7 @@
+import App from './NewTab.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
diff --git a/template-svelte-js/src/options/Options.svelte b/template-svelte-js/src/options/Options.svelte
index 75e3eb7..9faae93 100644
--- a/template-svelte-js/src/options/Options.svelte
+++ b/template-svelte-js/src/options/Options.svelte
@@ -1,19 +1,62 @@
 <script>
-  const crx = 'create-chrome-ext'
+  import { onMount } from 'svelte'
+
+  let countSync = 0
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  onMount(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      countSync = result.count || 0
+    })
+
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        countSync = request.count || 0
+      }
+    })
+  })
 </script>
 
 <main>
-  <h3>Options Page!</h3>
+  <h3>Options Page</h3>
 
-  <h6>v 0.0.0</h6>
+  <h4>Count from Popup: {countSync}</h4>
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
+  <a href={link} target="_blank">generated by create-chrome-ext</a>
 </main>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
+  }
+
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
   }
 
   main {
@@ -31,22 +74,10 @@
     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;
-    }
-  }
 </style>
diff --git a/template-svelte-js/src/popup/Popup.svelte b/template-svelte-js/src/popup/Popup.svelte
index 16db0ae..0a925a7 100644
--- a/template-svelte-js/src/popup/Popup.svelte
+++ b/template-svelte-js/src/popup/Popup.svelte
@@ -1,23 +1,86 @@
 <script>
-  const crx = 'create-chrome-ext'
+  import { onMount, onDestroy } from 'svelte'
+
+  let count = 0
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  const minus = () => {
+    if (count > 0) count--
+    chrome.storage.sync.set({ count })
+  }
+  const add = () => {
+    count++
+    chrome.storage.sync.set({ count })
+  }
+
+  onMount(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      console.info('Popup Page Mounted', count, result.count)
+      count = result.count ?? 0
+    })
+
+    return () => {
+      console.info('Popup Page Destroyed', count)
+      chrome.storage.sync.set({ count })
+    }
+  })
+
+  $: {
+    chrome.runtime.sendMessage({ type: 'COUNT', count })
+  }
 </script>
 
-<main>
-  <h3>Popup Page!</h3>
+<template>
+  <main>
+    <h3>Popup Page</h3>
 
-  <h6>v 0.0.0</h6>
+    <div class="calc">
+      <button disabled={count <= 0} on:click={minus}>-</button>
+      <label for="count-input">{count}</label>
+      <button on:click={add}>+</button>
+    </div>
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
-</main>
+    <a href={link} target="_blank"> generated by create-chrome-ext </a>
+  </main>
+</template>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
+  }
+
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
   }
 
   :global(body) {
     min-width: 20rem;
+    margin: 0;
   }
 
   main {
@@ -35,10 +98,30 @@
     margin: 2rem auto;
   }
 
-  h6 {
-    font-size: 0.5rem;
-    color: #333333;
-    margin: 0.5rem;
+  .calc {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem;
+
+    & > button {
+      font-size: 1rem;
+      padding: 0.5rem 1rem;
+      border: 1px solid #ff3e00;
+      border-radius: 0.25rem;
+      background-color: transparent;
+      color: #ff3e00;
+      cursor: pointer;
+      outline: none;
+
+      width: 3rem;
+      margin: 0 a;
+    }
+
+    & > label {
+      font-size: 1.5rem;
+      margin: 0 1rem;
+    }
   }
 
   a {
@@ -47,10 +130,4 @@
     color: #cccccc;
     text-decoration: none;
   }
-
-  @media (min-width: 480px) {
-    h3 {
-      max-width: none;
-    }
-  }
 </style>
diff --git a/template-svelte-js/src/sidepanel/Sidepanel.svelte b/template-svelte-js/src/sidepanel/Sidepanel.svelte
index cd014f4..790401b 100644
--- a/template-svelte-js/src/sidepanel/Sidepanel.svelte
+++ b/template-svelte-js/src/sidepanel/Sidepanel.svelte
@@ -1,23 +1,52 @@
 <script>
-  const crx = 'create-chrome-ext'
+  import { onMount } from 'svelte'
+
+  let countSync = 0
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  onMount(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      countSync = result.count || 0
+    })
+
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        countSync = request?.count ?? 0
+      }
+    })
+  })
 </script>
 
 <main>
-  <h3>Side Panel Page!</h3>
+  <h3>SidePanel Page</h3>
 
-  <h6>v 0.0.0</h6>
+  <h4>Count from Popup: {countSync}</h4>
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
+  <a href={link} target="_blank"> generated by create-chrome-ext </a>
 </main>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
   }
 
   :global(body) {
     min-width: 20rem;
+    margin: 0;
   }
 
   main {
@@ -35,22 +64,10 @@
     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;
-    }
-  }
 </style>
diff --git a/template-svelte-ts/devtools.html b/template-svelte-ts/devtools.html
new file mode 100644
index 0000000..c2e91fb
--- /dev/null
+++ b/template-svelte-ts/devtools.html
@@ -0,0 +1,14 @@
+<!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 Extension + Svelte + TS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/devtools/index.ts"></script>
+  </body>
+</html>
diff --git a/template-svelte-ts/newtab.html b/template-svelte-ts/newtab.html
new file mode 100644
index 0000000..48a7592
--- /dev/null
+++ b/template-svelte-ts/newtab.html
@@ -0,0 +1,14 @@
+<!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 Extension + Svelte + TS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/newtab/index.ts"></script>
+  </body>
+</html>
diff --git a/template-svelte-ts/options.html b/template-svelte-ts/options.html
index 092d2ae..ce4361e 100644
--- a/template-svelte-ts/options.html
+++ b/template-svelte-ts/options.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Svelte + TS + Vite App - Options</title>
+    <title>Chrome Extension + Svelte + TS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-svelte-ts/popup.html b/template-svelte-ts/popup.html
index b24eb1c..03b5ba7 100644
--- a/template-svelte-ts/popup.html
+++ b/template-svelte-ts/popup.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Svelte + TS + Vite App - Popup</title>
+    <title>Chrome Extension + Svelte + TS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-svelte-ts/sidepanel.html b/template-svelte-ts/sidepanel.html
index e93957e..43d53a4 100644
--- a/template-svelte-ts/sidepanel.html
+++ b/template-svelte-ts/sidepanel.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/icon/logo.ico" />
+    <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Svelte + TS + Vite App - Sidepanel</title>
+    <title>Chrome Extension + Svelte + TS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-svelte-ts/src/background/index.ts b/template-svelte-ts/src/background/index.ts
index 1fd3b47..4a0687b 100644
--- a/template-svelte-ts/src/background/index.ts
+++ b/template-svelte-ts/src/background/index.ts
@@ -1,3 +1,7 @@
-console.info('chrome-ext template-svelte-ts background script')
+console.log('background is running')
 
-export {}
+chrome.runtime.onMessage.addListener((request) => {
+  if (request.type === 'COUNT') {
+    console.log('background has received a message from popup, and count is ', request?.count)
+  }
+})
diff --git a/template-svelte-ts/src/content/index.ts b/template-svelte-ts/src/content/index.ts
deleted file mode 100644
index ddfdeb6..0000000
--- a/template-svelte-ts/src/content/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-console.info('chrome-ext template-svelte-ts content script')
-
-export {}
diff --git a/template-svelte-ts/src/contentScript/index.ts b/template-svelte-ts/src/contentScript/index.ts
new file mode 100644
index 0000000..bbbc97d
--- /dev/null
+++ b/template-svelte-ts/src/contentScript/index.ts
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-svelte-ts/src/devtools/DevTools.svelte b/template-svelte-ts/src/devtools/DevTools.svelte
new file mode 100644
index 0000000..833e79c
--- /dev/null
+++ b/template-svelte-ts/src/devtools/DevTools.svelte
@@ -0,0 +1,56 @@
+<script>
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+</script>
+
+<main>
+  <h3>DevTools Page</h3>
+
+  <a href={link} target="_blank">generated by create-chrome-ext</a>
+</main>
+
+<style>
+  :global(:root) {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
+  }
+
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  h3 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    font-weight: 200;
+    line-height: 1.2rem;
+    margin: 2rem auto;
+  }
+
+  a {
+    font-size: 0.5rem;
+    margin: 0.5rem;
+    color: #cccccc;
+    text-decoration: none;
+  }
+</style>
diff --git a/template-svelte-ts/src/devtools/index.ts b/template-svelte-ts/src/devtools/index.ts
index 336ce12..f0d3638 100644
--- a/template-svelte-ts/src/devtools/index.ts
+++ b/template-svelte-ts/src/devtools/index.ts
@@ -1 +1,11 @@
-export {}
+import App from './DevTools.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+chrome.devtools.panels.create('SvelteCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
+
+export default app
diff --git a/template-svelte-ts/src/manifest.ts b/template-svelte-ts/src/manifest.ts
index bc1eee2..60c644a 100644
--- a/template-svelte-ts/src/manifest.ts
+++ b/template-svelte-ts/src/manifest.ts
@@ -1,21 +1,23 @@
 import { defineManifest } from '@crxjs/vite-plugin'
+import packageData from '../package.json'
 
 export default defineManifest({
-  name: 'create-chrome-ext',
-  description: '',
-  version: '0.0.0',
+  name: packageData.name,
+  description: packageData.description,
+  version: packageData.version,
   manifest_version: 3,
   icons: {
-    '16': 'img/logo-16.png',
-    '32': 'img/logo-34.png',
-    '48': 'img/logo-48.png',
-    '128': 'img/logo-128.png',
+    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',
+  devtools_page: 'devtools.html',
   background: {
     service_worker: 'src/background/index.ts',
     type: 'module',
@@ -23,7 +25,7 @@ export default defineManifest({
   content_scripts: [
     {
       matches: ['http://*/*', 'https://*/*'],
-      js: ['src/content/index.ts'],
+      js: ['src/contentScript/index.ts'],
     },
   ],
   side_panel: {
@@ -35,5 +37,8 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: ['sidePanel'],
+  permissions: ['sidePanel', 'storage'],
+  chrome_url_overrides: {
+    newtab: 'newtab.html',
+  },
 })
diff --git a/template-svelte-ts/src/newtab/NewTab.svelte b/template-svelte-ts/src/newtab/NewTab.svelte
index 95213e9..5a55dba 100644
--- a/template-svelte-ts/src/newtab/NewTab.svelte
+++ b/template-svelte-ts/src/newtab/NewTab.svelte
@@ -1,52 +1,97 @@
 <script lang="ts">
-  const crx = 'create-chrome-ext'
-</script>
+  import { onMount } from 'svelte'
+
+  const getTime = () => {
+    const date = new Date()
+    const hour = String(date.getHours()).padStart(2, '0')
+    const minute = String(date.getMinutes()).padStart(2, '0')
+    return `${hour}:${minute}`
+  }
 
-<main>
-  <h3>Options Page!</h3>
+  let time = getTime()
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
 
-  <h6>v 0</h6>
+  onMount(() => {
+    let intervalor = setInterval(() => {
+      time = getTime()
+    }, 1000)
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
-</main>
+    return () => clearInterval(intervalor)
+  })
+</script>
+
+<section>
+  <span></span>
+  <h1>{time}</h1>
+  <a href={link} target="_blank"> generated by create-chrome-ext </a>
+</section>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
   }
 
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
   }
 
-  h3 {
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  section::before {
+    content: '';
+    position: fixed;
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    background-image: url('https://source.unsplash.com/random');
+    background-size: cover;
+    filter: blur(10px);
+  }
+
+  section {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  h1 {
     color: #ff3e00;
     text-transform: uppercase;
-    font-size: 1.5rem;
-    font-weight: 200;
-    line-height: 1.2rem;
+    font-size: 6rem;
     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;
-    }
-  }
 </style>
diff --git a/template-svelte-ts/src/newtab/index.ts b/template-svelte-ts/src/newtab/index.ts
index e69de29..9ab1e95 100644
--- a/template-svelte-ts/src/newtab/index.ts
+++ b/template-svelte-ts/src/newtab/index.ts
@@ -0,0 +1,7 @@
+import App from './NewTab.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app
diff --git a/template-svelte-ts/src/options/Options.svelte b/template-svelte-ts/src/options/Options.svelte
index dc61973..9faae93 100644
--- a/template-svelte-ts/src/options/Options.svelte
+++ b/template-svelte-ts/src/options/Options.svelte
@@ -1,19 +1,62 @@
-<script lang="ts">
-  const crx = 'create-chrome-ext'
+<script>
+  import { onMount } from 'svelte'
+
+  let countSync = 0
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  onMount(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      countSync = result.count || 0
+    })
+
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        countSync = request.count || 0
+      }
+    })
+  })
 </script>
 
 <main>
-  <h3>Options Page!</h3>
+  <h3>Options Page</h3>
 
-  <h6>v 0.0.0</h6>
+  <h4>Count from Popup: {countSync}</h4>
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
+  <a href={link} target="_blank">generated by create-chrome-ext</a>
 </main>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
+  }
+
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
   }
 
   main {
@@ -31,22 +74,10 @@
     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;
-    }
-  }
 </style>
diff --git a/template-svelte-ts/src/options/index.ts b/template-svelte-ts/src/options/index.ts
index 096d157..318f833 100644
--- a/template-svelte-ts/src/options/index.ts
+++ b/template-svelte-ts/src/options/index.ts
@@ -1,7 +1,7 @@
 import App from './Options.svelte'
 
 const app = new App({
-  target: document.getElementById('app'),
+  target: document.getElementById('app')!,
 })
 
 export default app
diff --git a/template-svelte-ts/src/popup/Popup.svelte b/template-svelte-ts/src/popup/Popup.svelte
index 2a5c10a..2684802 100644
--- a/template-svelte-ts/src/popup/Popup.svelte
+++ b/template-svelte-ts/src/popup/Popup.svelte
@@ -1,23 +1,86 @@
 <script lang="ts">
-  const crx = 'create-chrome-ext'
+  import { onMount, onDestroy } from 'svelte'
+
+  let count = 0
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  const minus = () => {
+    if (count > 0) count--
+    chrome.storage.sync.set({ count })
+  }
+  const add = () => {
+    count++
+    chrome.storage.sync.set({ count })
+  }
+
+  onMount(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      console.info('Popup Page Mounted', count, result.count)
+      count = result.count ?? 0
+    })
+
+    return () => {
+      console.info('Popup Page Destroyed', count)
+      chrome.storage.sync.set({ count })
+    }
+  })
+
+  $: {
+    chrome.runtime.sendMessage({ type: 'COUNT', count })
+  }
 </script>
 
-<main>
-  <h3>Popup Page!</h3>
+<template>
+  <main>
+    <h3>Popup Page</h3>
 
-  <h6>v 0.0.0</h6>
+    <div class="calc">
+      <button disabled={count <= 0} on:click={minus}>-</button>
+      <label for="count-input">{count}</label>
+      <button on:click={add}>+</button>
+    </div>
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
-</main>
+    <a href={link} target="_blank"> generated by create-chrome-ext </a>
+  </main>
+</template>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+    :global(:root) {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
+  }
+
+  :global(body) {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
   }
 
   :global(body) {
     min-width: 20rem;
+    margin: 0;
   }
 
   main {
@@ -35,10 +98,30 @@
     margin: 2rem auto;
   }
 
-  h6 {
-    font-size: 0.5rem;
-    color: #333333;
-    margin: 0.5rem;
+  .calc {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem;
+
+    & > button {
+      font-size: 1rem;
+      padding: 0.5rem 1rem;
+      border: 1px solid #ff3e00;
+      border-radius: 0.25rem;
+      background-color: transparent;
+      color: #ff3e00;
+      cursor: pointer;
+      outline: none;
+
+      width: 3rem;
+      margin: 0 a;
+    }
+
+    & > label {
+      font-size: 1.5rem;
+      margin: 0 1rem;
+    }
   }
 
   a {
@@ -47,10 +130,4 @@
     color: #cccccc;
     text-decoration: none;
   }
-
-  @media (min-width: 480px) {
-    h3 {
-      max-width: none;
-    }
-  }
 </style>
diff --git a/template-svelte-ts/src/popup/index.ts b/template-svelte-ts/src/popup/index.ts
index 53229b5..b405d85 100644
--- a/template-svelte-ts/src/popup/index.ts
+++ b/template-svelte-ts/src/popup/index.ts
@@ -1,7 +1,7 @@
 import App from './Popup.svelte'
 
 const app = new App({
-  target: document.getElementById('app'),
+  target: document.getElementById('app')!,
 })
 
 export default app
diff --git a/template-svelte-ts/src/sidepanel/Sidepanel.svelte b/template-svelte-ts/src/sidepanel/Sidepanel.svelte
index 75f1492..634b52a 100644
--- a/template-svelte-ts/src/sidepanel/Sidepanel.svelte
+++ b/template-svelte-ts/src/sidepanel/Sidepanel.svelte
@@ -1,23 +1,62 @@
 <script lang="ts">
-  const crx = 'create-chrome-ext'
+  import { onMount } from 'svelte'
+
+  let countSync = 0
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  onMount(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      countSync = result.count || 0
+    })
+
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        countSync = request?.count ?? 0
+      }
+    })
+  })
 </script>
 
 <main>
-  <h3>Side Panel Page!</h3>
+  <h3>SidePanel Page</h3>
 
-  <h6>v 0.0.0</h6>
+  <h4>Count from Popup: {countSync}</h4>
 
-  <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {crx}</a>
+  <a href={link} target="_blank"> generated by create-chrome-ext </a>
 </main>
 
 <style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+  :global(:root) {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :global(:root) {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #ff3e00;
+    }
   }
 
   :global(body) {
     min-width: 20rem;
+    margin: 0;
   }
 
   main {
@@ -35,22 +74,10 @@
     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;
-    }
-  }
 </style>
diff --git a/template-svelte-ts/src/sidepanel/index.ts b/template-svelte-ts/src/sidepanel/index.ts
index f89c087..2ff06de 100644
--- a/template-svelte-ts/src/sidepanel/index.ts
+++ b/template-svelte-ts/src/sidepanel/index.ts
@@ -1,7 +1,7 @@
 import App from './Sidepanel.svelte'
 
 const app = new App({
-  target: document.getElementById('app'),
+  target: document.getElementById('app')!,
 })
 
 export default app
diff --git a/template-vue-ts/src/options/Options.vue b/template-vue-ts/src/options/Options.vue
index 832ee92..f41798f 100644
--- a/template-vue-ts/src/options/Options.vue
+++ b/template-vue-ts/src/options/Options.vue
@@ -6,7 +6,7 @@ const link = ref('https://github.com/guocaoyi/create-chrome-ext')
 
 onMounted(() => {
   chrome.storage.sync.get(['count'], (result) => {
-    countSync.value = result.count || 0
+    countSync.value = result.count ?? 0
   })
 
   chrome.runtime.onMessage.addListener((request) => {
diff --git a/template-vue-ts/src/popup/Popup.vue b/template-vue-ts/src/popup/Popup.vue
index 79014ea..ea1c4e6 100644
--- a/template-vue-ts/src/popup/Popup.vue
+++ b/template-vue-ts/src/popup/Popup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 
 const count = ref(0)
 const link = ref('https://github.com/guocaoyi/create-chrome-ext')
@@ -11,14 +11,13 @@ const add = () => count.value++
 
 onMounted(() => {
   chrome.storage.sync.get(['count'], (result) => {
-    count.value = result.count || 0
+    count.value = result.count ?? 0
   })
 })
 
 watch(count, (newCount) => {
   chrome.storage.sync.set({ count: newCount })
 
-  console.info('popup -->', newCount)
   chrome.runtime.sendMessage({ type: 'COUNT', count: count.value })
 })
 </script>
diff --git a/template-vue-ts/src/sidepanel/SidePanel.vue b/template-vue-ts/src/sidepanel/SidePanel.vue
index fc3648d..bf032bc 100644
--- a/template-vue-ts/src/sidepanel/SidePanel.vue
+++ b/template-vue-ts/src/sidepanel/SidePanel.vue
@@ -6,7 +6,7 @@ const link = ref('https://github.com/guocaoyi/create-chrome-ext')
 
 onMounted(() => {
   chrome.storage.sync.get(['count'], (result) => {
-    countSync.value = result.count || 0
+    countSync.value = result.count ?? 0
   })
 
   chrome.runtime.onMessage.addListener((request) => {