diff --git a/template-lit-js/.vscode/extensions.json b/template-lit-js/.vscode/extensions.json new file mode 100644 index 0000000..6a2f786 --- /dev/null +++ b/template-lit-js/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["bierner.lit-html"] +} diff --git a/template-lit-js/devtools.html b/template-lit-js/devtools.html new file mode 100644 index 0000000..371e1bf --- /dev/null +++ b/template-lit-js/devtools.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Lit + JS + Vite + + + + + + + diff --git a/template-lit-js/newtab.html b/template-lit-js/newtab.html new file mode 100644 index 0000000..f0887c8 --- /dev/null +++ b/template-lit-js/newtab.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Lit + JS + Vite + + + + + + + diff --git a/template-lit-js/options.html b/template-lit-js/options.html index 0825036..2db354d 100644 --- a/template-lit-js/options.html +++ b/template-lit-js/options.html @@ -4,11 +4,11 @@ - Chrome Extension + Lit + JS + Vite App - Options + Chrome Extension + Lit + JS + Vite - + diff --git a/template-lit-js/popup.html b/template-lit-js/popup.html index ea92fd6..2f8d57d 100644 --- a/template-lit-js/popup.html +++ b/template-lit-js/popup.html @@ -4,11 +4,11 @@ - Chrome Extension + Lit + JS + Vite App - Popup + Chrome Extension + Lit + JS + Vite - + diff --git a/template-lit-js/public/icons/logo.ico b/template-lit-js/public/icons/logo.ico index 4a27211..b616def 100644 Binary files a/template-lit-js/public/icons/logo.ico and b/template-lit-js/public/icons/logo.ico differ diff --git a/template-lit-js/public/icons/logo.svg b/template-lit-js/public/icons/logo.svg index 0f11d32..c18aa5a 100644 --- a/template-lit-js/public/icons/logo.svg +++ b/template-lit-js/public/icons/logo.svg @@ -1,2 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/template-lit-js/public/img/logo-128.png b/template-lit-js/public/img/logo-128.png index 6a511d5..4c07262 100644 Binary files a/template-lit-js/public/img/logo-128.png and b/template-lit-js/public/img/logo-128.png differ diff --git a/template-lit-js/public/img/logo-16.png b/template-lit-js/public/img/logo-16.png index 872949b..356e6eb 100644 Binary files a/template-lit-js/public/img/logo-16.png and b/template-lit-js/public/img/logo-16.png differ diff --git a/template-lit-js/public/img/logo-34.png b/template-lit-js/public/img/logo-34.png index c69e674..e514bb9 100644 Binary files a/template-lit-js/public/img/logo-34.png and b/template-lit-js/public/img/logo-34.png differ diff --git a/template-lit-js/public/img/logo-48.png b/template-lit-js/public/img/logo-48.png index eface53..5fedb09 100644 Binary files a/template-lit-js/public/img/logo-48.png and b/template-lit-js/public/img/logo-48.png differ diff --git a/template-lit-js/sidepanel.html b/template-lit-js/sidepanel.html index ec1daa4..2ad3ce2 100644 --- a/template-lit-js/sidepanel.html +++ b/template-lit-js/sidepanel.html @@ -4,11 +4,11 @@ - Chrome Extension + Lit + JS + Vite App - Side Panel + Chrome Extension + Lit + JS + Vite - + diff --git a/template-lit-js/src/background/index.js b/template-lit-js/src/background/index.js index d0bf253..4a0687b 100644 --- a/template-lit-js/src/background/index.js +++ b/template-lit-js/src/background/index.js @@ -1,3 +1,7 @@ -console.info('chrome-ext template-li-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-lit-js/src/content/index.js b/template-lit-js/src/content/index.js deleted file mode 100644 index b0808e6..0000000 --- a/template-lit-js/src/content/index.js +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-lit-js content script') - -export {} diff --git a/template-lit-js/src/contentScript/index.js b/template-lit-js/src/contentScript/index.js new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ b/template-lit-js/src/contentScript/index.js @@ -0,0 +1 @@ +console.info('contentScript is running') diff --git a/template-lit-js/src/devtools/index.js b/template-lit-js/src/devtools/index.js index 336ce12..e4beffa 100644 --- a/template-lit-js/src/devtools/index.js +++ b/template-lit-js/src/devtools/index.js @@ -1 +1,56 @@ -export {} +import { LitElement, css, html } from 'lit' + +chrome.devtools.panels.create('LitCrx', '', '../../devtools.html', () => { + console.log('devtools panel create') +}) + +export class DevTools extends LitElement { + link = 'https://github.com/guocaoyi/create-chrome-ext' + + render() { + return html` +
+

DevTools Page

+ generated by create-chrome-ext +
+ ` + } + + static styles = css` + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; + } + } + + body { + min-width: 20rem; + } + + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } + + h3 { + color: #324fff; + 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; + } + ` +} + +export default DevTools + +window.customElements.define('devtools-root', DevTools) diff --git a/template-lit-js/src/index.css b/template-lit-js/src/index.css index 05242c4..538e457 100644 --- a/template-lit-js/src/index.css +++ b/template-lit-js/src/index.css @@ -1,23 +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; + background-color: #fafafa; } } + +body { + min-width: 20rem; + margin: 0; +} diff --git a/template-lit-js/src/manifest.js b/template-lit-js/src/manifest.js index 54ea3b2..3b059b6 100644 --- a/template-lit-js/src/manifest.js +++ b/template-lit-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-lit-js/src/newtab/index.js b/template-lit-js/src/newtab/index.js index 336ce12..dc78aef 100644 --- a/template-lit-js/src/newtab/index.js +++ b/template-lit-js/src/newtab/index.js @@ -1 +1,79 @@ -export {} +import { LitElement, css, html } from 'lit' + +export class NewTab extends LitElement { + static get properties() { + return { + time: { type: Number, default: '-' }, + link: { type: String, default: 'https://github.com/guocaoyi/create-chrome-ext' }, + } + } + + getTime() { + const date = new Date() + const hour = String(date.getHours()).padStart(2, '0') + const minute = String(date.getMinutes()).padStart(2, '0') + return `${hour}:${minute}` + } + + connectedCallback() { + super.connectedCallback() + let intervalId = setInterval(() => { + this.time = this.getTime() + }, 1000) + + this.addEventListener('disconnected', () => { + clearInterval(intervalId) + }) + } + + render() { + return html` +
+ +

