From eccc5e84cd64970d6aacbfef047bfc2c9bd3213b Mon Sep 17 00:00:00 2001
From: Yalda <guocaoyi@gmail.com>
Date: Sun, 15 Oct 2023 03:02:39 +0800
Subject: [PATCH] feat(solid):out of box functions, countor \ newtab timer \
 events

---
 template-solid-js/devtools.html               | 13 +++++
 template-solid-js/newtab.html                 | 13 +++++
 template-solid-js/options.html                |  2 +-
 template-solid-js/package.json                |  6 +--
 template-solid-js/popup.html                  |  2 +-
 template-solid-js/sidepanel.html              |  2 +-
 template-solid-js/src/background/index.js     |  8 ++-
 template-solid-js/src/content/index.js        |  3 --
 template-solid-js/src/contentScript/index.js  |  1 +
 .../DevTools.css}                             | 10 ++++
 template-solid-js/src/devtools/DevTools.jsx   | 16 ++++++
 template-solid-js/src/devtools/index.css      | 28 ++++++++++
 template-solid-js/src/devtools/index.jsx      | 11 ++++
 template-solid-js/src/manifest.js             | 15 ++++--
 template-solid-js/src/newtab/NewTab.css       | 34 ++++++++++++
 template-solid-js/src/newtab/NewTab.jsx       | 33 ++++++++++++
 template-solid-js/src/newtab/index.css        | 28 ++++++++++
 template-solid-js/src/newtab/index.jsx        |  7 +++
 .../src/options/Options.css                   |  6 +++
 template-solid-js/src/options/Options.jsx     | 33 +++++++-----
 template-solid-js/src/options/index.css       | 30 +++++------
 template-solid-js/src/popup/Popup.css         | 53 +++++++++++++++++++
 template-solid-js/src/popup/Popup.jsx         | 50 ++++++++++++-----
 template-solid-js/src/popup/index.css         | 30 +++++------
 template-solid-js/src/sidepanel/Sidepanel.css | 27 ++++++++++
 template-solid-js/src/sidepanel/Sidepanel.jsx | 33 +++++++-----
 template-solid-js/src/sidepanel/index.css     | 30 +++++------
 template-solid-ts/devtools.html               | 13 +++++
 template-solid-ts/newtab.html                 | 13 +++++
 template-solid-ts/options.html                |  2 +-
 template-solid-ts/package.json                |  6 +--
 template-solid-ts/popup.html                  |  2 +-
 template-solid-ts/sidepanel.html              |  2 +-
 template-solid-ts/src/background/index.ts     |  8 ++-
 template-solid-ts/src/content/index.ts        |  3 --
 template-solid-ts/src/contentScript/index.ts  |  1 +
 .../src/devtools/DevTools.css                 | 10 ++++
 template-solid-ts/src/devtools/DevTools.tsx   | 19 +++++++
 template-solid-ts/src/devtools/index.css      | 28 ++++++++++
 template-solid-ts/src/devtools/index.tsx      | 11 ++++
 template-solid-ts/src/manifest.ts             | 15 ++++--
 template-solid-ts/src/newtab/NewTab.css       | 34 ++++++++++++
 template-solid-ts/src/newtab/NewTab.tsx       | 36 +++++++++++++
 template-solid-ts/src/newtab/index.css        | 28 ++++++++++
 template-solid-ts/src/newtab/index.tsx        |  7 +++
 .../src/options/Options.css                   |  6 +++
 template-solid-ts/src/options/Options.tsx     | 32 +++++++----
 template-solid-ts/src/options/index.css       | 30 +++++------
 template-solid-ts/src/popup/Popup.css         | 53 +++++++++++++++++++
 template-solid-ts/src/popup/Popup.module.css  | 38 -------------
 template-solid-ts/src/popup/Popup.tsx         | 49 +++++++++++++----
 template-solid-ts/src/popup/index.css         | 30 +++++------
 template-solid-ts/src/sidepanel/Sidepanel.css | 27 ++++++++++
 .../src/sidepanel/Sidepanel.module.css        | 38 -------------
 template-solid-ts/src/sidepanel/Sidepanel.tsx | 32 +++++++----
 template-solid-ts/src/sidepanel/index.css     | 30 +++++------
 template-solid-ts/src/sidepanel/index.tsx     |  2 +-
 57 files changed, 858 insertions(+), 271 deletions(-)
 create mode 100644 template-solid-js/devtools.html
 create mode 100644 template-solid-js/newtab.html
 delete mode 100644 template-solid-js/src/content/index.js
 create mode 100644 template-solid-js/src/contentScript/index.js
 rename template-solid-js/src/{popup/Popup.module.css => devtools/DevTools.css} (80%)
 create mode 100644 template-solid-js/src/devtools/DevTools.jsx
 create mode 100644 template-solid-js/src/devtools/index.css
 create mode 100644 template-solid-js/src/devtools/index.jsx
 create mode 100644 template-solid-js/src/newtab/NewTab.css
 create mode 100644 template-solid-js/src/newtab/NewTab.jsx
 create mode 100644 template-solid-js/src/newtab/index.css
 create mode 100644 template-solid-js/src/newtab/index.jsx
 rename template-solid-ts/src/options/Options.module.css => template-solid-js/src/options/Options.css (88%)
 create mode 100644 template-solid-js/src/popup/Popup.css
 create mode 100644 template-solid-js/src/sidepanel/Sidepanel.css
 create mode 100644 template-solid-ts/devtools.html
 create mode 100644 template-solid-ts/newtab.html
 delete mode 100644 template-solid-ts/src/content/index.ts
 create mode 100644 template-solid-ts/src/contentScript/index.ts
 rename template-solid-js/src/sidepanel/Sidepanel.module.css => template-solid-ts/src/devtools/DevTools.css (80%)
 create mode 100644 template-solid-ts/src/devtools/DevTools.tsx
 create mode 100644 template-solid-ts/src/devtools/index.css
 create mode 100644 template-solid-ts/src/devtools/index.tsx
 create mode 100644 template-solid-ts/src/newtab/NewTab.css
 create mode 100644 template-solid-ts/src/newtab/NewTab.tsx
 create mode 100644 template-solid-ts/src/newtab/index.css
 create mode 100644 template-solid-ts/src/newtab/index.tsx
 rename template-solid-js/src/options/Options.module.css => template-solid-ts/src/options/Options.css (88%)
 create mode 100644 template-solid-ts/src/popup/Popup.css
 delete mode 100644 template-solid-ts/src/popup/Popup.module.css
 create mode 100644 template-solid-ts/src/sidepanel/Sidepanel.css
 delete mode 100644 template-solid-ts/src/sidepanel/Sidepanel.module.css

