diff --git a/CHANGELOG.md b/CHANGELOG.md index 194b6b1..cc0d6df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ Summary 5. version timestamp follow the yyyy.MM.dd format ``` -## 0.9.0 [xxxx.xx.xx] +## 0.9.0 [2023.10.15] - feat: depen version update, - feat: support devtools \ sidepanel \ newtab override diff --git a/docs/img/crx-preview.png b/docs/img/crx-preview.png index 0ad4a3d..9f391ef 100644 Binary files a/docs/img/crx-preview.png and b/docs/img/crx-preview.png differ diff --git a/package.json b/package.json index 7cf07d9..45c458c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-chrome-ext", - "version": "0.8.11", + "version": "0.9.0", "type": "module", "description": "Scaffolding your chrome extension, multiple boilerplates supported!", "author": "yalda", diff --git a/template-solid-js/devtools.html b/template-solid-js/devtools.html new file mode 100644 index 0000000..9fc862b --- /dev/null +++ b/template-solid-js/devtools.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Solid + JS + Vite + + +
+ + + diff --git a/template-solid-js/newtab.html b/template-solid-js/newtab.html new file mode 100644 index 0000000..885e58b --- /dev/null +++ b/template-solid-js/newtab.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Solid + JS + Vite + + +
+ + + diff --git a/template-solid-js/options.html b/template-solid-js/options.html index 2ceb24b..ada0b5c 100644 --- a/template-solid-js/options.html +++ b/template-solid-js/options.html @@ -4,7 +4,7 @@ - Solid + JS + Vite - Options + Chrome Extension + Solid + JS + Vite
diff --git a/template-solid-js/package.json b/template-solid-js/package.json index 39312c2..91d9768 100644 --- 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 index c69f197..352a893 100644 --- a/template-solid-js/popup.html +++ b/template-solid-js/popup.html @@ -4,7 +4,7 @@ - Solid + TS + Vite - Popup + Chrome Extension + Solid + JS + Vite
diff --git a/template-solid-js/sidepanel.html b/template-solid-js/sidepanel.html index 514b422..113b9e6 100644 --- a/template-solid-js/sidepanel.html +++ b/template-solid-js/sidepanel.html @@ -4,7 +4,7 @@ - Solid + TS + Vite - Side Panel + Chrome Extension + Solid + JS + Vite
diff --git a/template-solid-js/src/background/index.js b/template-solid-js/src/background/index.js index 1fd3b47..4a0687b 100644 --- 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 deleted file mode 100644 index ddfdeb6..0000000 --- a/template-solid-js/src/content/index.js +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-svelte-ts content script') - -export {} diff --git a/template-solid-js/src/contentScript/index.js b/template-solid-js/src/contentScript/index.js new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ 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 b/template-solid-js/src/devtools/DevTools.css similarity index 80% rename from template-solid-js/src/popup/Popup.module.css rename to template-solid-js/src/devtools/DevTools.css index 3316cfc..6c4e3a2 100644 --- a/template-solid-js/src/popup/Popup.module.css +++ b/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 new file mode 100644 index 0000000..a9b2be5 --- /dev/null +++ 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 ( +
+

DevTools Page

+ + generated by create-chrome-ext + +
+ ) +} + +export default DevTools diff --git a/template-solid-js/src/devtools/index.css b/template-solid-js/src/devtools/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ 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 new file mode 100644 index 0000000..89ebe24 --- /dev/null +++ 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(() => , 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 index 54ea3b2..3b059b6 100644 --- 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,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-solid-js/src/newtab/NewTab.css b/template-solid-js/src/newtab/NewTab.css new file mode 100644 index 0000000..fbfaaea --- /dev/null +++ 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 new file mode 100644 index 0000000..eacda14 --- /dev/null +++ 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 ( +
+ +

{time()}

+ + generated by create-chrome-ext + +
+ ) +} + +export default NewTab diff --git a/template-solid-js/src/newtab/index.css b/template-solid-js/src/newtab/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ 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 new file mode 100644 index 0000000..3d75b19 --- /dev/null +++ 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(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-ts/src/options/Options.module.css b/template-solid-js/src/options/Options.css similarity index 88% rename from template-solid-ts/src/options/Options.module.css rename to template-solid-js/src/options/Options.css index 3316cfc..80eeb85 100644 --- a/template-solid-ts/src/options/Options.module.css +++ b/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 index 8f8c01a..83e1e20 100644 --- 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 ( -
-

Options Page!

+ 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) + }) -
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-solid-js/src/options/index.css b/template-solid-js/src/options/index.css index 8a3e44d..538e457 100644 --- a/template-solid-js/src/options/index.css +++ b/template-solid-js/src/options/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-solid-js/src/popup/Popup.css b/template-solid-js/src/popup/Popup.css new file mode 100644 index 0000000..7defc91 --- /dev/null +++ b/template-solid-js/src/popup/Popup.css @@ -0,0 +1,53 @@ +@media (prefers-color-scheme: light) { + a:hover { + color: #142d61; + } +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #142d61; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +.calc { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem; + + & > button { + font-size: 1rem; + padding: 0.5rem 1rem; + border: 1px solid #142d61; + border-radius: 0.25rem; + background-color: transparent; + color: #142d61; + cursor: pointer; + outline: none; + + width: 3rem; + margin: 0 a; + } + + & > label { + font-size: 1.5rem; + margin: 0 1rem; + } +} + +a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; +} diff --git a/template-solid-js/src/popup/Popup.jsx b/template-solid-js/src/popup/Popup.jsx index 04f4e86..1db3842 100644 --- a/template-solid-js/src/popup/Popup.jsx +++ b/template-solid-js/src/popup/Popup.jsx @@ -1,20 +1,46 @@ -import { createSignal } from 'solid-js' +import { createSignal, createEffect } from 'solid-js' -import './Popup.module.css' +import './Popup.css' -/** - * Popup component. - */ export const Popup = () => { - const [crx] = createSignal('create-chrome-ext') - return ( -
-

Popup Page!

+ const [count, setCount] = createSignal(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' + + const minus = () => { + if (count() > 0) setCount(count() - 1) + } + + const add = () => setCount(count() + 1) -
v 0.0.0
+ createEffect(() => { + 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) + } + }) + }, []) + + createEffect(() => { + chrome.storage.sync.set({ count }) + chrome.runtime.sendMessage({ type: 'COUNT', count }) + }, [count]) + + return ( +
+

Popup Page

+
+ + + +
+ + generated by create-chrome-ext
) diff --git a/template-solid-js/src/popup/index.css b/template-solid-js/src/popup/index.css index 8a3e44d..538e457 100644 --- a/template-solid-js/src/popup/index.css +++ b/template-solid-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-solid-js/src/sidepanel/Sidepanel.css b/template-solid-js/src/sidepanel/Sidepanel.css new file mode 100644 index 0000000..beeb79a --- /dev/null +++ b/template-solid-js/src/sidepanel/Sidepanel.css @@ -0,0 +1,27 @@ +@media (prefers-color-scheme: light) { + a:hover { + color: #142d61; + } +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #142d61; + 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-solid-js/src/sidepanel/Sidepanel.jsx b/template-solid-js/src/sidepanel/Sidepanel.jsx index 4a1f795..1f35fef 100644 --- a/template-solid-js/src/sidepanel/Sidepanel.jsx +++ b/template-solid-js/src/sidepanel/Sidepanel.jsx @@ -1,20 +1,29 @@ -import { createSignal } from 'solid-js' +import { createSignal, createEffect } from 'solid-js' -import './Sidepanel.module.css' +import './Sidepanel.css' -/** - * Popup component. - */ export const Sidepanel = () => { - const [crx] = createSignal('create-chrome-ext') - return ( -
-

Side Panel Page!

+ 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) + }) -
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
) diff --git a/template-solid-js/src/sidepanel/index.css b/template-solid-js/src/sidepanel/index.css index 8a3e44d..538e457 100644 --- a/template-solid-js/src/sidepanel/index.css +++ b/template-solid-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-solid-ts/devtools.html b/template-solid-ts/devtools.html new file mode 100644 index 0000000..0a0793f --- /dev/null +++ b/template-solid-ts/devtools.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Solid + TS + Vite + + +
+ + + diff --git a/template-solid-ts/newtab.html b/template-solid-ts/newtab.html new file mode 100644 index 0000000..cd9638c --- /dev/null +++ b/template-solid-ts/newtab.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Solid + TS + Vite + + +
+ + + diff --git a/template-solid-ts/options.html b/template-solid-ts/options.html index 49fed0a..6db9b1d 100644 --- a/template-solid-ts/options.html +++ b/template-solid-ts/options.html @@ -4,7 +4,7 @@ - Solid + TS + Vite - Options + Chrome Extension + Solid + TS + Vite
diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json index fd0f6ad..de83134 100644 --- a/template-solid-ts/package.json +++ b/template-solid-ts/package.json @@ -26,10 +26,10 @@ "@types/chrome": "^0.0.246", "prettier": "^3.0.3", "typescript": "^5.2.2", - "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-ts/popup.html b/template-solid-ts/popup.html index d75ae1d..67ff675 100644 --- a/template-solid-ts/popup.html +++ b/template-solid-ts/popup.html @@ -4,7 +4,7 @@ - Solid + TS + Vite - Popup + Chrome Extension + Solid + TS + Vite
diff --git a/template-solid-ts/sidepanel.html b/template-solid-ts/sidepanel.html index 6edbff1..6a2a717 100644 --- a/template-solid-ts/sidepanel.html +++ b/template-solid-ts/sidepanel.html @@ -4,7 +4,7 @@ - Solid + TS + Vite - Side Panel + Chrome Extension + Solid + TS + Vite
diff --git a/template-solid-ts/src/background/index.ts b/template-solid-ts/src/background/index.ts index 1fd3b47..4a0687b 100644 --- a/template-solid-ts/src/background/index.ts +++ b/template-solid-ts/src/background/index.ts @@ -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-ts/src/content/index.ts b/template-solid-ts/src/content/index.ts deleted file mode 100644 index ddfdeb6..0000000 --- a/template-solid-ts/src/content/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-svelte-ts content script') - -export {} diff --git a/template-solid-ts/src/contentScript/index.ts b/template-solid-ts/src/contentScript/index.ts new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ b/template-solid-ts/src/contentScript/index.ts @@ -0,0 +1 @@ +console.info('contentScript is running') diff --git a/template-solid-js/src/sidepanel/Sidepanel.module.css b/template-solid-ts/src/devtools/DevTools.css similarity index 80% rename from template-solid-js/src/sidepanel/Sidepanel.module.css rename to template-solid-ts/src/devtools/DevTools.css index 3316cfc..6c4e3a2 100644 --- a/template-solid-js/src/sidepanel/Sidepanel.module.css +++ b/template-solid-ts/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-ts/src/devtools/DevTools.tsx b/template-solid-ts/src/devtools/DevTools.tsx new file mode 100644 index 0000000..3d6d83c --- /dev/null +++ b/template-solid-ts/src/devtools/DevTools.tsx @@ -0,0 +1,19 @@ +import './DevTools.css' + +/** + * DevTools + */ +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-solid-ts/src/devtools/index.css b/template-solid-ts/src/devtools/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-solid-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-solid-ts/src/devtools/index.tsx b/template-solid-ts/src/devtools/index.tsx new file mode 100644 index 0000000..89ebe24 --- /dev/null +++ b/template-solid-ts/src/devtools/index.tsx @@ -0,0 +1,11 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { DevTools } from './DevTools' + +render(() => , document.getElementById('app') ?? document.body) + +chrome.devtools.panels.create('SolidCrx', '', '../../devtools.html', function () { + console.log('devtools panel create') +}) diff --git a/template-solid-ts/src/manifest.ts b/template-solid-ts/src/manifest.ts index 9f63f01..60c644a 100644 --- a/template-solid-ts/src/manifest.ts +++ b/template-solid-ts/src/manifest.ts @@ -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,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.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-solid-ts/src/newtab/NewTab.css b/template-solid-ts/src/newtab/NewTab.css new file mode 100644 index 0000000..fbfaaea --- /dev/null +++ b/template-solid-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: #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-ts/src/newtab/NewTab.tsx b/template-solid-ts/src/newtab/NewTab.tsx new file mode 100644 index 0000000..d6d440d --- /dev/null +++ b/template-solid-ts/src/newtab/NewTab.tsx @@ -0,0 +1,36 @@ +import { createSignal, onCleanup } from 'solid-js' + +import './NewTab.css' + +/** + * NewTab + */ +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 ( +
+ +

{time()}

+ + generated by create-chrome-ext + +
+ ) +} + +export default NewTab diff --git a/template-solid-ts/src/newtab/index.css b/template-solid-ts/src/newtab/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-solid-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-solid-ts/src/newtab/index.tsx b/template-solid-ts/src/newtab/index.tsx new file mode 100644 index 0000000..3d75b19 --- /dev/null +++ b/template-solid-ts/src/newtab/index.tsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { NewTab } from './NewTab' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-js/src/options/Options.module.css b/template-solid-ts/src/options/Options.css similarity index 88% rename from template-solid-js/src/options/Options.module.css rename to template-solid-ts/src/options/Options.css index 3316cfc..80eeb85 100644 --- a/template-solid-js/src/options/Options.module.css +++ b/template-solid-ts/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-ts/src/options/Options.tsx b/template-solid-ts/src/options/Options.tsx index 8f8c01a..1d38de8 100644 --- a/template-solid-ts/src/options/Options.tsx +++ b/template-solid-ts/src/options/Options.tsx @@ -1,20 +1,32 @@ -import { createSignal } from 'solid-js' +import { createSignal, createEffect } from 'solid-js' -import './Options.module.css' +import './Options.css' /** - * Options component. + * Options */ export const Options = () => { - const [crx] = createSignal('create-chrome-ext') - return ( -
-

Options Page!

+ 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) + }) -
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-solid-ts/src/options/index.css b/template-solid-ts/src/options/index.css index 8a3e44d..538e457 100644 --- a/template-solid-ts/src/options/index.css +++ b/template-solid-ts/src/options/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-solid-ts/src/popup/Popup.css b/template-solid-ts/src/popup/Popup.css new file mode 100644 index 0000000..7defc91 --- /dev/null +++ b/template-solid-ts/src/popup/Popup.css @@ -0,0 +1,53 @@ +@media (prefers-color-scheme: light) { + a:hover { + color: #142d61; + } +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #142d61; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +.calc { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem; + + & > button { + font-size: 1rem; + padding: 0.5rem 1rem; + border: 1px solid #142d61; + border-radius: 0.25rem; + background-color: transparent; + color: #142d61; + cursor: pointer; + outline: none; + + width: 3rem; + margin: 0 a; + } + + & > label { + font-size: 1.5rem; + margin: 0 1rem; + } +} + +a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; +} diff --git a/template-solid-ts/src/popup/Popup.module.css b/template-solid-ts/src/popup/Popup.module.css deleted file mode 100644 index 3316cfc..0000000 --- a/template-solid-ts/src/popup/Popup.module.css +++ /dev/null @@ -1,38 +0,0 @@ -:root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; -} - -main { - text-align: center; - padding: 1em; - margin: 0 auto; -} - -h3 { - color: #142d61; - text-transform: uppercase; - font-size: 1.5rem; - font-weight: 200; - line-height: 1.2rem; - 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-solid-ts/src/popup/Popup.tsx b/template-solid-ts/src/popup/Popup.tsx index 04f4e86..bf898f3 100644 --- a/template-solid-ts/src/popup/Popup.tsx +++ b/template-solid-ts/src/popup/Popup.tsx @@ -1,20 +1,49 @@ -import { createSignal } from 'solid-js' +import { createSignal, createEffect } from 'solid-js' -import './Popup.module.css' +import './Popup.css' /** - * Popup component. + * Popup */ export const Popup = () => { - const [crx] = createSignal('create-chrome-ext') - return ( -
-

Popup Page!

+ const [count, setCount] = createSignal(0) + const link = 'https://github.com/guocaoyi/create-chrome-ext' + + const minus = () => { + if (count() > 0) setCount(count() - 1) + } + + const add = () => setCount(count() + 1) -
v 0.0.0
+ createEffect(() => { + 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) + } + }) + }, []) + + createEffect(() => { + chrome.storage.sync.set({ count }) + chrome.runtime.sendMessage({ type: 'COUNT', count }) + }, [count]) + + return ( +
+

Popup Page

+
+ + + +
+ + generated by create-chrome-ext
) diff --git a/template-solid-ts/src/popup/index.css b/template-solid-ts/src/popup/index.css index 8a3e44d..538e457 100644 --- a/template-solid-ts/src/popup/index.css +++ b/template-solid-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-solid-ts/src/sidepanel/Sidepanel.css b/template-solid-ts/src/sidepanel/Sidepanel.css new file mode 100644 index 0000000..beeb79a --- /dev/null +++ b/template-solid-ts/src/sidepanel/Sidepanel.css @@ -0,0 +1,27 @@ +@media (prefers-color-scheme: light) { + a:hover { + color: #142d61; + } +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #142d61; + 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-solid-ts/src/sidepanel/Sidepanel.module.css b/template-solid-ts/src/sidepanel/Sidepanel.module.css deleted file mode 100644 index 3316cfc..0000000 --- a/template-solid-ts/src/sidepanel/Sidepanel.module.css +++ /dev/null @@ -1,38 +0,0 @@ -:root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; -} - -main { - text-align: center; - padding: 1em; - margin: 0 auto; -} - -h3 { - color: #142d61; - text-transform: uppercase; - font-size: 1.5rem; - font-weight: 200; - line-height: 1.2rem; - 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-solid-ts/src/sidepanel/Sidepanel.tsx b/template-solid-ts/src/sidepanel/Sidepanel.tsx index 4a1f795..41ecfd2 100644 --- a/template-solid-ts/src/sidepanel/Sidepanel.tsx +++ b/template-solid-ts/src/sidepanel/Sidepanel.tsx @@ -1,20 +1,32 @@ -import { createSignal } from 'solid-js' +import { createSignal, createEffect } from 'solid-js' -import './Sidepanel.module.css' +import './Sidepanel.css' /** - * Popup component. + * SidePanel */ export const Sidepanel = () => { - const [crx] = createSignal('create-chrome-ext') - return ( -
-

Side Panel Page!

+ 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) + }) -
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
) diff --git a/template-solid-ts/src/sidepanel/index.css b/template-solid-ts/src/sidepanel/index.css index 8a3e44d..538e457 100644 --- a/template-solid-ts/src/sidepanel/index.css +++ b/template-solid-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-solid-ts/src/sidepanel/index.tsx b/template-solid-ts/src/sidepanel/index.tsx index dce6964..97ac881 100644 --- a/template-solid-ts/src/sidepanel/index.tsx +++ b/template-solid-ts/src/sidepanel/index.tsx @@ -4,4 +4,4 @@ import { render } from 'solid-js/web' import './index.css' import { Sidepanel } from './Sidepanel' -render(() => , document.getElementById('app') ?? document.body) +render(() => , (document.getElementById('app') as HTMLElement) ?? document.body) diff --git a/template-stencil-ts/src/assets/icons/logo.ico b/template-stencil-ts/src/assets/icons/logo.ico index 29fcda0..6cf84f5 100644 Binary files a/template-stencil-ts/src/assets/icons/logo.ico and b/template-stencil-ts/src/assets/icons/logo.ico differ diff --git a/template-stencil-ts/src/assets/icons/logo.svg b/template-stencil-ts/src/assets/icons/logo.svg index e4101ab..c351ddc 100644 --- a/template-stencil-ts/src/assets/icons/logo.svg +++ b/template-stencil-ts/src/assets/icons/logo.svg @@ -1,2 +1,2 @@ \ No newline at end of file + \ No newline at end of file diff --git a/template-stencil-ts/src/assets/img/logo-128.png b/template-stencil-ts/src/assets/img/logo-128.png index 188fbc2..afa2a23 100644 Binary files a/template-stencil-ts/src/assets/img/logo-128.png and b/template-stencil-ts/src/assets/img/logo-128.png differ diff --git a/template-stencil-ts/src/assets/img/logo-16.png b/template-stencil-ts/src/assets/img/logo-16.png index c8fc861..9e1aaf1 100644 Binary files a/template-stencil-ts/src/assets/img/logo-16.png and b/template-stencil-ts/src/assets/img/logo-16.png differ diff --git a/template-stencil-ts/src/assets/img/logo-34.png b/template-stencil-ts/src/assets/img/logo-34.png index 2bf45ed..a904df8 100644 Binary files a/template-stencil-ts/src/assets/img/logo-34.png and b/template-stencil-ts/src/assets/img/logo-34.png differ diff --git a/template-stencil-ts/src/assets/img/logo-48.png b/template-stencil-ts/src/assets/img/logo-48.png index 78b6a92..49ee3c6 100644 Binary files a/template-stencil-ts/src/assets/img/logo-48.png and b/template-stencil-ts/src/assets/img/logo-48.png differ diff --git a/template-stencil-ts/src/background/index.js b/template-stencil-ts/src/background/index.js new file mode 100644 index 0000000..4a0687b --- /dev/null +++ b/template-stencil-ts/src/background/index.js @@ -0,0 +1,7 @@ +console.log('background is running') + +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-stencil-ts/src/components.d.ts b/template-stencil-ts/src/components.d.ts index 1a3d1af..8954334 100644 --- a/template-stencil-ts/src/components.d.ts +++ b/template-stencil-ts/src/components.d.ts @@ -6,6 +6,10 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; export namespace Components { + interface DevtoolsRoot { + } + interface NewtabRoot { + } interface OptionsRoot { } interface PopupRoot { @@ -14,6 +18,18 @@ export namespace Components { } } declare global { + interface HTMLDevtoolsRootElement extends Components.DevtoolsRoot, HTMLStencilElement { + } + var HTMLDevtoolsRootElement: { + prototype: HTMLDevtoolsRootElement; + new (): HTMLDevtoolsRootElement; + }; + interface HTMLNewtabRootElement extends Components.NewtabRoot, HTMLStencilElement { + } + var HTMLNewtabRootElement: { + prototype: HTMLNewtabRootElement; + new (): HTMLNewtabRootElement; + }; interface HTMLOptionsRootElement extends Components.OptionsRoot, HTMLStencilElement { } var HTMLOptionsRootElement: { @@ -33,12 +49,18 @@ declare global { new (): HTMLSideRootElement; }; interface HTMLElementTagNameMap { + "devtools-root": HTMLDevtoolsRootElement; + "newtab-root": HTMLNewtabRootElement; "options-root": HTMLOptionsRootElement; "popup-root": HTMLPopupRootElement; "side-root": HTMLSideRootElement; } } declare namespace LocalJSX { + interface DevtoolsRoot { + } + interface NewtabRoot { + } interface OptionsRoot { } interface PopupRoot { @@ -46,6 +68,8 @@ declare namespace LocalJSX { interface SideRoot { } interface IntrinsicElements { + "devtools-root": DevtoolsRoot; + "newtab-root": NewtabRoot; "options-root": OptionsRoot; "popup-root": PopupRoot; "side-root": SideRoot; @@ -55,6 +79,8 @@ export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { + "devtools-root": LocalJSX.DevtoolsRoot & JSXBase.HTMLAttributes; + "newtab-root": LocalJSX.NewtabRoot & JSXBase.HTMLAttributes; "options-root": LocalJSX.OptionsRoot & JSXBase.HTMLAttributes; "popup-root": LocalJSX.PopupRoot & JSXBase.HTMLAttributes; "side-root": LocalJSX.SideRoot & JSXBase.HTMLAttributes; diff --git a/template-stencil-ts/src/components/devtools-root/devtools-root.css b/template-stencil-ts/src/components/devtools-root/devtools-root.css new file mode 100644 index 0000000..782f954 --- /dev/null +++ b/template-stencil-ts/src/components/devtools-root/devtools-root.css @@ -0,0 +1,59 @@ +: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: #5530ff; + } + } + + body { + min-width: 20rem; + margin: 0; + } + + body { + min-width: 20rem; + } + + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } + + h3 { + color: #5530ff; + 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; + } + \ No newline at end of file diff --git a/template-stencil-ts/src/components/devtools-root/devtools-root.tsx b/template-stencil-ts/src/components/devtools-root/devtools-root.tsx new file mode 100644 index 0000000..e506f48 --- /dev/null +++ b/template-stencil-ts/src/components/devtools-root/devtools-root.tsx @@ -0,0 +1,25 @@ +import { Component, h } from '@stencil/core' + +chrome.devtools.panels.create('StencilCrx', '', '../../devtools.html', function () { + console.log('devtools panel create') +}) + +@Component({ + tag: 'devtools-root', + styleUrl: 'devtools-root.css', + shadow: false, +}) +export class DevToolsRoot { + private link = 'https://github.com/guocaoyi/create-chrome-ext' + + render() { + return ( +
+

DevTools Page

+ + generated by create-chrome-ext + +
+ ) + } +} diff --git a/template-stencil-ts/src/components/newtab-root/newtab-root.css b/template-stencil-ts/src/components/newtab-root/newtab-root.css new file mode 100644 index 0000000..ef74047 --- /dev/null +++ b/template-stencil-ts/src/components/newtab-root/newtab-root.css @@ -0,0 +1,63 @@ +: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; +} + +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: #5530ff; + 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-stencil-ts/src/components/newtab-root/newtab-root.tsx b/template-stencil-ts/src/components/newtab-root/newtab-root.tsx new file mode 100644 index 0000000..5d558e0 --- /dev/null +++ b/template-stencil-ts/src/components/newtab-root/newtab-root.tsx @@ -0,0 +1,42 @@ +import { Component, State, h } from '@stencil/core' + +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}` +} + +@Component({ + tag: 'newtab-root', + styleUrl: 'newtab-root.css', + shadow: false, +}) +export class NewTabRoot { + private link = 'https://github.com/guocaoyi/create-chrome-ext' + private intervalId: any + + @State() time = getTime() + + componentDidRender() { + this.intervalId = setInterval(() => { + this.time = getTime() + }, 1000) + } + + disconnectedCallback() { + clearInterval(this.intervalId) + } + + render() { + return ( +
+ +

{this.time}

+ + generated by create-chrome-ext + +
+ ) + } +} diff --git a/template-stencil-ts/src/components/options-root/options-root.css b/template-stencil-ts/src/components/options-root/options-root.css index 2794b02..5760e62 100644 --- a/template-stencil-ts/src/components/options-root/options-root.css +++ b/template-stencil-ts/src/components/options-root/options-root.css @@ -1,31 +1,36 @@ :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', 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; + background-color: #fafafa; } + a:hover { - color: #747bff; + color: #5530ff; } } +body { + min-width: 20rem; + margin: 0; +} + body { min-width: 20rem; } @@ -45,21 +50,9 @@ h3 { 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; - } -} diff --git a/template-stencil-ts/src/components/options-root/options-root.tsx b/template-stencil-ts/src/components/options-root/options-root.tsx index 73a2369..ae3e153 100644 --- a/template-stencil-ts/src/components/options-root/options-root.tsx +++ b/template-stencil-ts/src/components/options-root/options-root.tsx @@ -1,21 +1,33 @@ -import { Component, h } from '@stencil/core' +import { Component, State, h } from '@stencil/core' @Component({ tag: 'options-root', styleUrl: 'options-root.css', - shadow: true, + shadow: false, }) export class OptionsRoot { + private link = 'https://github.com/guocaoyi/create-chrome-ext' + @State() countSync: number = 0 + + componentWillLoad() { + chrome.storage.sync.get(['count'], (result) => { + this.countSync = result.count || 0 + }) + + chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + this.countSync = request.count || 0 + } + }) + } + render() { - let crx = 'create-chrome-ext' return (
-

