Skip to content

Commit

Permalink
feat(preact):out of box functions, countor \ newtab timer \ events
Browse files Browse the repository at this point in the history
  • Loading branch information
guocaoyi committed Oct 14, 2023
1 parent 088410a commit 39c641c
Show file tree
Hide file tree
Showing 57 changed files with 815 additions and 293 deletions.
14 changes: 14 additions & 0 deletions template-preact-js/devtools.html
Original file line number Diff line number Diff line change
@@ -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 + Preact + JS + Vite</title>
</head>

<body>
<div id="app"></div>
<script type="module" src="./src/devtools/index.jsx"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions template-preact-js/newtab.html
Original file line number Diff line number Diff line change
@@ -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 + Preact + JS + Vite</title>
</head>

<body>
<div id="app"></div>
<script type="module" src="./src/newtab/index.jsx"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion template-preact-js/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 + Preact + JS + Vite App - Options</title>
<title>Chrome Extension + Preact + JS + Vite</title>
</head>
<body>
<div id="app"></div>
Expand Down
4 changes: 2 additions & 2 deletions template-preact-js/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
"fmt": "prettier --write '**/*.{jsx,js,json,css,scss,md}'"
},
"dependencies": {
"preact": "^10.8.2"
"preact": "^10.18.1"
},
"devDependencies": {
"@crxjs/vite-plugin": "^2.0.0-beta.19",
"@preact/preset-vite": "^2.5.0",
"@preact/preset-vite": "^2.6.0",
"prettier": "^3.0.3",
"vite": "^4.4.11"
}
Expand Down
2 changes: 1 addition & 1 deletion template-preact-js/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 + Preact + JS + Vite App - Popup</title>
<title>Chrome Extension + Preact + JS + Vite</title>
</head>
<body>
<div id="app"></div>
Expand Down
4 changes: 2 additions & 2 deletions template-preact-js/sidepanel.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 + Preact + JS + Vite App - SidePanel</title>
<title>Chrome Extension + Preact + JS + Vite</title>
</head>
<body>
<div id="app"></div>
Expand Down
8 changes: 6 additions & 2 deletions template-preact-js/src/background/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
console.info('chrome-ext template-preact-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)
}
})
3 changes: 0 additions & 3 deletions template-preact-js/src/content/index.js

This file was deleted.

1 change: 1 addition & 0 deletions template-preact-js/src/contentScript/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.info('contentScript is running')
31 changes: 31 additions & 0 deletions template-preact-js/src/devtools/DevTools.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
@media (prefers-color-scheme: light) {
a:hover {
color: #673ab8;
}
}

body {
min-width: 20rem;
}

main {
text-align: center;
padding: 1em;
margin: 0 auto;
}

h3 {
color: #673ab8;
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;
}
16 changes: 16 additions & 0 deletions template-preact-js/src/devtools/DevTools.jsx
Original file line number Diff line number Diff line change
@@ -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
28 changes: 28 additions & 0 deletions template-preact-js/src/devtools/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 9 additions & 0 deletions template-preact-js/src/devtools/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { render } from 'preact'
import { DevTools } from './DevTools'
import './index.css'

render(<DevTools />, document.getElementById('app'))

chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () {
console.log('devtools panel create')
})
15 changes: 10 additions & 5 deletions template-preact-js/src/manifest.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { defineManifest } from '@crxjs/vite-plugin'
import packageData from '../package.json' assert { type: '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',
Expand All @@ -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: {
Expand All @@ -35,5 +37,8 @@ export default defineManifest({
matches: [],
},
],
permissions: ['sidePanel'],
permissions: ['sidePanel', 'storage'],
chrome_url_overrides: {
newtab: 'newtab.html',
},
})
34 changes: 34 additions & 0 deletions template-preact-js/src/newtab/NewTab.css
Original file line number Diff line number Diff line change
@@ -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: #673ab8;
text-transform: uppercase;
font-size: 6rem;
margin: 2rem auto;
}

a {
font-size: 0.5rem;
margin: 0.5rem;
color: #cccccc;
text-decoration: none;
}
37 changes: 37 additions & 0 deletions template-preact-js/src/newtab/NewTab.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { useState, useEffect } from 'preact/hooks'

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
28 changes: 28 additions & 0 deletions template-preact-js/src/newtab/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions template-preact-js/src/newtab/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { render } from 'preact'
import { NewTab } from './NewTab'
import './index.css'

render(<NewTab />, document.getElementById('app'))
29 changes: 6 additions & 23 deletions template-preact-js/src/options/Options.css
Original file line number Diff line number Diff line change
@@ -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: #673ab8;
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
body {
min-width: 20rem;
}

main {
Expand All @@ -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;
}
}
Loading

0 comments on commit 39c641c

Please sign in to comment.