diff --git a/template-solid-js/devtools.html b/template-solid-js/devtools.html
new file mode 100644
index 0000000..9fc862b
--- /dev/null
+++ b/template-solid-js/devtools.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 Extension + Solid + JS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/devtools/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-solid-js/newtab.html b/template-solid-js/newtab.html
new file mode 100644
index 0000000..885e58b
--- /dev/null
+++ b/template-solid-js/newtab.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 Extension + Solid + JS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/newtab/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-solid-js/options.html b/template-solid-js/options.html
index 2ceb24b..ada0b5c 100644
--- a/template-solid-js/options.html
+++ b/template-solid-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>Solid + JS + Vite - Options</title>
+    <title>Chrome Extension + Solid + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-solid-js/package.json b/template-solid-js/package.json
index 39312c2..91d9768 100644
--- a/template-solid-js/package.json
+++ b/template-solid-js/package.json
@@ -24,10 +24,10 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "prettier": "^3.0.3",
-    "vite": "^3.2.7",
-    "vite-plugin-solid": "^2.7.0"
+    "vite": "^4.4.11",
+    "vite-plugin-solid": "^2.7.1"
   },
   "dependencies": {
-    "solid-js": "^1.4.2"
+    "solid-js": "^1.8.1"
   }
 }
diff --git a/template-solid-js/popup.html b/template-solid-js/popup.html
index c69f197..352a893 100644
--- a/template-solid-js/popup.html
+++ b/template-solid-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>Solid + TS + Vite - Popup</title>
+    <title>Chrome Extension + Solid + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-solid-js/sidepanel.html b/template-solid-js/sidepanel.html
index 514b422..113b9e6 100644
--- a/template-solid-js/sidepanel.html
+++ b/template-solid-js/sidepanel.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>Solid + TS + Vite - Side Panel</title>
+    <title>Chrome Extension + Solid + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-solid-js/src/background/index.js b/template-solid-js/src/background/index.js
index 1fd3b47..4a0687b 100644
--- a/template-solid-js/src/background/index.js
+++ b/template-solid-js/src/background/index.js
@@ -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-solid-js/src/content/index.js b/template-solid-js/src/content/index.js
deleted file mode 100644
index ddfdeb6..0000000
--- a/template-solid-js/src/content/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-console.info('chrome-ext template-svelte-ts content script')
-
-export {}
diff --git a/template-solid-js/src/contentScript/index.js b/template-solid-js/src/contentScript/index.js
new file mode 100644
index 0000000..bbbc97d
--- /dev/null
+++ b/template-solid-js/src/contentScript/index.js
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-solid-js/src/popup/Popup.module.css b/template-solid-js/src/devtools/DevTools.css
similarity index 80%
rename from template-solid-js/src/popup/Popup.module.css
rename to template-solid-js/src/devtools/DevTools.css
index 3316cfc..6c4e3a2 100644
--- a/template-solid-js/src/popup/Popup.module.css
+++ b/template-solid-js/src/devtools/DevTools.css
@@ -3,6 +3,16 @@
     'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #142d61;
