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

guocaoyi · Oct 14, 2023 · 088410a · 088410a
1 parent 07ec13a
commit 088410a
Show file tree

Hide file tree

Showing 66 changed files with 917 additions and 321 deletions.
diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md
@@ -1,6 +1,6 @@
 # Create Chrome Extension (.crx)
 
-![crx-preview](./docs/crx-preview.png)
+![crx-preview](./img/crx-preview.png)
 [![OSCS Status](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
 [![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
 [![npm-download](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)

diff --git a/template-react-js/devtools.html b/template-react-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 + React + JS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/devtools/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-react-js/newtab.html b/template-react-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 + React + JS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/newtab/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-react-js/options.html b/template-react-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 + React + JS + Vite App - Options</title>
+    <title>Chrome Extension + React + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-react-js/popup.html b/template-react-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 + React + JS + Vite App - Popup</title>
+    <title>Chrome Extension + React + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-react-js/sidepanel.html b/template-react-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 + React + JS + Vite App - SidePanel</title>
+    <title>Chrome Extension + React + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-react-js/src/background/index.js b/template-react-js/src/background/index.js
@@ -1,3 +1,7 @@
-console.info('chrome-ext template-react-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-react-js/src/content/index.js b/template-react-js/src/content/index.js
diff --git a/template-react-js/src/contentScript/index.js b/template-react-js/src/contentScript/index.js
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-react-js/src/devtools/DevTools.css b/template-react-js/src/devtools/DevTools.css
@@ -0,0 +1,31 @@
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #61dafb;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #61dafb;
+  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-react-js/src/devtools/DevTools.jsx b/template-react-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-react-js/src/devtools/index.css b/template-react-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-react-js/src/devtools/index.jsx b/template-react-js/src/devtools/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { DevTools } from './DevTools'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('app')).render(
+  <React.StrictMode>
+    <DevTools />
+  </React.StrictMode>,
+)
+
+chrome.devtools.panels.create('ReactCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
diff --git a/template-react-js/src/manifest.js b/template-react-js/src/manifest.js
@@ -2,7 +2,7 @@ import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json' assert { type: 'json' }
 
 export default defineManifest({
-  name: packageData.displayName,
+  name: packageData.name,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
@@ -17,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: {
@@ -36,5 +37,8 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: ['sidePanel'],
+  permissions: ['sidePanel', 'storage'],
+  chrome_url_overrides: {
+    newtab: 'newtab.html',
+  },
 })
diff --git a/template-react-js/src/newtab/NewTab.css b/template-react-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: #61dafb;
+  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-react-js/src/newtab/NewTab.jsx b/template-react-js/src/newtab/NewTab.jsx
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+
+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] = useState(getTime())
+  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  useEffect(() => {
+    let intervalId = setInterval(() => {
+      setTime(getTime())
+    }, 1000)
+
+    return () => {
+      clearInterval(intervalId)
+    }
+  }, [])
+
+  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-react-js/src/newtab/index.css b/template-react-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-react-js/src/newtab/index.jsx b/template-react-js/src/newtab/index.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { NewTab } from './NewTab'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('app')).render(
+  <React.StrictMode>
+    <NewTab />
+  </React.StrictMode>,
+)
diff --git a/template-react-js/src/options/Options.css b/template-react-js/src/options/Options.css
@@ -1,16 +1,11 @@
-#root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #61dafb;
+  }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+body {
+  min-width: 20rem;
 }
 
 main {
@@ -28,21 +23,9 @@ h3 {
   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;
-  }
-}