diff --git a/template-preact-js/devtools.html b/template-preact-js/devtools.html new file mode 100644 index 0000000..3ca7777 --- /dev/null +++ b/template-preact-js/devtools.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Preact + JS + Vite + + + +
+ + + diff --git a/template-preact-js/newtab.html b/template-preact-js/newtab.html new file mode 100644 index 0000000..c0d901a --- /dev/null +++ b/template-preact-js/newtab.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Preact + JS + Vite + + + +
+ + + diff --git a/template-preact-js/options.html b/template-preact-js/options.html index b6f99c0..59b9723 100644 --- a/template-preact-js/options.html +++ b/template-preact-js/options.html @@ -4,7 +4,7 @@ - Chrome Extension + Preact + JS + Vite App - Options + Chrome Extension + Preact + JS + Vite
diff --git a/template-preact-js/package.json b/template-preact-js/package.json index b5d1500..d863bd9 100644 --- a/template-preact-js/package.json +++ b/template-preact-js/package.json @@ -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" } diff --git a/template-preact-js/popup.html b/template-preact-js/popup.html index b8e7bb0..7a57864 100644 --- a/template-preact-js/popup.html +++ b/template-preact-js/popup.html @@ -4,7 +4,7 @@ - Chrome Extension + Preact + JS + Vite App - Popup + Chrome Extension + Preact + JS + Vite
diff --git a/template-preact-js/sidepanel.html b/template-preact-js/sidepanel.html index 34bed45..c7c0856 100644 --- a/template-preact-js/sidepanel.html +++ b/template-preact-js/sidepanel.html @@ -2,9 +2,9 @@ - + - Chrome Extension + Preact + JS + Vite App - SidePanel + Chrome Extension + Preact + JS + Vite
diff --git a/template-preact-js/src/background/index.js b/template-preact-js/src/background/index.js index 88af08b..4a0687b 100644 --- a/template-preact-js/src/background/index.js +++ b/template-preact-js/src/background/index.js @@ -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) + } +}) diff --git a/template-preact-js/src/content/index.js b/template-preact-js/src/content/index.js deleted file mode 100644 index ea68f32..0000000 --- a/template-preact-js/src/content/index.js +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-preact-js content script') - -export {} diff --git a/template-preact-js/src/contentScript/index.js b/template-preact-js/src/contentScript/index.js new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ b/template-preact-js/src/contentScript/index.js @@ -0,0 +1 @@ +console.info('contentScript is running') diff --git a/template-preact-js/src/devtools/DevTools.css b/template-preact-js/src/devtools/DevTools.css new file mode 100644 index 0000000..886a646 --- /dev/null +++ b/template-preact-js/src/devtools/DevTools.css @@ -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; +} diff --git a/template-preact-js/src/devtools/DevTools.jsx b/template-preact-js/src/devtools/DevTools.jsx new file mode 100644 index 0000000..a9b2be5 --- /dev/null +++ b/template-preact-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 ( +
+

DevTools Page

+ + generated by create-chrome-ext + +
+ ) +} + +export default DevTools diff --git a/template-preact-js/src/devtools/index.css b/template-preact-js/src/devtools/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-preact-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-preact-js/src/devtools/index.jsx b/template-preact-js/src/devtools/index.jsx new file mode 100644 index 0000000..06edd25 --- /dev/null +++ b/template-preact-js/src/devtools/index.jsx @@ -0,0 +1,9 @@ +import { render } from 'preact' +import { DevTools } from './DevTools' +import './index.css' + +render(, document.getElementById('app')) + +chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () { + console.log('devtools panel create') +}) diff --git a/template-preact-js/src/manifest.js b/template-preact-js/src/manifest.js index 54ea3b2..c00a230 100644 --- a/template-preact-js/src/manifest.js +++ b/template-preact-js/src/manifest.js @@ -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', @@ -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-preact-js/src/newtab/NewTab.css b/template-preact-js/src/newtab/NewTab.css new file mode 100644 index 0000000..43176f3 --- /dev/null +++ b/template-preact-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: #673ab8; + 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-preact-js/src/newtab/NewTab.jsx b/template-preact-js/src/newtab/NewTab.jsx new file mode 100644 index 0000000..72293b7 --- /dev/null +++ b/template-preact-js/src/newtab/NewTab.jsx @@ -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 ( +
+ +