+  }
+}
+
 main {
   text-align: center;
   padding: 1em;
diff --git a/template-solid-js/src/devtools/DevTools.jsx b/template-solid-js/src/devtools/DevTools.jsx
new file mode 100644
index 0000000..a9b2be5
--- /dev/null
+++ b/template-solid-js/src/devtools/DevTools.jsx
@@ -0,0 +1,16 @@
+import './DevTools.css'
+
+export const DevTools = () => {
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  return (
+    <main>
+      <h3>DevTools Page</h3>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
+      </a>
+    </main>
+  )
+}
+
+export default DevTools
diff --git a/template-solid-js/src/devtools/index.css b/template-solid-js/src/devtools/index.css
new file mode 100644
index 0000000..538e457
--- /dev/null
+++ b/template-solid-js/src/devtools/index.css
@@ -0,0 +1,28 @@
+: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) {
+  :root {
+    background-color: #fafafa;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0;
+}
diff --git a/template-solid-js/src/devtools/index.jsx b/template-solid-js/src/devtools/index.jsx
new file mode 100644
index 0000000..89ebe24
--- /dev/null
+++ b/template-solid-js/src/devtools/index.jsx
@@ -0,0 +1,11 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import { DevTools } from './DevTools'
+
+render(() => <DevTools />, document.getElementById('app') ?? document.body)
+
+chrome.devtools.panels.create('SolidCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
diff --git a/template-solid-js/src/manifest.js b/template-solid-js/src/manifest.js
index 54ea3b2..3b059b6 100644
--- a/template-solid-js/src/manifest.js
+++ b/template-solid-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-solid-js/src/newtab/NewTab.css b/template-solid-js/src/newtab/NewTab.css
new file mode 100644
index 0000000..fbfaaea
--- /dev/null
+++ b/template-solid-js/src/newtab/NewTab.css
@@ -0,0 +1,34 @@
+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: #142d61;
+  text-transform: uppercase;
+  font-size: 6rem;
+  margin: 2rem auto;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
diff --git a/template-solid-js/src/newtab/NewTab.jsx b/template-solid-js/src/newtab/NewTab.jsx
new file mode 100644
index 0000000..eacda14
--- /dev/null
+++ b/template-solid-js/src/newtab/NewTab.jsx
@@ -0,0 +1,33 @@
+import { createSignal, onCleanup } from 'solid-js'
+
+import './NewTab.css'
+
+export const NewTab = () => {
+  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}`
+  }
+
+  const [time, setTime] = createSignal(getTime())
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  let interval = setInterval(() => {
+    setTime(getTime())
+  }, 1000)
+
+  onCleanup(() => clearInterval(interval))
+
+  return (
+    <section>
+      <span></span>
+      <h1>{time()}</h1>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
+      </a>
+    </section>
+  )
+}
+
+export default NewTab
diff --git a/template-solid-js/src/newtab/index.css b/template-solid-js/src/newtab/index.css
new file mode 100644
index 0000000..538e457
--- /dev/null
+++ b/template-solid-js/src/newtab/index.css
@@ -0,0 +1,28 @@
+: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) {
+  :root {
+    background-color: #fafafa;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0;
+}
diff --git a/template-solid-js/src/newtab/index.jsx b/template-solid-js/src/newtab/index.jsx
new file mode 100644
index 0000000..3d75b19
--- /dev/null
+++ b/template-solid-js/src/newtab/index.jsx
@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import { NewTab } from './NewTab'
+
+render(() => <NewTab />, document.getElementById('app') ?? document.body)
diff --git a/template-solid-ts/src/options/Options.module.css b/template-solid-js/src/options/Options.css
similarity index 88%
rename from template-solid-ts/src/options/Options.module.css
rename to template-solid-js/src/options/Options.css
index 3316cfc..80eeb85 100644
--- a/template-solid-ts/src/options/Options.module.css
+++ b/template-solid-js/src/options/Options.css
@@ -3,6 +3,12 @@
     'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #142d61;
+  }
+}
+
 main {
   text-align: center;
   padding: 1em;
diff --git a/template-solid-js/src/options/Options.jsx b/template-solid-js/src/options/Options.jsx
index 8f8c01a..83e1e20 100644
--- a/template-solid-js/src/options/Options.jsx
+++ b/template-solid-js/src/options/Options.jsx
@@ -1,20 +1,29 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createEffect } from 'solid-js'
 
-import './Options.module.css'
+import './Options.css'
 
-/**
- * Options component.
- */
 export const Options = () => {
-  const [crx] = createSignal('create-chrome-ext')
-  return (
-    <main>
-      <h3>Options Page!</h3>
+  const [countSync, setCountSync] = createSignal(0)
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  createEffect(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      setCountSync(result.count || 0)
+    })
 
-      <h6>v 0.0.0</h6>
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        setCountSync(request.count || 0)
+      }
+    })
+  }, [])
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
+  return (
+    <main>
+      <h3>Options Page</h3>
+      <h4>Count from Popup: {countSync()}</h4>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
       </a>
     </main>
   )
diff --git a/template-solid-js/src/options/index.css b/template-solid-js/src/options/index.css
index 8a3e44d..538e457 100644
--- a/template-solid-js/src/options/index.css
+++ b/template-solid-js/src/options/index.css
@@ -1,30 +1,28 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   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;
+    background-color: #fafafa;
   }
 }
 
 body {
   min-width: 20rem;
+  margin: 0;
 }
diff --git a/template-solid-js/src/popup/Popup.css b/template-solid-js/src/popup/Popup.css
new file mode 100644
index 0000000..7defc91
--- /dev/null
+++ b/template-solid-js/src/popup/Popup.css
@@ -0,0 +1,53 @@
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #142d61;
+  }
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #142d61;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+.calc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem;
+
+  & > button {
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid #142d61;
+    border-radius: 0.25rem;
+    background-color: transparent;
+    color: #142d61;
+    cursor: pointer;
+    outline: none;
+
+    width: 3rem;
+    margin: 0 a;
+  }
+
+  & > label {
+    font-size: 1.5rem;
+    margin: 0 1rem;
+  }
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
diff --git a/template-solid-js/src/popup/Popup.jsx b/template-solid-js/src/popup/Popup.jsx
index 04f4e86..1db3842 100644
--- a/template-solid-js/src/popup/Popup.jsx
+++ b/template-solid-js/src/popup/Popup.jsx
@@ -1,20 +1,46 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createEffect } from 'solid-js'
 
-import './Popup.module.css'
+import './Popup.css'
 
-/**
- * Popup component.
- */
 export const Popup = () => {
-  const [crx] = createSignal('create-chrome-ext')
-  return (
-    <main>
-      <h3>Popup Page!</h3>
+  const [count, setCount] = createSignal(0)
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  const minus = () => {
+    if (count() > 0) setCount(count() - 1)
+  }
+
+  const add = () => setCount(count() + 1)
 
-      <h6>v 0.0.0</h6>
+  createEffect(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      setCount(result.count || 0)
+    })
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        setCount(request.count || 0)
+      }
+    })
+  }, [])
+
+  createEffect(() => {
+    chrome.storage.sync.set({ count })
+    chrome.runtime.sendMessage({ type: 'COUNT', count })
+  }, [count])
+
+  return (
+    <main>
+      <h3>Popup Page</h3>
+      <div class="calc">
+        <button onClick={minus} disabled={count() <= 0}>
+          -
+        </button>
+        <label>{count()}</label>
+        <button onClick={add}>+</button>
+      </div>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
       </a>
     </main>
   )
diff --git a/template-solid-js/src/popup/index.css b/template-solid-js/src/popup/index.css
index 8a3e44d..538e457 100644
--- a/template-solid-js/src/popup/index.css
+++ b/template-solid-js/src/popup/index.css
@@ -1,30 +1,28 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   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;
+    background-color: #fafafa;
   }
 }
 
 body {
   min-width: 20rem;
+  margin: 0;
 }
diff --git a/template-solid-js/src/sidepanel/Sidepanel.css b/template-solid-js/src/sidepanel/Sidepanel.css
new file mode 100644
index 0000000..beeb79a
--- /dev/null
+++ b/template-solid-js/src/sidepanel/Sidepanel.css
@@ -0,0 +1,27 @@
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #142d61;
+  }
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #142d61;
+  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;
+}
diff --git a/template-solid-js/src/sidepanel/Sidepanel.jsx b/template-solid-js/src/sidepanel/Sidepanel.jsx
index 4a1f795..1f35fef 100644
--- a/template-solid-js/src/sidepanel/Sidepanel.jsx
+++ b/template-solid-js/src/sidepanel/Sidepanel.jsx
@@ -1,20 +1,29 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createEffect } from 'solid-js'
 
-import './Sidepanel.module.css'
+import './Sidepanel.css'
 
-/**
- * Popup component.
- */
 export const Sidepanel = () => {
-  const [crx] = createSignal('create-chrome-ext')
-  return (
-    <main>
-      <h3>Side Panel Page!</h3>
+  const [countSync, setCountSync] = createSignal(0)
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  createEffect(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      setCountSync(result.count || 0)
+    })
 
-      <h6>v 0.0.0</h6>
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        setCountSync(request.count || 0)
+      }
+    })
+  }, [])
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
+  return (
+    <main>
+      <h3>SidePanel Page</h3>
+      <h4>Count from Popup: {countSync()}</h4>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
       </a>
     </main>
   )
diff --git a/template-solid-js/src/sidepanel/index.css b/template-solid-js/src/sidepanel/index.css
index 8a3e44d..538e457 100644
--- a/template-solid-js/src/sidepanel/index.css
+++ b/template-solid-js/src/sidepanel/index.css
@@ -1,30 +1,28 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   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;
+    background-color: #fafafa;
   }
 }
 
 body {
   min-width: 20rem;
+  margin: 0;
 }
diff --git a/template-solid-ts/devtools.html b/template-solid-ts/devtools.html
new file mode 100644
index 0000000..0a0793f
--- /dev/null
+++ b/template-solid-ts/devtools.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 Extension + Solid + TS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/devtools/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-solid-ts/newtab.html b/template-solid-ts/newtab.html
new file mode 100644
index 0000000..cd9638c
--- /dev/null
+++ b/template-solid-ts/newtab.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 Extension + Solid + TS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/newtab/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-solid-ts/options.html b/template-solid-ts/options.html
index 49fed0a..6db9b1d 100644
--- a/template-solid-ts/options.html
+++ b/template-solid-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>Solid + TS + Vite - Options</title>
+    <title>Chrome Extension + Solid + TS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json
index fd0f6ad..de83134 100644
--- a/template-solid-ts/package.json
+++ b/template-solid-ts/package.json
@@ -26,10 +26,10 @@
     "@types/chrome": "^0.0.246",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
-    "vite": "^3.2.7",
-    "vite-plugin-solid": "^2.7.0"
+    "vite": "^4.4.11",
+    "vite-plugin-solid": "^2.7.1"
   },
   "dependencies": {
-    "solid-js": "^1.4.2"
+    "solid-js": "^1.8.1"
   }
 }
diff --git a/template-solid-ts/popup.html b/template-solid-ts/popup.html
index d75ae1d..67ff675 100644
--- a/template-solid-ts/popup.html
+++ b/template-solid-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>Solid + TS + Vite - Popup</title>
+    <title>Chrome Extension + Solid + TS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-solid-ts/sidepanel.html b/template-solid-ts/sidepanel.html
index 6edbff1..6a2a717 100644
--- a/template-solid-ts/sidepanel.html
+++ b/template-solid-ts/sidepanel.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>Solid + TS + Vite - Side Panel</title>
+    <title>Chrome Extension + Solid + TS + Vite</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/template-solid-ts/src/background/index.ts b/template-solid-ts/src/background/index.ts
index 1fd3b47..4a0687b 100644
--- a/template-solid-ts/src/background/index.ts
+++ b/template-solid-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-solid-ts/src/content/index.ts b/template-solid-ts/src/content/index.ts
deleted file mode 100644
index ddfdeb6..0000000
--- a/template-solid-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-solid-ts/src/contentScript/index.ts b/template-solid-ts/src/contentScript/index.ts
new file mode 100644
index 0000000..bbbc97d
--- /dev/null
+++ b/template-solid-ts/src/contentScript/index.ts
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-solid-js/src/sidepanel/Sidepanel.module.css b/template-solid-ts/src/devtools/DevTools.css
similarity index 80%
rename from template-solid-js/src/sidepanel/Sidepanel.module.css
rename to template-solid-ts/src/devtools/DevTools.css
index 3316cfc..6c4e3a2 100644
--- a/template-solid-js/src/sidepanel/Sidepanel.module.css
+++ b/template-solid-ts/src/devtools/DevTools.css
@@ -3,6 +3,16 @@
     'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #142d61;
+  }
+}
+
 main {
   text-align: center;
   padding: 1em;
diff --git a/template-solid-ts/src/devtools/DevTools.tsx b/template-solid-ts/src/devtools/DevTools.tsx
new file mode 100644
index 0000000..3d6d83c
--- /dev/null
+++ b/template-solid-ts/src/devtools/DevTools.tsx
@@ -0,0 +1,19 @@
+import './DevTools.css'
+
+/**
+ * DevTools
+ */
+export const DevTools = () => {
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  return (
+    <main>
+      <h3>DevTools Page</h3>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
+      </a>
+    </main>
+  )
+}
+
+export default DevTools
diff --git a/template-solid-ts/src/devtools/index.css b/template-solid-ts/src/devtools/index.css
new file mode 100644
index 0000000..538e457
--- /dev/null
+++ b/template-solid-ts/src/devtools/index.css
@@ -0,0 +1,28 @@
+: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) {
+  :root {
+    background-color: #fafafa;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0;
+}
diff --git a/template-solid-ts/src/devtools/index.tsx b/template-solid-ts/src/devtools/index.tsx
new file mode 100644
index 0000000..89ebe24
--- /dev/null
+++ b/template-solid-ts/src/devtools/index.tsx
@@ -0,0 +1,11 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import { DevTools } from './DevTools'
+
+render(() => <DevTools />, document.getElementById('app') ?? document.body)
+
+chrome.devtools.panels.create('SolidCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
diff --git a/template-solid-ts/src/manifest.ts b/template-solid-ts/src/manifest.ts
index 9f63f01..60c644a 100644
--- a/template-solid-ts/src/manifest.ts
+++ b/template-solid-ts/src/manifest.ts
@@ -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.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-solid-ts/src/newtab/NewTab.css b/template-solid-ts/src/newtab/NewTab.css
new file mode 100644
index 0000000..fbfaaea
--- /dev/null
+++ b/template-solid-ts/src/newtab/NewTab.css
@@ -0,0 +1,34 @@
+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: #142d61;
+  text-transform: uppercase;
+  font-size: 6rem;
+  margin: 2rem auto;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
diff --git a/template-solid-ts/src/newtab/NewTab.tsx b/template-solid-ts/src/newtab/NewTab.tsx
new file mode 100644
index 0000000..d6d440d
--- /dev/null
+++ b/template-solid-ts/src/newtab/NewTab.tsx
@@ -0,0 +1,36 @@
+import { createSignal, onCleanup } from 'solid-js'
+
+import './NewTab.css'
+
+/**
+ * NewTab
+ */
+export const NewTab = () => {
+  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}`
+  }
+
+  const [time, setTime] = createSignal(getTime())
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  let interval = setInterval(() => {
+    setTime(getTime())
+  }, 1000)
+
+  onCleanup(() => clearInterval(interval))
+
+  return (
+    <section>
+      <span></span>
+      <h1>{time()}</h1>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
+      </a>
+    </section>
+  )
+}
+
+export default NewTab
diff --git a/template-solid-ts/src/newtab/index.css b/template-solid-ts/src/newtab/index.css
new file mode 100644
index 0000000..538e457
--- /dev/null
+++ b/template-solid-ts/src/newtab/index.css
@@ -0,0 +1,28 @@
+: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) {
+  :root {
+    background-color: #fafafa;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0;
+}
diff --git a/template-solid-ts/src/newtab/index.tsx b/template-solid-ts/src/newtab/index.tsx
new file mode 100644
index 0000000..3d75b19
--- /dev/null
+++ b/template-solid-ts/src/newtab/index.tsx
@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import { NewTab } from './NewTab'
+
+render(() => <NewTab />, document.getElementById('app') ?? document.body)
diff --git a/template-solid-js/src/options/Options.module.css b/template-solid-ts/src/options/Options.css
similarity index 88%
rename from template-solid-js/src/options/Options.module.css
rename to template-solid-ts/src/options/Options.css
index 3316cfc..80eeb85 100644
--- a/template-solid-js/src/options/Options.module.css
+++ b/template-solid-ts/src/options/Options.css
@@ -3,6 +3,12 @@
     'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #142d61;
+  }
+}
+
 main {
   text-align: center;
   padding: 1em;
diff --git a/template-solid-ts/src/options/Options.tsx b/template-solid-ts/src/options/Options.tsx
index 8f8c01a..1d38de8 100644
--- a/template-solid-ts/src/options/Options.tsx
+++ b/template-solid-ts/src/options/Options.tsx
@@ -1,20 +1,32 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createEffect } from 'solid-js'
 