${this.time}

+ generated by create-chrome-ext +
+ ` + } + + static styles = css` + 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: #324fff; + text-transform: uppercase; + font-size: 6rem; + margin: 2rem auto; + } + + a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; + } + ` +} + +export default NewTab + +window.customElements.define('newtab-root', NewTab) diff --git a/template-lit-js/src/newtab/newtab.js b/template-lit-js/src/newtab/newtab.js deleted file mode 100644 index 5f9e196..0000000 --- a/template-lit-js/src/newtab/newtab.js +++ /dev/null @@ -1,80 +0,0 @@ -import { html, css, LitElement } from 'lit' - -/** - * newtab - */ -export class Newtab extends LitElement { - static get properties() { - return { - crx: { type: String }, - } - } - - constructor() { - super() - this.crx = 'create-chrome-ext' - } - - render() { - return html` -
-

Newtab Page!

- -
v 0.0.0
- - Generator by ${this.crx} -
- ` - } - - static get styles() { - return css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } - - :global(body) { - min-width: 20rem; - } - - main { - text-align: center; - padding: 1em; - margin: 0 auto; - } - - h3 { - color: #3355ff; - 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; - } - } - ` - } -} - -window.customElements.define('newtab', Newtab) diff --git a/template-lit-js/src/options/index.js b/template-lit-js/src/options/index.js index 462cf84..7d8d9ad 100644 --- a/template-lit-js/src/options/index.js +++ b/template-lit-js/src/options/index.js @@ -1,80 +1,72 @@ import { html, css, LitElement } from 'lit' -/** - * options - */ export class Options extends LitElement { static get properties() { return { - crx: { type: String }, + countSync: { type: Number, default: 0 }, + link: { type: String, default: 'https://github.com/guocaoyi/create-chrome-ext' }, } } constructor() { super() - this.crx = 'create-chrome-ext' + + 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() { return html`
-

Options Page!

- -
v 0.0.0
- - Generator by ${this.crx} +

Options Page

+

Count from Popup: ${this.countSync}

+ generated by create-chrome-ext
` } - static get styles() { - return css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } - - :global(body) { - min-width: 20rem; - } - - main { - text-align: center; - padding: 1em; - margin: 0 auto; + static styles = css` + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; } + } - h3 { - color: #3355ff; - text-transform: uppercase; - font-size: 1.5rem; - font-weight: 200; - line-height: 1.2rem; - margin: 2rem auto; - } + body { + min-width: 20rem; + } - h6 { - font-size: 0.5rem; - color: #cccccc; - margin: 0.5rem; - } + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } - a { - font-size: 0.5rem; - margin: 0.5rem; - color: #cccccc; - text-decoration: none; - } + h3 { + color: #324fff; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; + } - @media (min-width: 480px) { - h3 { - max-width: none; - } - } - ` - } + a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; + } + ` } -window.customElements.define('options-panel', Options) +export default Options + +window.customElements.define('options-root', Options) diff --git a/template-lit-js/src/popup/index.js b/template-lit-js/src/popup/index.js index d926fb2..4964c0a 100644 --- a/template-lit-js/src/popup/index.js +++ b/template-lit-js/src/popup/index.js @@ -1,80 +1,103 @@ import { html, css, LitElement } from 'lit' -/** - * popup - */ export class Popup extends LitElement { static get properties() { return { - crx: { type: String }, + count: { type: Number, default: 0 }, + link: { type: String, default: 'https://github.com/guocaoyi/create-chrome-ext' }, } } constructor() { super() - this.crx = 'create-chrome-ext' + + chrome.storage.sync.get(['count'], (result) => { + this.count = result.count || 0 + }) + } + + minus = () => this.count > 0 && this.count-- + + add = () => this.count++ + + updated(changedProperties) { + if (changedProperties.has('count')) { + chrome.storage.sync.set({ count: changedProperties.get('count') }) + chrome.runtime.sendMessage({ type: 'COUNT', count: this.count }) + } } render() { return html`
-

Popup Page!

- -
v 0.0.0
- - Generator by ${this.crx} +

Popup Page

+
+ + + +
+ generated by create-chrome-ext
` } - static get styles() { - return css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + static styles = css` + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; } + } - :global(body) { - min-width: 20rem; - } + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } - main { - text-align: center; - padding: 1em; - margin: 0 auto; - } + h3 { + color: #324fff; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; + } - h3 { - color: #3355ff; - 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; + } - h6 { - font-size: 0.5rem; - color: #cccccc; - margin: 0.5rem; - } + .calc button { + font-size: 1rem; + padding: 0.5rem 1rem; + border: 1px solid #324fff; + border-radius: 0.25rem; + background-color: transparent; + color: #324fff; + cursor: pointer; + outline: none; - a { - font-size: 0.5rem; - margin: 0.5rem; - color: #cccccc; - text-decoration: none; - } + width: 3rem; + margin: 0 a; + } - @media (min-width: 480px) { - h3 { - max-width: none; - } - } - ` - } + .calc label { + font-size: 1.5rem; + margin: 0 1rem; + } + + a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; + } + ` } -window.customElements.define('popup-panel', Popup) +export default Popup + +window.customElements.define('popup-root', Popup) diff --git a/template-lit-js/src/sidepanel/index.js b/template-lit-js/src/sidepanel/index.js index ea7a100..b3ed272 100644 --- a/template-lit-js/src/sidepanel/index.js +++ b/template-lit-js/src/sidepanel/index.js @@ -1,80 +1,68 @@ import { html, css, LitElement } from 'lit' -/** - * Side Panel - */ export class Sidepanel extends LitElement { static get properties() { return { - crx: { type: String }, + countSync: { type: Number, default: 0 }, + link: { type: String, default: 'https://github.com/guocaoyi/create-chrome-ext' }, } } constructor() { super() - this.crx = 'create-chrome-ext' + + 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() { return html`
-

Side Panel Page!

- -
v 0.0.0
- - Generator by ${this.crx} +

SidePanel Page

+

Count from Popup: ${this.countSync}

+ generated by create-chrome-ext
` } - static get styles() { - return css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } - - :global(body) { - min-width: 20rem; - } - - main { - text-align: center; - padding: 1em; - margin: 0 auto; - } - - h3 { - color: #3355ff; - text-transform: uppercase; - font-size: 1.5rem; - font-weight: 200; - line-height: 1.2rem; - margin: 2rem auto; + static styles = css` + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; } + } - h6 { - font-size: 0.5rem; - color: #cccccc; - margin: 0.5rem; - } + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } - a { - font-size: 0.5rem; - margin: 0.5rem; - color: #cccccc; - text-decoration: none; - } + h3 { + color: #324fff; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; + } - @media (min-width: 480px) { - h3 { - max-width: none; - } - } - ` - } + a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; + } + ` } -window.customElements.define('side-panel', Sidepanel) +export default Sidepanel + +window.customElements.define('sidepanel-root', Sidepanel) diff --git a/template-lit-ts/.vscode/extensions.json b/template-lit-ts/.vscode/extensions.json new file mode 100644 index 0000000..6a2f786 --- /dev/null +++ b/template-lit-ts/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["bierner.lit-html"] +} diff --git a/template-lit-ts/devtools.html b/template-lit-ts/devtools.html new file mode 100644 index 0000000..7e5aa16 --- /dev/null +++ b/template-lit-ts/devtools.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Lit + TS + Vite + + + + + + + diff --git a/template-lit-ts/newtab.html b/template-lit-ts/newtab.html new file mode 100644 index 0000000..ce6a8e9 --- /dev/null +++ b/template-lit-ts/newtab.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Lit + TS + Vite + + + + + + + diff --git a/template-lit-ts/options.html b/template-lit-ts/options.html index fa6bc0f..b20ce49 100644 --- a/template-lit-ts/options.html +++ b/template-lit-ts/options.html @@ -4,13 +4,11 @@ - Chrome Extension + Lit + TS + Vite App - Options + Chrome Extension + Lit + TS + Vite - -

Vite + Lit

- + diff --git a/template-lit-ts/package.json b/template-lit-ts/package.json index 82e635d..5720128 100644 --- a/template-lit-ts/package.json +++ b/template-lit-ts/package.json @@ -21,7 +21,7 @@ "fmt": "prettier --write '**/*.{ts,json,css,scss,md}'" }, "dependencies": { - "lit": "^2.8.0" + "lit": "^3.0.0" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", @@ -29,6 +29,6 @@ "path": "^0.12.7", "prettier": "^3.0.3", "typescript": "^5.2.2", - "vite": "^3.2.7" + "vite": "^4.4.11" } } diff --git a/template-lit-ts/popup.html b/template-lit-ts/popup.html index 2f4c1c1..df8ac2d 100644 --- a/template-lit-ts/popup.html +++ b/template-lit-ts/popup.html @@ -4,10 +4,11 @@ - Chrome Extension + Lit + TS + Vite App - Popup + Chrome Extension + Lit + TS + Vite + - + diff --git a/template-lit-ts/public/icons/logo.ico b/template-lit-ts/public/icons/logo.ico index 4a27211..b616def 100644 Binary files a/template-lit-ts/public/icons/logo.ico and b/template-lit-ts/public/icons/logo.ico differ diff --git a/template-lit-ts/public/icons/logo.svg b/template-lit-ts/public/icons/logo.svg index 0f11d32..c18aa5a 100644 --- a/template-lit-ts/public/icons/logo.svg +++ b/template-lit-ts/public/icons/logo.svg @@ -1,2 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/template-lit-ts/public/img/logo-128.png b/template-lit-ts/public/img/logo-128.png index 6a511d5..4c07262 100644 Binary files a/template-lit-ts/public/img/logo-128.png and b/template-lit-ts/public/img/logo-128.png differ diff --git a/template-lit-ts/public/img/logo-16.png b/template-lit-ts/public/img/logo-16.png index 872949b..356e6eb 100644 Binary files a/template-lit-ts/public/img/logo-16.png and b/template-lit-ts/public/img/logo-16.png differ diff --git a/template-lit-ts/public/img/logo-34.png b/template-lit-ts/public/img/logo-34.png index c69e674..e514bb9 100644 Binary files a/template-lit-ts/public/img/logo-34.png and b/template-lit-ts/public/img/logo-34.png differ diff --git a/template-lit-ts/public/img/logo-48.png b/template-lit-ts/public/img/logo-48.png index eface53..5fedb09 100644 Binary files a/template-lit-ts/public/img/logo-48.png and b/template-lit-ts/public/img/logo-48.png differ diff --git a/template-lit-ts/sidepanel.html b/template-lit-ts/sidepanel.html index 093d06e..e90c0a2 100644 --- a/template-lit-ts/sidepanel.html +++ b/template-lit-ts/sidepanel.html @@ -4,11 +4,11 @@ - Chrome Extension + Lit + TS + Vite App - Side Panel + Chrome Extension + Lit + TS + Vite - + diff --git a/template-lit-ts/src/assets/logo.png b/template-lit-ts/src/assets/logo.png index 520f0d8..cc588cd 100644 Binary files a/template-lit-ts/src/assets/logo.png and b/template-lit-ts/src/assets/logo.png differ diff --git a/template-lit-ts/src/background/index.ts b/template-lit-ts/src/background/index.ts index 5b7eae7..4a0687b 100644 --- a/template-lit-ts/src/background/index.ts +++ b/template-lit-ts/src/background/index.ts @@ -1,3 +1,7 @@ -console.info('chrome-ext template-lit-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-lit-ts/src/content/index.ts b/template-lit-ts/src/content/index.ts deleted file mode 100644 index 8f25b9e..0000000 --- a/template-lit-ts/src/content/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-lit-ts content script') - -export {} diff --git a/template-lit-ts/src/contentScript/index.ts b/template-lit-ts/src/contentScript/index.ts new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ b/template-lit-ts/src/contentScript/index.ts @@ -0,0 +1 @@ +console.info('contentScript is running') diff --git a/template-lit-ts/src/devtools/index.ts b/template-lit-ts/src/devtools/index.ts index 336ce12..c69e9c6 100644 --- a/template-lit-ts/src/devtools/index.ts +++ b/template-lit-ts/src/devtools/index.ts @@ -1 +1,62 @@ -export {} +import { LitElement, css, html } from 'lit' +import { customElement } from 'lit/decorators.js' + +chrome.devtools.panels.create('LitCrx', '', '../../devtools.html', function () { + console.log('devtools panel create') +}) + +@customElement('devtools-root') +export class DevTools extends LitElement { + private link = 'https://github.com/guocaoyi/create-chrome-ext' + + render() { + return html` +
+

DevTools Page

+ generated by create-chrome-ext +
+ ` + } + + static styles = css` + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; + } + } + + body { + min-width: 20rem; + } + + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } + + h3 { + color: #324fff; + 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; + } + ` +} + +export default DevTools + +declare global { + interface HTMLElementTagNameMap { + 'devtools-root': DevTools + } +} diff --git a/template-lit-ts/src/index.css b/template-lit-ts/src/index.css new file mode 100644 index 0000000..538e457 --- /dev/null +++ b/template-lit-ts/src/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-lit-ts/src/manifest.ts b/template-lit-ts/src/manifest.ts index 9f63f01..60c644a 100644 --- a/template-lit-ts/src/manifest.ts +++ b/template-lit-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-lit-ts/src/newtab/index.ts b/template-lit-ts/src/newtab/index.ts index efed131..bb327c3 100644 --- a/template-lit-ts/src/newtab/index.ts +++ b/template-lit-ts/src/newtab/index.ts @@ -1,78 +1,83 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import { LitElement, css, html } from 'lit' +import { customElement, state } from 'lit/decorators.js' -/** - * newtab - */ -@customElement('newtab') -export class Newtab extends LitElement { - @property() - crx = 'create-chrome-ext' +@customElement('newtab-root') +export class NewTab extends LitElement { + @state() + time = this.getTime() - render() { - return html` -
-

Newtab Page!

+ private link = 'https://github.com/guocaoyi/create-chrome-ext' + + private getTime(): string { + const date = new Date() + const hour = String(date.getHours()).padStart(2, '0') + const minute = String(date.getMinutes()).padStart(2, '0') + return `${hour}:${minute}` + } -
v 0.0.0
+ connectedCallback(): void { + super.connectedCallback() + let intervalId = setInterval(() => { + this.time = this.getTime() + }, 1000) - + this.addEventListener('disconnected', () => { + clearInterval(intervalId) + }) + } - Generator by ${this.crx} -
+ render() { + return html` +
+ +

${this.time}

+ generated by create-chrome-ext +
` } static styles = css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; + 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); } - :global(body) { - min-width: 20rem; - } + section { + width: 100vw; + height: 100vh; - main { - text-align: center; - padding: 1em; - margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; } - h3 { - color: #3355ff; + h1 { + color: #324fff; text-transform: uppercase; - font-size: 1.5rem; - font-weight: 200; - line-height: 1.2rem; + font-size: 6rem; 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; - } - } ` } +export default NewTab + declare global { interface HTMLElementTagNameMap { - newtab: Newtab + 'newtab-root': NewTab } } diff --git a/template-lit-ts/src/options/index.ts b/template-lit-ts/src/options/index.ts index 57594fc..208894e 100644 --- a/template-lit-ts/src/options/index.ts +++ b/template-lit-ts/src/options/index.ts @@ -1,37 +1,44 @@ import { html, css, LitElement } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import { customElement, state } from 'lit/decorators.js' -/** - * options - */ -@customElement('options-panel') +@customElement('options-root') export class Options extends LitElement { - @property() - crx = 'create-chrome-ext' + @state() + countSync = 0 - render() { - return html` -
-

Options Page!

+ private link = 'https://github.com/guocaoyi/create-chrome-ext' -
v 0.0.0
+ constructor() { + super() + 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 + } + }) + } - Generator by ${this.crx} + render() { + return html` +
+

Options Page

+

Count from Popup: ${this.countSync}

+ generated by create-chrome-ext
` } static styles = css` - :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: #324fff; + } } - :global(body) { + body { min-width: 20rem; } @@ -42,7 +49,7 @@ export class Options extends LitElement { } h3 { - color: #3355ff; + color: #324fff; text-transform: uppercase; font-size: 1.5rem; font-weight: 200; @@ -50,29 +57,19 @@ export class Options extends LitElement { 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; - } - } ` } +export default Options + declare global { interface HTMLElementTagNameMap { - 'options-panel': Options + 'options-root': Options } } diff --git a/template-lit-ts/src/popup/index.ts b/template-lit-ts/src/popup/index.ts index 398d232..0f1b019 100644 --- a/template-lit-ts/src/popup/index.ts +++ b/template-lit-ts/src/popup/index.ts @@ -1,38 +1,49 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import { html, css, LitElement, PropertyValues } from 'lit' +import { customElement, state } from 'lit/decorators.js' -/** - * popup - */ -@customElement('popup-panel') +@customElement('popup-root') export class Popup extends LitElement { - @property() - crx = 'create-chrome-ext' + @state() count = 0 - render() { - return html` -
-

Popup Page!

+ private link = 'https://github.com/guocaoyi/create-chrome-ext' -
v 0.0.0
+ constructor() { + super() + chrome.storage.sync.get(['count'], (result) => { + this.count = result.count || 0 + }) + } - + minus = () => this.count > 0 && this.count-- - Generator by ${this.crx} + add = () => (this.count += 1) + + protected updated(changedProperties: PropertyValues) { + if (changedProperties.has('count')) { + chrome.storage.sync.set({ count: changedProperties.get('count') }) + chrome.runtime.sendMessage({ type: 'COUNT', count: this.count }) + } + } + + render() { + return html` +
+

Popup Page

+
+ + + +
+ generated by create-chrome-ext
` } static styles = css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; - } - - :global(body) { - min-width: 20rem; + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; + } } main { @@ -42,7 +53,7 @@ export class Popup extends LitElement { } h3 { - color: #3355ff; + color: #324fff; text-transform: uppercase; font-size: 1.5rem; font-weight: 200; @@ -50,10 +61,30 @@ export class Popup extends LitElement { margin: 2rem auto; } - h6 { - font-size: 0.5rem; - color: #333333; - margin: 0.5rem; + .calc { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem; + } + + .calc button { + font-size: 1rem; + padding: 0.5rem 1rem; + border: 1px solid #324fff; + border-radius: 0.25rem; + background-color: transparent; + color: #324fff; + cursor: pointer; + outline: none; + + width: 3rem; + margin: 0 a; + } + + .calc label { + font-size: 1.5rem; + margin: 0 1rem; } a { @@ -62,17 +93,13 @@ export class Popup extends LitElement { color: #cccccc; text-decoration: none; } - - @media (min-width: 480px) { - h3 { - max-width: none; - } - } ` } +export default Popup + declare global { interface HTMLElementTagNameMap { - 'popup-panel': Popup + 'popup-root': Popup } } diff --git a/template-lit-ts/src/sidepanel/index.ts b/template-lit-ts/src/sidepanel/index.ts index a22e7c1..372d28e 100644 --- a/template-lit-ts/src/sidepanel/index.ts +++ b/template-lit-ts/src/sidepanel/index.ts @@ -1,36 +1,41 @@ import { html, css, LitElement } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import { customElement, state } from 'lit/decorators.js' -/** - * sidepanel - */ -@customElement('side-panel') +@customElement('sidepanel-root') export class Sidepanel extends LitElement { - @property() - crx = 'create-chrome-ext' + @state() + countSync = 0 + + private link = 'https://github.com/guocaoyi/create-chrome-ext' + + constructor() { + super() + 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() { return html`
-

Side Panel Page!

- -
v 0.0.0
- - Generator by ${this.crx} +

SidePanel Page

+

Count from Popup: ${this.countSync}

+ generated by create-chrome-ext
` } static styles = css` - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; - } - - :global(body) { - min-width: 20rem; + @media (prefers-color-scheme: light) { + a:hover { + color: #324fff; + } } main { @@ -40,7 +45,7 @@ export class Sidepanel extends LitElement { } h3 { - color: #3355ff; + color: #324fff; text-transform: uppercase; font-size: 1.5rem; font-weight: 200; @@ -48,29 +53,17 @@ export class Sidepanel extends LitElement { 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; - } - } ` } declare global { interface HTMLElementTagNameMap { - 'side-panel': Sidepanel + 'sidepanel-root': Sidepanel } } diff --git a/template-lit-ts/tsconfig.json b/template-lit-ts/tsconfig.json index b080b2b..d82be2c 100644 --- a/template-lit-ts/tsconfig.json +++ b/template-lit-ts/tsconfig.json @@ -13,6 +13,7 @@ "moduleResolution": "Node", "isolatedModules": true, "allowSyntheticDefaultImports": true, + "resolveJsonModule": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "useDefineForClassFields": false, diff --git a/template-lit-ts/tsconfig.node.json b/template-lit-ts/tsconfig.node.json index c65cd0a..b464d82 100644 --- a/template-lit-ts/tsconfig.node.json +++ b/template-lit-ts/tsconfig.node.json @@ -2,7 +2,8 @@ "compilerOptions": { "composite": true, "module": "ESNext", - "moduleResolution": "Node" + "moduleResolution": "Node", + "resolveJsonModule": true }, "include": ["vite.config.ts", "src/manifest.ts"] } diff --git a/template-preact-js/src/popup/Popup.jsx b/template-preact-js/src/popup/Popup.jsx index d481e36..bfa6b26 100644 --- a/template-preact-js/src/popup/Popup.jsx +++ b/template-preact-js/src/popup/Popup.jsx @@ -16,12 +16,6 @@ export const Popup = () => { chrome.storage.sync.get(['count'], (result) => { setCount(result.count || 0) }) - - chrome.runtime.onMessage.addListener((request) => { - if (request.type === 'COUNT') { - setCount(request.count || 0) - } - }) }, []) useEffect(() => { diff --git a/template-preact-ts/src/popup/Popup.tsx b/template-preact-ts/src/popup/Popup.tsx index d481e36..bfa6b26 100644 --- a/template-preact-ts/src/popup/Popup.tsx +++ b/template-preact-ts/src/popup/Popup.tsx @@ -16,12 +16,6 @@ export const Popup = () => { chrome.storage.sync.get(['count'], (result) => { setCount(result.count || 0) }) - - chrome.runtime.onMessage.addListener((request) => { - if (request.type === 'COUNT') { - setCount(request.count || 0) - } - }) }, []) useEffect(() => { diff --git a/template-react-js/src/popup/Popup.jsx b/template-react-js/src/popup/Popup.jsx index 5f7c498..0e4829e 100644 --- a/template-react-js/src/popup/Popup.jsx +++ b/template-react-js/src/popup/Popup.jsx @@ -16,12 +16,6 @@ export const Popup = () => { chrome.storage.sync.get(['count'], (result) => { setCount(result.count || 0) }) - - chrome.runtime.onMessage.addListener((request) => { - if (request.type === 'COUNT') { - setCount(request.count || 0) - } - }) }, []) useEffect(() => { diff --git a/template-react-ts/src/popup/Popup.tsx b/template-react-ts/src/popup/Popup.tsx index 5f7c498..0e4829e 100644 --- a/template-react-ts/src/popup/Popup.tsx +++ b/template-react-ts/src/popup/Popup.tsx @@ -16,12 +16,6 @@ export const Popup = () => { chrome.storage.sync.get(['count'], (result) => { setCount(result.count || 0) }) - - chrome.runtime.onMessage.addListener((request) => { - if (request.type === 'COUNT') { - setCount(request.count || 0) - } - }) }, []) useEffect(() => { diff --git a/template-solid-js/src/options/Options.jsx b/template-solid-js/src/options/Options.jsx index 83e1e20..8767ad3 100644 --- a/template-solid-js/src/options/Options.jsx +++ b/template-solid-js/src/options/Options.jsx @@ -16,7 +16,7 @@ export const Options = () => { setCountSync(request.count || 0) } }) - }, []) + }) return (
diff --git a/template-solid-js/src/popup/Popup.jsx b/template-solid-js/src/popup/Popup.jsx index 1db3842..64ba52d 100644 --- a/template-solid-js/src/popup/Popup.jsx +++ b/template-solid-js/src/popup/Popup.jsx @@ -16,18 +16,12 @@ export const Popup = () => { chrome.storage.sync.get(['count'], (result) => { setCount(result.count || 0) }) - - 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]) + chrome.storage.sync.set({ count: count() }) + chrome.runtime.sendMessage({ type: 'COUNT', count: count() }) + }) return (
diff --git a/template-solid-js/src/sidepanel/Sidepanel.jsx b/template-solid-js/src/sidepanel/Sidepanel.jsx index 1f35fef..0eaf3ea 100644 --- a/template-solid-js/src/sidepanel/Sidepanel.jsx +++ b/template-solid-js/src/sidepanel/Sidepanel.jsx @@ -16,7 +16,7 @@ export const Sidepanel = () => { setCountSync(request.count || 0) } }) - }, []) + }) return (
diff --git a/template-solid-ts/src/options/Options.tsx b/template-solid-ts/src/options/Options.tsx index 1d38de8..03d700f 100644 --- a/template-solid-ts/src/options/Options.tsx +++ b/template-solid-ts/src/options/Options.tsx @@ -19,7 +19,7 @@ export const Options = () => { setCountSync(request.count || 0) } }) - }, []) + }) return (
diff --git a/template-solid-ts/src/popup/Popup.tsx b/template-solid-ts/src/popup/Popup.tsx index bf898f3..9edf43b 100644 --- a/template-solid-ts/src/popup/Popup.tsx +++ b/template-solid-ts/src/popup/Popup.tsx @@ -19,18 +19,12 @@ export const Popup = () => { chrome.storage.sync.get(['count'], (result) => { setCount(result.count || 0) }) - - 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]) + chrome.storage.sync.set({ count: count() }) + chrome.runtime.sendMessage({ type: 'COUNT', count: count() }) + }) return (
diff --git a/template-solid-ts/src/sidepanel/Sidepanel.tsx b/template-solid-ts/src/sidepanel/Sidepanel.tsx index 41ecfd2..82974e2 100644 --- a/template-solid-ts/src/sidepanel/Sidepanel.tsx +++ b/template-solid-ts/src/sidepanel/Sidepanel.tsx @@ -19,7 +19,7 @@ export const Sidepanel = () => { setCountSync(request.count || 0) } }) - }, []) + }) return (
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 89ff846..c6315a8 100644 --- a/template-stencil-ts/src/components/popup-root/popup-root.tsx +++ b/template-stencil-ts/src/components/popup-root/popup-root.tsx @@ -20,12 +20,6 @@ export class PopupRoot { 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 = () => { diff --git a/template-svelte-js/src/popup/Popup.svelte b/template-svelte-js/src/popup/Popup.svelte index 6f1c8af..b439cc3 100644 --- a/template-svelte-js/src/popup/Popup.svelte +++ b/template-svelte-js/src/popup/Popup.svelte @@ -15,12 +15,10 @@ onMount(() => { chrome.storage.sync.get(['count'], (result) => { - console.info('Popup Page Mounted', count, result.count) count = result.count ?? 0 }) return () => { - console.info('Popup Page Destroyed', count) chrome.storage.sync.set({ count }) } }) diff --git a/template-svelte-ts/src/popup/Popup.svelte b/template-svelte-ts/src/popup/Popup.svelte index b9bc554..35badb3 100644 --- a/template-svelte-ts/src/popup/Popup.svelte +++ b/template-svelte-ts/src/popup/Popup.svelte @@ -15,12 +15,10 @@ onMount(() => { chrome.storage.sync.get(['count'], (result) => { - console.info('Popup Page Mounted', count, result.count) count = result.count ?? 0 }) return () => { - console.info('Popup Page Destroyed', count) chrome.storage.sync.set({ count }) } }) diff --git a/template-vanilla-js/package.json b/template-vanilla-js/package.json index 9709a8f..3f1a346 100644 --- a/template-vanilla-js/package.json +++ b/template-vanilla-js/package.json @@ -24,6 +24,6 @@ "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", "prettier": "^3.0.3", - "vite": "^3.2.7" + "vite": "^4.4.11" } } diff --git a/template-vanilla-js/src/popup/index.js b/template-vanilla-js/src/popup/index.js index dbfbb9b..30dde8e 100644 --- a/template-vanilla-js/src/popup/index.js +++ b/template-vanilla-js/src/popup/index.js @@ -63,12 +63,4 @@ document.addEventListener('DOMContentLoaded', () => { chrome.storage.sync.set({ count }) chrome.runtime.sendMessage({ type: 'COUNT', count }) }) - - // Listen for messages from the Popup - chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { - if (request.type === 'COUNT') { - count = request.count || 0 - countLabel.textContent = `${count}` - } - }) }) diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json index 3d06091..0743238 100644 --- a/template-vanilla-ts/package.json +++ b/template-vanilla-ts/package.json @@ -26,6 +26,6 @@ "@types/chrome": "^0.0.246", "prettier": "^3.0.3", "typescript": "^5.2.2", - "vite": "^3.2.7" + "vite": "^4.4.11" } } diff --git a/template-vanilla-ts/src/popup/index.ts b/template-vanilla-ts/src/popup/index.ts index 56e9e1f..0595f48 100644 --- a/template-vanilla-ts/src/popup/index.ts +++ b/template-vanilla-ts/src/popup/index.ts @@ -63,12 +63,4 @@ document.addEventListener('DOMContentLoaded', () => { chrome.storage.sync.set({ count }) chrome.runtime.sendMessage({ type: 'COUNT', count }) }) - - // Listen for messages from the Popup - chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { - if (request.type === 'COUNT') { - count = request.count || 0 - countLabel.textContent = `${count}` - } - }) }) diff --git a/template-vue-js/src/popup/Popup.vue b/template-vue-js/src/popup/Popup.vue index 73b2b38..1bf8b6d 100644 --- a/template-vue-js/src/popup/Popup.vue +++ b/template-vue-js/src/popup/Popup.vue @@ -18,7 +18,6 @@ onMounted(() => { watch(count, (newCount) => { chrome.storage.sync.set({ count: newCount }) - console.info('popup -->', newCount) chrome.runtime.sendMessage({ type: 'COUNT', count: count.value }) })