{time}

+ + generated by create-chrome-ext + +
+ ) +} + +export default NewTab diff --git a/template-preact-js/src/newtab/index.css b/template-preact-js/src/newtab/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-preact-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-preact-js/src/newtab/index.jsx b/template-preact-js/src/newtab/index.jsx new file mode 100644 index 0000000..191cb6c --- /dev/null +++ b/template-preact-js/src/newtab/index.jsx @@ -0,0 +1,5 @@ +import { render } from 'preact' +import { NewTab } from './NewTab' +import './index.css' + +render(, document.getElementById('app')) diff --git a/template-preact-js/src/options/Options.css b/template-preact-js/src/options/Options.css index 0ec43d5..886a646 100644 --- a/template-preact-js/src/options/Options.css +++ b/template-preact-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: #673ab8; + } } -@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; - } -} diff --git a/template-preact-js/src/options/Options.jsx b/template-preact-js/src/options/Options.jsx index e371685..05e31e0 100644 --- a/template-preact-js/src/options/Options.jsx +++ b/template-preact-js/src/options/Options.jsx @@ -1,17 +1,29 @@ -import { useState } from 'preact/hooks' +import { useState, useEffect } from 'preact/hooks' + import './Options.css' export const Options = () => { - const [crx, setCrx] = useState('create-chrome-ext') + const [countSync, setCountSync] = useState(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' - return ( -
-

Options Page!

+ useEffect(() => { + chrome.storage.sync.get(['count'], (result) => { + setCountSync(result.count || 0) + }) -
v 0.0.0
+ chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + setCountSync(request.count || 0) + } + }) + }, []) - - Power by {crx} + return ( +
+

Options Page

+

Count from Popup: {countSync}

+ + generated by create-chrome-ext
) diff --git a/template-preact-js/src/options/index.css b/template-preact-js/src/options/index.css index 4748300..538e457 100644 --- a/template-preact-js/src/options/index.css +++ b/template-preact-js/src/options/index.css @@ -1,26 +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-preact-js/src/popup/Popup.css b/template-preact-js/src/popup/Popup.css index c5cfc48..c87cb3a 100644 --- a/template-preact-js/src/popup/Popup.css +++ b/template-preact-js/src/popup/Popup.css @@ -1,6 +1,7 @@ -: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: #673ab8; + } } main { @@ -18,10 +19,30 @@ h3 { margin: 2rem auto; } -h6 { - font-size: 0.5rem; - color: #333333; - margin: 0.5rem; +.calc { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem; + + & > button { + font-size: 1rem; + padding: 0.5rem 1rem; + border: 1px solid #673ab8; + border-radius: 0.25rem; + background-color: transparent; + color: #673ab8; + cursor: pointer; + outline: none; + + width: 3rem; + margin: 0 a; + } + + & > label { + font-size: 1.5rem; + margin: 0 1rem; + } } a { @@ -30,9 +51,3 @@ a { color: #cccccc; text-decoration: none; } - -@media (min-width: 480px) { - h3 { - max-width: none; - } -} diff --git a/template-preact-js/src/popup/Popup.jsx b/template-preact-js/src/popup/Popup.jsx index 01b0e56..d481e36 100644 --- a/template-preact-js/src/popup/Popup.jsx +++ b/template-preact-js/src/popup/Popup.jsx @@ -1,17 +1,46 @@ -import { useState } from 'preact/hooks' +import { useState, useEffect } from 'preact/hooks' + import './Popup.css' export const Popup = () => { - const [crx, setCrx] = useState('create-chrome-ext') + const [count, setCount] = useState(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' - return ( -
-