-import './Options.module.css'
+import './Options.css'
 
 /**
- * Options component.
+ * Options
  */
 export const Options = () => {
-  const [crx] = createSignal('create-chrome-ext')
-  return (
-    <main>
-      <h3>Options Page!</h3>
+  const [countSync, setCountSync] = createSignal(0)
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  createEffect(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      setCountSync(result.count || 0)
+    })
 
-      <h6>v 0.0.0</h6>
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        setCountSync(request.count || 0)
+      }
+    })
+  }, [])
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
+  return (
+    <main>
+      <h3>Options Page</h3>
+      <h4>Count from Popup: {countSync()}</h4>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
       </a>
     </main>
   )
diff --git a/template-solid-ts/src/options/index.css b/template-solid-ts/src/options/index.css
index 8a3e44d..538e457 100644
--- a/template-solid-ts/src/options/index.css
+++ b/template-solid-ts/src/options/index.css
@@ -1,30 +1,28 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   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;
+    background-color: #fafafa;
   }
 }
 
 body {
   min-width: 20rem;
+  margin: 0;
 }
diff --git a/template-solid-ts/src/popup/Popup.css b/template-solid-ts/src/popup/Popup.css
new file mode 100644
index 0000000..7defc91
--- /dev/null
+++ b/template-solid-ts/src/popup/Popup.css
@@ -0,0 +1,53 @@
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #142d61;
+  }
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #142d61;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+.calc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem;
+
+  & > button {
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid #142d61;
+    border-radius: 0.25rem;
+    background-color: transparent;
+    color: #142d61;
+    cursor: pointer;
+    outline: none;
+
+    width: 3rem;
+    margin: 0 a;
+  }
+
+  & > label {
+    font-size: 1.5rem;
+    margin: 0 1rem;
+  }
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
diff --git a/template-solid-ts/src/popup/Popup.module.css b/template-solid-ts/src/popup/Popup.module.css
deleted file mode 100644
index 3316cfc..0000000
--- a/template-solid-ts/src/popup/Popup.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-: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: #142d61;
-  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-solid-ts/src/popup/Popup.tsx b/template-solid-ts/src/popup/Popup.tsx
index 04f4e86..bf898f3 100644
--- a/template-solid-ts/src/popup/Popup.tsx
+++ b/template-solid-ts/src/popup/Popup.tsx
@@ -1,20 +1,49 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createEffect } from 'solid-js'
 