Options Page!

- -
v 0.0.0
- - - Power by {crx} +

Option Page

+

Count from Popup: {this.countSync}

+ + generated by create-chrome-ext
) diff --git a/template-stencil-ts/src/components/popup-root/popup-root.css b/template-stencil-ts/src/components/popup-root/popup-root.css index 2794b02..ced4f76 100644 --- a/template-stencil-ts/src/components/popup-root/popup-root.css +++ b/template-stencil-ts/src/components/popup-root/popup-root.css @@ -1,33 +1,34 @@ :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', 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; + background-color: #fafafa; } + a:hover { - color: #747bff; + color: #5530ff; } } body { min-width: 20rem; + margin: 0; } main { @@ -45,10 +46,30 @@ h3 { margin: 2rem auto; } -h6 { - font-size: 0.5rem; - color: #cccccc; - 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 #5530ff; + border-radius: 0.25rem; + background-color: transparent; + color: #5530ff; + cursor: pointer; + outline: none; + + width: 3rem; + margin: 0 a; + } + + & > label { + font-size: 1.5rem; + margin: 0 1rem; + } } a { @@ -57,9 +78,3 @@ a { color: #cccccc; text-decoration: none; } - -@media (min-width: 480px) { - h3 { - max-width: none; - } -} diff --git a/template-stencil-ts/src/components/popup-root/popup-root.tsx b/template-stencil-ts/src/components/popup-root/popup-root.tsx index af0b237..89ff846 100644 --- a/template-stencil-ts/src/components/popup-root/popup-root.tsx +++ b/template-stencil-ts/src/components/popup-root/popup-root.tsx @@ -1,21 +1,54 @@ -import { Component, h } from '@stencil/core' +import { Component, State, Watch, h } from '@stencil/core' @Component({ tag: 'popup-root', styleUrl: 'popup-root.css', - shadow: true, + shadow: false, }) export class PopupRoot { + private link = 'https://github.com/guocaoyi/create-chrome-ext' + + @State() count: number = 0 + + @Watch('count') + watchPropHandler(newValue: boolean) { + chrome.storage.sync.set({ count: newValue }) + chrome.runtime.sendMessage({ type: 'COUNT', count: newValue }) + } + + componentWillLoad() { + chrome.storage.sync.get(['count'], (result) => { + this.count = result.count || 0 + }) + + chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + this.count = request.count || 0 + } + }) + } + + minus = () => { + if (this.count > 0) this.count-- + } + + add = () => { + this.count++ + } + render() { - let crx = 'create-chrome-ext' return (
-