Popup Page!

+ const minus = () => { + if (count > 0) setCount(count - 1) + } + + const add = () => setCount(count + 1) -
v 0.0.0
+ useEffect(() => { + chrome.storage.sync.get(['count'], (result) => { + setCount(result.count || 0) + }) - - Power by {crx} + chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + setCount(request.count || 0) + } + }) + }, []) + + useEffect(() => { + chrome.storage.sync.set({ count }) + chrome.runtime.sendMessage({ type: 'COUNT', count }) + }, [count]) + + return ( +
+

Popup Page

+
+ + + +
+ + generated by create-chrome-ext
) diff --git a/template-preact-js/src/popup/index.css b/template-preact-js/src/popup/index.css index 8a3e44d..538e457 100644 --- a/template-preact-js/src/popup/index.css +++ b/template-preact-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-preact-js/src/sidepanel/Sidepanel.css b/template-preact-js/src/sidepanel/Sidepanel.css index c5cfc48..e96fc29 100644 --- a/template-preact-js/src/sidepanel/Sidepanel.css +++ b/template-preact-js/src/sidepanel/Sidepanel.css @@ -1,6 +1,7 @@ -: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: #673ab8; + } } main { @@ -18,21 +19,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; - } -} diff --git a/template-preact-js/src/sidepanel/Sidepanel.jsx b/template-preact-js/src/sidepanel/Sidepanel.jsx index 4145c55..689d4f2 100644 --- a/template-preact-js/src/sidepanel/Sidepanel.jsx +++ b/template-preact-js/src/sidepanel/Sidepanel.jsx @@ -1,20 +1,32 @@ -import { useState } from 'preact/hooks' -import './Sidepanel.css' +import { useState, useEffect } from 'preact/hooks' -export const Sidepanel = () => { - const [crx, setCrx] = useState('create-chrome-ext') +import './SidePanel.css' - return ( -
-

Side Panel Page!