-import './Popup.module.css'
+import './Popup.css'
 
 /**
- * Popup component.
+ * Popup
  */
 export const Popup = () => {
-  const [crx] = createSignal('create-chrome-ext')
-  return (
-    <main>
-      <h3>Popup Page!</h3>
+  const [count, setCount] = createSignal(0)
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  const minus = () => {
+    if (count() > 0) setCount(count() - 1)
+  }
+
+  const add = () => setCount(count() + 1)
 
-      <h6>v 0.0.0</h6>
+  createEffect(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      setCount(result.count || 0)
+    })
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        setCount(request.count || 0)
+      }
+    })
+  }, [])
+
+  createEffect(() => {
+    chrome.storage.sync.set({ count })
+    chrome.runtime.sendMessage({ type: 'COUNT', count })
+  }, [count])
+
+  return (
+    <main>
+      <h3>Popup Page</h3>
+      <div class="calc">
+        <button onClick={minus} disabled={count() <= 0}>
+          -
+        </button>
+        <label>{count()}</label>
+        <button onClick={add}>+</button>
+      </div>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
       </a>
     </main>
   )
diff --git a/template-solid-ts/src/popup/index.css b/template-solid-ts/src/popup/index.css
index 8a3e44d..538e457 100644
--- a/template-solid-ts/src/popup/index.css
+++ b/template-solid-ts/src/popup/index.css
@@ -1,30 +1,28 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   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;
+    background-color: #fafafa;
   }
 }
 
 body {
   min-width: 20rem;
+  margin: 0;
 }
