feat(solid):out of box functions, countor \ newtab timer \ events

guocaoyi · Oct 14, 2023 · eccc5e8 · eccc5e8
1 parent 0aceb9b
commit eccc5e8
Show file tree

Hide file tree

Showing 57 changed files with 858 additions and 271 deletions.
diff --git a/template-solid-js/devtools.html 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/template-solid-js/src/contentScript/index.js 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 → template-solid-js/src/devtools/DevTools.css b/template-solid-js/src/popup/Popup.module.css → 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
@@ -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
@@ -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
@@ -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
@@ -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,14 +17,15 @@ 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',
   },
   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
@@ -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
@@ -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
@@ -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
@@ -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/...e-solid-ts/src/options/Options.module.css → template-solid-js/src/options/Options.css b/...e-solid-ts/src/options/Options.module.css → 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
@@ -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>
   )