+export const SidePanel = () => { + const [countSync, setCountSync] = useState(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' + + useEffect(() => { + chrome.storage.sync.get(['count'], (result) => { + setCountSync(result.count || 0) + }) -
v 0.0.0
+ chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + setCountSync(request.count || 0) + } + }) + }, []) - - Power by {crx} + return ( +
+

SidePanel Page

+

Count from Popup: {countSync}

+ + generated by create-chrome-ext
) } -export default Sidepanel +export default SidePanel diff --git a/template-preact-js/src/sidepanel/index.css b/template-preact-js/src/sidepanel/index.css index 8a3e44d..538e457 100644 --- a/template-preact-js/src/sidepanel/index.css +++ b/template-preact-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-preact-js/src/sidepanel/index.jsx b/template-preact-js/src/sidepanel/index.jsx index a85814f..153803f 100644 --- a/template-preact-js/src/sidepanel/index.jsx +++ b/template-preact-js/src/sidepanel/index.jsx @@ -1,5 +1,5 @@ import { render } from 'preact' -import { Sidepanel } from './Sidepanel' +import { SidePanel } from './SidePanel' import './index.css' -render(, document.getElementById('app')) +render(, document.getElementById('app')) diff --git a/template-preact-ts/devtools.html b/template-preact-ts/devtools.html new file mode 100644 index 0000000..9b91923 --- /dev/null +++ b/template-preact-ts/devtools.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Preact + TS + Vite + + + +
+ + + diff --git a/template-preact-ts/newtab.html b/template-preact-ts/newtab.html new file mode 100644 index 0000000..d017044 --- /dev/null +++ b/template-preact-ts/newtab.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Preact + TS + Vite + + + +
+ + + diff --git a/template-preact-ts/options.html b/template-preact-ts/options.html index ed2c2b4..9cd0048 100644 --- a/template-preact-ts/options.html +++ b/template-preact-ts/options.html @@ -4,7 +4,7 @@ - Chrome Extension + Preact + TS + Vite App - Options + Chrome Extension + Preact + TS + Vite
diff --git a/template-preact-ts/package.json b/template-preact-ts/package.json index a034a91..aa694f5 100644 --- a/template-preact-ts/package.json +++ b/template-preact-ts/package.json @@ -25,7 +25,7 @@ }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "@preact/preset-vite": "^2.5.0", + "@preact/preset-vite": "^2.6.0", "@types/chrome": "^0.0.246", "prettier": "^3.0.3", "typescript": "^5.2.2", diff --git a/template-preact-ts/popup.html b/template-preact-ts/popup.html index da08950..819aa1b 100644 --- a/template-preact-ts/popup.html +++ b/template-preact-ts/popup.html @@ -4,7 +4,7 @@ - Chrome Extension + Preact + TS + Vite App - Popup + Chrome Extension + Preact + TS + Vite
diff --git a/template-preact-ts/sidepanel.html b/template-preact-ts/sidepanel.html index fef0c13..059e799 100644 --- a/template-preact-ts/sidepanel.html +++ b/template-preact-ts/sidepanel.html @@ -2,9 +2,9 @@ - + - Chrome Extension + Preact + TS + Vite App - SidePanel + Chrome Extension + Preact + TS + Vite
diff --git a/template-preact-ts/src/background/index.ts b/template-preact-ts/src/background/index.ts index 7aa479a..4a0687b 100644 --- a/template-preact-ts/src/background/index.ts +++ b/template-preact-ts/src/background/index.ts @@ -1,3 +1,7 @@ -console.info('chrome-ext template-preact-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-preact-ts/src/content/index.ts b/template-preact-ts/src/content/index.ts deleted file mode 100644 index 0174946..0000000 --- a/template-preact-ts/src/content/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-preact-ts content script') - -export {} diff --git a/template-preact-ts/src/contentScript/index.ts b/template-preact-ts/src/contentScript/index.ts new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ b/template-preact-ts/src/contentScript/index.ts @@ -0,0 +1 @@ +console.info('contentScript is running') diff --git a/template-preact-ts/src/devtools/DevTools.css b/template-preact-ts/src/devtools/DevTools.css new file mode 100644 index 0000000..886a646 --- /dev/null +++ b/template-preact-ts/src/devtools/DevTools.css @@ -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; +} diff --git a/template-preact-ts/src/devtools/DevTools.tsx b/template-preact-ts/src/devtools/DevTools.tsx new file mode 100644 index 0000000..a9b2be5 --- /dev/null +++ b/template-preact-ts/src/devtools/DevTools.tsx @@ -0,0 +1,16 @@ +import './DevTools.css' + +export const DevTools = () => { + const link = 'https://github.com/guocaoyi/create-chrome-ext' + + return ( +
+

DevTools Page

+ + generated by create-chrome-ext + +
+ ) +} + +export default DevTools diff --git a/template-preact-ts/src/devtools/index.css b/template-preact-ts/src/devtools/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-preact-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-preact-ts/src/devtools/index.tsx b/template-preact-ts/src/devtools/index.tsx new file mode 100644 index 0000000..e7adef2 --- /dev/null +++ b/template-preact-ts/src/devtools/index.tsx @@ -0,0 +1,9 @@ +import { render } from 'preact' +import { DevTools } from './DevTools' +import './index.css' + +render(, document.getElementById('app') as HTMLElement) + +chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () { + console.log('devtools panel create') +}) diff --git a/template-preact-ts/src/manifest.ts b/template-preact-ts/src/manifest.ts index bc1eee2..60c644a 100644 --- a/template-preact-ts/src/manifest.ts +++ b/template-preact-ts/src/manifest.ts @@ -1,21 +1,23 @@ 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', - '32': 'img/logo-34.png', - '48': 'img/logo-48.png', - '128': 'img/logo-128.png', + 16: 'img/logo-16.png', + 32: 'img/logo-34.png', + 48: 'img/logo-48.png', + 128: 'img/logo-128.png', }, action: { default_popup: 'popup.html', 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-preact-ts/src/newtab/NewTab.css b/template-preact-ts/src/newtab/NewTab.css new file mode 100644 index 0000000..43176f3 --- /dev/null +++ b/template-preact-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: #673ab8; + 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-preact-ts/src/newtab/NewTab.tsx b/template-preact-ts/src/newtab/NewTab.tsx new file mode 100644 index 0000000..72293b7 --- /dev/null +++ b/template-preact-ts/src/newtab/NewTab.tsx @@ -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 ( +
+ +