diff --git a/template-solid-ts/src/sidepanel/Sidepanel.css b/template-solid-ts/src/sidepanel/Sidepanel.css
new file mode 100644
index 0000000..beeb79a
--- /dev/null
+++ b/template-solid-ts/src/sidepanel/Sidepanel.css
@@ -0,0 +1,27 @@
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #142d61;
+  }
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #142d61;
+  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;
+}
diff --git a/template-solid-ts/src/sidepanel/Sidepanel.module.css b/template-solid-ts/src/sidepanel/Sidepanel.module.css
deleted file mode 100644
index 3316cfc..0000000
--- a/template-solid-ts/src/sidepanel/Sidepanel.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-: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: #142d61;
-  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-solid-ts/src/sidepanel/Sidepanel.tsx b/template-solid-ts/src/sidepanel/Sidepanel.tsx
index 4a1f795..41ecfd2 100644
--- a/template-solid-ts/src/sidepanel/Sidepanel.tsx
+++ b/template-solid-ts/src/sidepanel/Sidepanel.tsx
@@ -1,20 +1,32 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createEffect } from 'solid-js'
 
-import './Sidepanel.module.css'
+import './Sidepanel.css'
 
 /**
- * Popup component.
+ * SidePanel
  */
 export const Sidepanel = () => {
-  const [crx] = createSignal('create-chrome-ext')
-  return (
-    <main>
-      <h3>Side Panel Page!</h3>
+  const [countSync, setCountSync] = createSignal(0)
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  createEffect(() => {
+    chrome.storage.sync.get(['count'], (result) => {
+      setCountSync(result.count || 0)
+    })
 
-      <h6>v 0.0.0</h6>
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        setCountSync(request.count || 0)
+      }
+    })
+  }, [])
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
+  return (
+    <main>
+      <h3>SidePanel Page</h3>
+      <h4>Count from Popup: {countSync()}</h4>
+      <a href={link} target="_blank">
+        generated by create-chrome-ext
       </a>
     </main>
   )
diff --git a/template-solid-ts/src/sidepanel/index.css b/template-solid-ts/src/sidepanel/index.css
index 8a3e44d..538e457 100644
--- a/template-solid-ts/src/sidepanel/index.css
+++ b/template-solid-ts/src/sidepanel/index.css
@@ -1,30 +1,28 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   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;
+    background-color: #fafafa;
   }
 }
 
 body {
   min-width: 20rem;
+  margin: 0;
 }
diff --git a/template-solid-ts/src/sidepanel/index.tsx b/template-solid-ts/src/sidepanel/index.tsx
index dce6964..97ac881 100644
--- a/template-solid-ts/src/sidepanel/index.tsx
+++ b/template-solid-ts/src/sidepanel/index.tsx
@@ -4,4 +4,4 @@ import { render } from 'solid-js/web'
 import './index.css'
 import { Sidepanel } from './Sidepanel'
 
-render(() => <Sidepanel />, document.getElementById('app') ?? document.body)
+render(() => <Sidepanel />, (document.getElementById('app') as HTMLElement) ?? document.body)