Popup Page!

- -
v 0.0.0
- - - Power by {crx} +

Popup Page

+
+ + + +
+ + generated by create-chrome-ext
) diff --git a/template-stencil-ts/src/components/side-root/side-root.css b/template-stencil-ts/src/components/side-root/side-root.css index 2794b02..2629dce 100644 --- a/template-stencil-ts/src/components/side-root/side-root.css +++ b/template-stencil-ts/src/components/side-root/side-root.css @@ -1,33 +1,34 @@ :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', 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; + background-color: #fafafa; } + a:hover { - color: #747bff; + color: #5530ff; } } body { min-width: 20rem; + margin: 0; } main { @@ -45,21 +46,9 @@ h3 { 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; - } -} diff --git a/template-stencil-ts/src/components/side-root/side-root.tsx b/template-stencil-ts/src/components/side-root/side-root.tsx index d1699fa..91405c8 100644 --- a/template-stencil-ts/src/components/side-root/side-root.tsx +++ b/template-stencil-ts/src/components/side-root/side-root.tsx @@ -1,21 +1,33 @@ -import { Component, h } from '@stencil/core' +import { Component, State, h } from '@stencil/core' @Component({ tag: 'side-root', styleUrl: 'side-root.css', - shadow: true, + shadow: false, }) export class SideRoot { + private link = 'https://github.com/guocaoyi/create-chrome-ext' + @State() countSync: number = 0 + + componentWillLoad() { + chrome.storage.sync.get(['count'], (result) => { + this.countSync = result.count || 0 + }) + + chrome.runtime.onMessage.addListener((request) => { + if (request.type === 'COUNT') { + this.countSync = request.count || 0 + } + }) + } + render() { - let crx = 'create-chrome-ext' return (
-