{time}

+ + generated by create-chrome-ext + +
+ ) +} + +export default NewTab diff --git a/template-preact-ts/src/newtab/index.css b/template-preact-ts/src/newtab/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-preact-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-preact-ts/src/newtab/index.tsx b/template-preact-ts/src/newtab/index.tsx new file mode 100644 index 0000000..3656ce4 --- /dev/null +++ b/template-preact-ts/src/newtab/index.tsx @@ -0,0 +1,5 @@ +import { render } from 'preact' +import { NewTab } from './NewTab' +import './index.css' + +render(, document.getElementById('app') as HTMLElement) diff --git a/template-preact-ts/src/options/Options.css b/template-preact-ts/src/options/Options.css index 0ec43d5..886a646 100644 --- a/template-preact-ts/src/options/Options.css +++ b/template-preact-ts/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: #673ab8; + } } -@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; - } -} diff --git a/template-preact-ts/src/options/Options.tsx b/template-preact-ts/src/options/Options.tsx index e371685..05e31e0 100644 --- a/template-preact-ts/src/options/Options.tsx +++ b/template-preact-ts/src/options/Options.tsx @@ -1,17 +1,29 @@ -import { useState } from 'preact/hooks' +import { useState, useEffect } from 'preact/hooks' + import './Options.css' export const Options = () => { - const [crx, setCrx] = useState('create-chrome-ext') + const [countSync, setCountSync] = useState(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' - return ( -
-

Options Page!

+ useEffect(() => { + chrome.storage.sync.get(['count'], (result) => { + setCountSync(result.count || 0) + }) -
v 0.0.0
+ chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + setCountSync(request.count || 0) + } + }) + }, []) - - Power by {crx} + return ( +
+

Options Page

+

Count from Popup: {countSync}

+ + generated by create-chrome-ext
) diff --git a/template-preact-ts/src/options/index.css b/template-preact-ts/src/options/index.css index 4748300..538e457 100644 --- a/template-preact-ts/src/options/index.css +++ b/template-preact-ts/src/options/index.css @@ -1,26 +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-preact-ts/src/popup/Popup.css b/template-preact-ts/src/popup/Popup.css index c5cfc48..c87cb3a 100644 --- a/template-preact-ts/src/popup/Popup.css +++ b/template-preact-ts/src/popup/Popup.css @@ -1,6 +1,7 @@ -: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: #673ab8; + } } main { @@ -18,10 +19,30 @@ h3 { margin: 2rem auto; } -h6 { - font-size: 0.5rem; - color: #333333; - margin: 0.5rem; +.calc { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem; + + & > button { + font-size: 1rem; + padding: 0.5rem 1rem; + border: 1px solid #673ab8; + border-radius: 0.25rem; + background-color: transparent; + color: #673ab8; + cursor: pointer; + outline: none; + + width: 3rem; + margin: 0 a; + } + + & > label { + font-size: 1.5rem; + margin: 0 1rem; + } } a { @@ -30,9 +51,3 @@ a { color: #cccccc; text-decoration: none; } - -@media (min-width: 480px) { - h3 { - max-width: none; - } -} diff --git a/template-preact-ts/src/popup/Popup.tsx b/template-preact-ts/src/popup/Popup.tsx index 01b0e56..d481e36 100644 --- a/template-preact-ts/src/popup/Popup.tsx +++ b/template-preact-ts/src/popup/Popup.tsx @@ -1,17 +1,46 @@ -import { useState } from 'preact/hooks' +import { useState, useEffect } from 'preact/hooks' + import './Popup.css' export const Popup = () => { - const [crx, setCrx] = useState('create-chrome-ext') + const [count, setCount] = useState(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' - return ( -
-

