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

guocaoyi · Oct 16, 2023 · 19b1150 · 19b1150
1 parent d9339d2
commit 19b1150
Show file tree

Hide file tree

Showing 68 changed files with 856 additions and 262 deletions.
diff --git a/template-alpine-ts/src/popup/index.ts b/template-alpine-ts/src/popup/index.ts
@@ -0,0 +1,16 @@
+function counter() {
+  return {
+    count: 0,
+    init() {
+      setInterval(() => {
+        if (this.count > 0) {
+          this.count--
+        }
+        console.log(this.count)
+      }, 3000)
+    },
+    add() {
+      this.count++
+    },
+  }
+}
diff --git a/template-inferno-js/devtools.html b/template-inferno-js/devtools.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Inferno + JS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/devtools/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-inferno-js/newtab.html b/template-inferno-js/newtab.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Inferno + JS + Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/newtab/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-inferno-js/options.html b/template-inferno-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 + Inferno + JS + Vite App - Options</title>
+    <title>Chrome Extension + Inferno + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-inferno-js/package.json b/template-inferno-js/package.json
@@ -21,13 +21,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "inferno": "^8.0.1"
+    "inferno": "^8.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.x",
-    "@babel/parser": "7.x",
+    "@babel/core": "7.23.2",
+    "@babel/parser": "7.23.0",
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "vite": "^3.2.7",
+    "vite": "^4.4.11",
     "vite-plugin-inferno": "0.0.1"
   }
 }
diff --git a/template-inferno-js/popup.html b/template-inferno-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 + Inferno + JS + Vite App - Popup</title>
+    <title>Chrome Extension + Inferno + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-inferno-js/public/icons/logo.ico b/template-inferno-js/public/icons/logo.ico
diff --git a/template-inferno-js/public/icons/logo.svg b/template-inferno-js/public/icons/logo.svg
diff --git a/template-inferno-js/public/img/logo-128.png b/template-inferno-js/public/img/logo-128.png
diff --git a/template-inferno-js/public/img/logo-16.png b/template-inferno-js/public/img/logo-16.png
diff --git a/template-inferno-js/public/img/logo-34.png b/template-inferno-js/public/img/logo-34.png
diff --git a/template-inferno-js/public/img/logo-48.png b/template-inferno-js/public/img/logo-48.png
diff --git a/template-inferno-js/sidepanel.html b/template-inferno-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>Chrome Extension + Inferno + JS + Vite App - Side Panel</title>
+    <title>Chrome Extension + Inferno + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-inferno-js/src/assets/logo.png b/template-inferno-js/src/assets/logo.png
diff --git a/template-inferno-js/src/background/index.js b/template-inferno-js/src/background/index.js
@@ -1,3 +1,7 @@
-console.info('chrome-ext template-inferno-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-inferno-js/src/content/index.js b/template-inferno-js/src/content/index.js
diff --git a/template-inferno-js/src/contentScript/index.js b/template-inferno-js/src/contentScript/index.js
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-inferno-js/src/devtools/index.css b/template-inferno-js/src/devtools/index.css
@@ -0,0 +1,58 @@
+: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;
+  }
+
+  a:hover {
+    color: #dc0030;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0;
+}
+
+body {
+  min-width: 20rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #dc0030;
+  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-inferno-js/src/devtools/index.jsx b/template-inferno-js/src/devtools/index.jsx
@@ -0,0 +1,18 @@
+import { render } from 'inferno'
+import './index.css'
+
+const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+render(
+  <main>
+    <h3>DevTools Page</h3>
+    <a href={link} target="_blank">
+      generated by create-chrome-ext
+    </a>
+  </main>,
+  document.getElementById('app'),
+)
+
+chrome.devtools.panels.create('InfernoCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
diff --git a/template-inferno-js/src/manifest.js b/template-inferno-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-inferno-js/src/newtab/NewTab.css b/template-inferno-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: #dc0030;
+  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-inferno-js/src/newtab/NewTab.jsx b/template-inferno-js/src/newtab/NewTab.jsx
@@ -0,0 +1,43 @@
+import { Component } from 'inferno'
+import './NewTab.css'
+
+export class NewTab extends Component {
+  link = 'https://github.com/guocaoyi/create-chrome-ext'
+  intervalId = null
+
+  constructor(props) {
+    super(props)
+    this.state = { time: this.getTime() }
+  }
+
+  getTime = () => {
+    const date = new Date()
+    const hour = String(date.getHours()).padStart(2, '0')
+    const minute = String(date.getMinutes()).padStart(2, '0')
+    return `${hour}:${minute}`
+  }
+
+  componentDidMount() {
+    this.intervalId = setInterval(() => {
+      this.setState({ time: this.getTime() })
+    }, 1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.intervalId)
+  }
+
+  render() {
+    return (
+      <section>
+        <span></span>
+        <h1>{this.state.time}</h1>
+        <a href={this.link} target="_blank">
+          generated by create-chrome-ext
+        </a>
+      </section>
+    )
+  }
+}
+
+export default NewTab
diff --git a/template-inferno-js/src/newtab/index.css b/template-inferno-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-inferno-js/src/newtab/index.jsx b/template-inferno-js/src/newtab/index.jsx
@@ -0,0 +1,5 @@
+import { render } from 'inferno'
+import './index.css'
+import { NewTab } from './NewTab'
+
+render(<NewTab />, document.getElementById('app'))
diff --git a/template-inferno-js/src/options/Options.css b/template-inferno-js/src/options/Options.css
@@ -1,6 +1,11 @@
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #dc0030;
+  }
+}
+
+body {
+  min-width: 20rem;
 }
 
 main {
@@ -10,29 +15,17 @@ main {
 }
 
 h3 {
-  color: #d81e06;
+  color: #dc0030;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: 200;
   line-height: 1.2rem;
   margin: 2rem auto;
 }
 
-h6 {
-  font-size: 0.5rem;
-  color: #cccccc;
-  margin: 0.5rem;
-}
-
 a {
   font-size: 0.5rem;
   margin: 0.5rem;
   color: #cccccc;
   text-decoration: none;
 }
-
-@media (min-width: 480px) {
-  h3 {
-    max-width: none;
-  }
-}