Side Panel Page!

- -
v 0.0.0
- - - Power by {crx} +

SidePanel Page

+

Count from Popup: {this.countSync}

+ + generated by create-chrome-ext
) diff --git a/template-stencil-ts/src/contentScript/index.js b/template-stencil-ts/src/contentScript/index.js new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ b/template-stencil-ts/src/contentScript/index.js @@ -0,0 +1 @@ +console.info('contentScript is running') diff --git a/template-stencil-ts/src/devtools.html b/template-stencil-ts/src/devtools.html new file mode 100644 index 0000000..ddd5e46 --- /dev/null +++ b/template-stencil-ts/src/devtools.html @@ -0,0 +1,16 @@ + + + + + + + + Chrome Extension + Stencil + TS + Vite + + + + + + + + diff --git a/template-stencil-ts/src/global/background/index.ts b/template-stencil-ts/src/global/background/index.ts deleted file mode 100644 index b160d6f..0000000 --- a/template-stencil-ts/src/global/background/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-svelte-ts background script') - -export default {} diff --git a/template-stencil-ts/src/global/content/index.ts b/template-stencil-ts/src/global/content/index.ts deleted file mode 100644 index 00ac017..0000000 --- a/template-stencil-ts/src/global/content/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-svelte-ts content script') - -export default {} diff --git a/template-stencil-ts/src/manifest.json b/template-stencil-ts/src/manifest.json index 4216235..b7f7f74 100644 --- a/template-stencil-ts/src/manifest.json +++ b/template-stencil-ts/src/manifest.json @@ -1,18 +1,33 @@ { - "name": "create-chrome-ext", - "short_name": "Chrome Ext", + "name": "chrome-extension-stencil-ts", + "description": "", + "version": "0.0.0", + "manifest_version": 3, "icons": { "16": "assets/img/logo-16.png", "32": "assets/img/logo-34.png", "48": "assets/img/logo-48.png", "128": "assets/img/logo-128.png" }, - "description": "", - "version": "0.0.0", - "manifest_version": 3, - "action": { "default_popup": "popup.html", "default_icon": "assets/img/logo-48.png" }, + "action": { + "default_popup": "popup.html", + "default_icon": "assets/img/logo-48.png" + }, "options_page": "options.html", - "side_panel": { "default_path": "sidepanel.html" }, + "devtools_page": "devtools.html", + "background": { + "service_worker": "background/index.js", + "type": "module" + }, + "content_scripts": [ + { + "matches": ["http://*/*", "https://*/*"], + "js": ["contentScript/index.js"] + } + ], + "side_panel": { + "default_path": "sidepanel.html" + }, "web_accessible_resources": [ { "resources": [ @@ -24,5 +39,8 @@ "matches": [] } ], - "permissions": ["sidePanel"] + "permissions": ["sidePanel", "storage"], + "chrome_url_overrides": { + "newtab": "newtab.html" + } } diff --git a/template-stencil-ts/src/newtab.html b/template-stencil-ts/src/newtab.html new file mode 100644 index 0000000..5b29bc9 --- /dev/null +++ b/template-stencil-ts/src/newtab.html @@ -0,0 +1,16 @@ + + + + + + + + Chrome Extension + Stencil + TS + Vite + + + + + + + + diff --git a/template-stencil-ts/src/options.html b/template-stencil-ts/src/options.html index 61c0b30..efcd354 100644 --- a/template-stencil-ts/src/options.html +++ b/template-stencil-ts/src/options.html @@ -2,8 +2,10 @@ - Stencil Starter App + + + Chrome Extension + Stencil + TS + Vite diff --git a/template-stencil-ts/src/popup.html b/template-stencil-ts/src/popup.html index ca2d4b7..3025e91 100644 --- a/template-stencil-ts/src/popup.html +++ b/template-stencil-ts/src/popup.html @@ -2,8 +2,10 @@ - Stencil Starter App + + + Chrome Extension + Stencil + TS + Vite diff --git a/template-stencil-ts/src/sidepanel.html b/template-stencil-ts/src/sidepanel.html index 7bfeca8..f7b6a37 100644 --- a/template-stencil-ts/src/sidepanel.html +++ b/template-stencil-ts/src/sidepanel.html @@ -2,8 +2,10 @@ - Stencil Starter App + + + Chrome Extension + Stencil + TS + Vite diff --git a/template-stencil-ts/stencil.config.ts b/template-stencil-ts/stencil.config.ts index 0b4b68a..2324b54 100644 --- a/template-stencil-ts/stencil.config.ts +++ b/template-stencil-ts/stencil.config.ts @@ -10,15 +10,23 @@ export const config: Config = { buildDir: 'assets', dir: 'build', serviceWorker: null, - copy: [{ src: 'options.html' }, { src: 'popup.html' }, { src: 'sidepanel.html' }], + copy: [ + { src: 'devtools.html' }, + { src: 'newtab.html' }, + { src: 'options.html' }, + { src: 'popup.html' }, + { src: 'sidepanel.html' }, + { src: 'background/index.js' }, + { src: 'contentScript/index.js' }, + ], }, ], sourceMap: false, rollupConfig: { inputOptions: { moduleContext: { - content: './src/global/content', - background: './src/global/background', + content: './src/contentScript', + background: './src/background', }, treeshake: true, }, diff --git a/template-vue-ts/src/manifest.ts b/template-vue-ts/src/manifest.ts index 53ef1ed..60c644a 100644 --- a/template-vue-ts/src/manifest.ts +++ b/template-vue-ts/src/manifest.ts @@ -2,21 +2,22 @@ import { defineManifest } from '@crxjs/vite-plugin' import packageData from '../package.json' export default defineManifest({ - name: packageData.displayName, + 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', @@ -24,7 +25,7 @@ export default defineManifest({ content_scripts: [ { matches: ['http://*/*', 'https://*/*'], - js: ['src/content/index.ts'], + js: ['src/contentScript/index.ts'], }, ], side_panel: { @@ -36,5 +37,8 @@ export default defineManifest({ matches: [], }, ], - permissions: ['sidePanel'], + permissions: ['sidePanel', 'storage'], + chrome_url_overrides: { + newtab: 'newtab.html', + }, })