Popup Page!

+ const minus = () => { + if (count > 0) setCount(count - 1) + } + + const add = () => setCount(count + 1) -
v 0.0.0
+ useEffect(() => { + chrome.storage.sync.get(['count'], (result) => { + setCount(result.count || 0) + }) - - Power by {crx} + chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + setCount(request.count || 0) + } + }) + }, []) + + useEffect(() => { + chrome.storage.sync.set({ count }) + chrome.runtime.sendMessage({ type: 'COUNT', count }) + }, [count]) + + return ( +
+

Popup Page

+
+ + + +
+ + generated by create-chrome-ext
) diff --git a/template-preact-ts/src/popup/index.css b/template-preact-ts/src/popup/index.css index 8a3e44d..538e457 100644 --- a/template-preact-ts/src/popup/index.css +++ b/template-preact-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-preact-ts/src/sidepanel/Sidepanel.css b/template-preact-ts/src/sidepanel/Sidepanel.css index c5cfc48..e96fc29 100644 --- a/template-preact-ts/src/sidepanel/Sidepanel.css +++ b/template-preact-ts/src/sidepanel/Sidepanel.css @@ -1,6 +1,7 @@ -: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: #673ab8; + } } main { @@ -18,21 +19,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; - } -} diff --git a/template-preact-ts/src/sidepanel/Sidepanel.tsx b/template-preact-ts/src/sidepanel/Sidepanel.tsx index 9f61f56..689d4f2 100644 --- a/template-preact-ts/src/sidepanel/Sidepanel.tsx +++ b/template-preact-ts/src/sidepanel/Sidepanel.tsx @@ -1,20 +1,32 @@ -import { useState } from 'preact/hooks' -import './Sidepanel.css' +import { useState, useEffect } from 'preact/hooks' -export const Sidepanel = () => { - const [crx] = useState('create-chrome-ext') +import './SidePanel.css' - return ( -
-

Side Panel Page!

+export const SidePanel = () => { + const [countSync, setCountSync] = useState(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' + + useEffect(() => { + chrome.storage.sync.get(['count'], (result) => { + setCountSync(result.count || 0) + }) -
v 0.0.0
+ chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + setCountSync(request.count || 0) + } + }) + }, []) - - Power by {crx} + return ( +
+

SidePanel Page

+

Count from Popup: {countSync}

+ + generated by create-chrome-ext
) } -export default Sidepanel +export default SidePanel diff --git a/template-preact-ts/src/sidepanel/index.css b/template-preact-ts/src/sidepanel/index.css index 8a3e44d..538e457 100644 --- a/template-preact-ts/src/sidepanel/index.css +++ b/template-preact-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-preact-ts/src/sidepanel/index.tsx b/template-preact-ts/src/sidepanel/index.tsx index 5c896a8..62780c0 100644 --- a/template-preact-ts/src/sidepanel/index.tsx +++ b/template-preact-ts/src/sidepanel/index.tsx @@ -1,5 +1,5 @@ import { render } from 'preact' -import { Sidepanel } from './Sidepanel' +import { SidePanel } from './SidePanel' import './index.css' -render(, document.getElementById('app') as HTMLElement) +render(, document.getElementById('app') as HTMLElement) diff --git a/template-react-js/src/options/index.jsx b/template-react-js/src/options/index.jsx index a9ecd2a..f41b869 100644 --- a/template-react-js/src/options/index.jsx +++ b/template-react-js/src/options/index.jsx @@ -1,10 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './Options' +import { Options } from './Options' import './index.css' ReactDOM.createRoot(document.getElementById('app')).render( - + , )