From d9339d2eeda2265dde04728704eaba5436008f8f Mon Sep 17 00:00:00 2001 From: Yalda Date: Mon, 16 Oct 2023 12:59:13 +0800 Subject: [PATCH] feat(lit):out of box functions, countor \ newtab timer \ events --- template-lit-js/.vscode/extensions.json | 3 + template-lit-js/devtools.html | 14 ++ template-lit-js/newtab.html | 14 ++ template-lit-js/options.html | 4 +- template-lit-js/popup.html | 4 +- template-lit-js/public/icons/logo.ico | Bin 4239 -> 15406 bytes template-lit-js/public/icons/logo.svg | 3 +- template-lit-js/public/img/logo-128.png | Bin 3086 -> 3102 bytes template-lit-js/public/img/logo-16.png | Bin 452 -> 445 bytes template-lit-js/public/img/logo-34.png | Bin 807 -> 806 bytes template-lit-js/public/img/logo-48.png | Bin 1228 -> 1098 bytes template-lit-js/sidepanel.html | 4 +- template-lit-js/src/background/index.js | 8 +- template-lit-js/src/content/index.js | 3 - template-lit-js/src/contentScript/index.js | 1 + template-lit-js/src/devtools/index.js | 57 +++++++- template-lit-js/src/index.css | 31 +++-- template-lit-js/src/manifest.js | 15 ++- template-lit-js/src/newtab/index.js | 80 ++++++++++- template-lit-js/src/newtab/newtab.js | 80 ----------- template-lit-js/src/options/index.js | 100 +++++++------- template-lit-js/src/popup/index.js | 127 +++++++++++------- template-lit-js/src/sidepanel/index.js | 98 ++++++-------- template-lit-ts/.vscode/extensions.json | 3 + template-lit-ts/devtools.html | 14 ++ template-lit-ts/newtab.html | 14 ++ template-lit-ts/options.html | 6 +- template-lit-ts/package.json | 4 +- template-lit-ts/popup.html | 5 +- template-lit-ts/public/icons/logo.ico | Bin 4239 -> 15406 bytes template-lit-ts/public/icons/logo.svg | 3 +- template-lit-ts/public/img/logo-128.png | Bin 3086 -> 3102 bytes template-lit-ts/public/img/logo-16.png | Bin 452 -> 445 bytes template-lit-ts/public/img/logo-34.png | Bin 807 -> 806 bytes template-lit-ts/public/img/logo-48.png | Bin 1228 -> 1098 bytes template-lit-ts/sidepanel.html | 4 +- template-lit-ts/src/assets/logo.png | Bin 7883 -> 5928 bytes template-lit-ts/src/background/index.ts | 8 +- template-lit-ts/src/content/index.ts | 3 - template-lit-ts/src/contentScript/index.ts | 1 + template-lit-ts/src/devtools/index.ts | 63 ++++++++- template-lit-ts/src/index.css | 28 ++++ template-lit-ts/src/manifest.ts | 15 ++- template-lit-ts/src/newtab/index.ts | 99 +++++++------- template-lit-ts/src/options/index.ts | 65 +++++---- template-lit-ts/src/popup/index.ts | 99 +++++++++----- template-lit-ts/src/sidepanel/index.ts | 63 ++++----- template-lit-ts/tsconfig.json | 1 + template-lit-ts/tsconfig.node.json | 3 +- template-preact-js/src/popup/Popup.jsx | 6 - template-preact-ts/src/popup/Popup.tsx | 6 - template-react-js/src/popup/Popup.jsx | 6 - template-react-ts/src/popup/Popup.tsx | 6 - template-solid-js/src/options/Options.jsx | 2 +- template-solid-js/src/popup/Popup.jsx | 14 +- template-solid-js/src/sidepanel/Sidepanel.jsx | 2 +- template-solid-ts/src/options/Options.tsx | 2 +- template-solid-ts/src/popup/Popup.tsx | 14 +- template-solid-ts/src/sidepanel/Sidepanel.tsx | 2 +- .../src/components/popup-root/popup-root.tsx | 6 - template-svelte-js/src/popup/Popup.svelte | 2 - template-svelte-ts/src/popup/Popup.svelte | 2 - template-vanilla-js/package.json | 2 +- template-vanilla-js/src/popup/index.js | 8 -- template-vanilla-ts/package.json | 2 +- template-vanilla-ts/src/popup/index.ts | 8 -- template-vue-js/src/popup/Popup.vue | 1 - 67 files changed, 711 insertions(+), 527 deletions(-) create mode 100644 template-lit-js/.vscode/extensions.json create mode 100644 template-lit-js/devtools.html create mode 100644 template-lit-js/newtab.html delete mode 100644 template-lit-js/src/content/index.js create mode 100644 template-lit-js/src/contentScript/index.js delete mode 100644 template-lit-js/src/newtab/newtab.js create mode 100644 template-lit-ts/.vscode/extensions.json create mode 100644 template-lit-ts/devtools.html create mode 100644 template-lit-ts/newtab.html delete mode 100644 template-lit-ts/src/content/index.ts create mode 100644 template-lit-ts/src/contentScript/index.ts create mode 100644 template-lit-ts/src/index.css 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 4a27211202847704f26672c2813b68e6d2252625..b616def2c17676c589987b0b80d8770f90caab5b 100644 GIT binary patch literal 15406 zcmeHNONbmr7;fDV;{#0uQ9S4#qS-9&rn^TY0S}7@!R&VT2APnHAbJU+5)TQupbaV~4SB>Z0;Z1q#*L&!vz1?d(Z>#5d)6@F<%m&Z<63=`;egCBA{rr&U&0q|sV1|B< z&goArH9{2!pQt4KMJ2&i-SC;u@UD!AiW>J|>`~0SiKa>#-eC;J+H_=Y9R5@?r;`@P zS~OC=_P86MRn)98!BJw6_1c)@@Q6yb>`<}4sFvoosc6f~()cV14_g>-TC!@khqtWO2;e7LF>13tzYvxz&X=kR<7SL#)2K`gZ{(9)dE`6qh6Oii# zeAaeIe?B4aI0j<}=1byEN4l(8wRx_+zh_wN5I=)I1db) zi!kW@9;(a@&wPKXNFP#N%a1kRZ$T#4DmKnB^K-p_$d-Yev2s1Xg|oC(AmANB(g@TL_z$o`3Vbvv)ZE{cuUsJwfAaKxZ=b=jTJ$! zTWnWg|GMrM?b^xS{I&fRA0V+}2~GMR`jR+!7wucO7JjIG7Uq_ntz3)kNaGLTFY$JL@t0uGarY=8n|~m-*VNtq>v+7L{L4lN+f+;bX=C7LD^}DoQx-cQ2XFbYBRKa% z&A;h{Hdllg?wRyddYu6#f?SS<%7s!j$z+U%iht)=ypM# z@g2u-Y!i77^90c7AUxs+;zyRYYz3yh&?{m(gO;nemH18V_c->9%q0!df^QlzY$31W zr#Auj7bqDa6jV@cpM3;8_M!a++=lmXd(tKk@}k-g;SY4~ zM9%*_Fds)_tzx*CJL!?fap4KxgDgSLXX3vOnb7x_)htG_9>jLw8G(17=UXi-tWy!{ zAxU^?6=Yr}gG+(|SgPy;u&=@X?E&tKHDWhwx+qwH$z=_q?{WABY{K7TfIVFUun<#^ z^T0DN=SJ(hS^s$Savoquy4WSLTiVX7=2>->4>27l#xgw;+v{p0b-e-iERstypB$vQ z`tEDMxVH#D^A})n^i7R(@cplvUc)53e1F@e*3 z>?3L&yhCJtC7FM=tw{|A_A8#>)b>0-&U_~g$;-o!!QZ|YEnf>`4J%%f_({hz<#SqV zyMaC2ubRy%+%4da7kWSYBiWZE_&R%T-WT#zX#E7j(YbspCf1i~8}w zZ*uKP#c%2alZ&5qjq+M}@w&!Ge@uO*7-y00kJtG%wWZ0$uj^uyi~qFL`z95?sYmvU zpZ8aBfV!F0BL5ln!u-9cee7v_ZjWjE%sVi~vX$aDb2fD?)jjTOKfm&O7UTiU1xzCr z=Fw7rv7Vdv`JOcT!;d%~c@JyHy8dd`)T_7br|%=*$8SCdXiJUf`ow=murpTgH-3&8 z{|CsK253?6O<(wlnb?^F3@?A_wRc7D`@x^(FOq{TqyFAc{uul3K=!Dk576S^Q;~lh zzOQ3jha8+()BI8JGk4jxs>+}uEId+@lNebxlZf7jN&Z@K(k)=;H> zqH7(IT0rfi-?~X_-uPv%i1$UjbE)^`o;oLYG81@zYStq0u(`i>z9Vq5=lOFw z^!sbG2GhgW&*)fV$iE+8`~upB&nSC|85r|1Ze<*+>%UcMsMlqVp1Z2Q->~J_ ZUFG*Ps2Q_%oW}1q&D)=EOJFr6@E^SUKMDW< literal 4239 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 vL<+CQP*1Hs?Jv^e_4 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 6a511d568cba20602d4a7f80693449b6ed494e3f..4c072621c6d72ec5449938a9f5b2df9c4b4a0d36 100644 GIT binary patch delta 3084 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 delta 3067 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 diff --git a/template-lit-js/public/img/logo-16.png b/template-lit-js/public/img/logo-16.png index 872949b76c446d970f1cd219f9b7d37c39eb140e..356e6eb3dd76d3ab566d018e4e1c6523e6f5bc98 100644 GIT binary patch delta 406 zcmV;H0crlk1HA)~F@JYSL_t(IPpy+ZC`Dly$A8b^=3~REC>sk`G07yGD^Zk`1=-k4 zm}Fr>7V=T#O0h^5x)bGNk%hX-%8KOvbx!A=j^o@xd56<^-lymH{yXpQ7?IW5qw3Eu zIt*F_9d6s;RB)Ln;`HLcp2H&+E|MuN07F1k6ztb8z~=R#O@HS50U()@3Jk?=Umuz` z>phyf)NjVlUjPyVH%GQ>4V|hiDdh^N^#DdX2g`9V2gVV7elPp+PO~MuHG)_T2E;55 z^$|cBP)?2v#&pm#MqR)bV(UlK($dLsD>Py9tBV9{0je^kz&>?=JNSou3rR$|Ik z_}9;r-|*BfqZepHwE22xfXv4m`*$by8s>fjah{g+Vh?}B`~Uy|07*qoM6N<$g3;!; ArvLx| delta 413 zcmV;O0b>5W1H=Q6F@JtZL_t(IPpy-`OIuMGhMzY^i`}BDpwO*TNkYXzT*N;>?gfP+ zWND>ayLBp^N|!nraZ&sMiV3cQIJ9IamRh>GSV*C3x@()fl|>2b-Ln9_n|xMCl+O_@l%UFn`(&PU42m_V=n@xAPr9 zA+-Ax^;|xyD6WmCV&Dafy}JNp7Qa=suc^=@S8xVQ!~juIi*hfRGrYuvNv=Kw1?59O z7p%7nY~Cru<7)sj3_P@{Nxbdsg%>IY-m!R=1^|{Y=3E)FZjqD7waj1|AhWAN=sGZd ztphO=$EJ)pNPlvlY(A#}z^@2!0X*sjklD1@x&`o4g}`fwegH#Bk-Gl|_|dU1dB*q>Q^Q7G&)CQ|c@m41DE#U!BH64&O5cyl?UNIw-*>FM z*-~BRO{DOR&(vOs)V_ouW2P;pW4leQC29|#`lX^jX%_B(%NU|Jz`e7Z00000NkvXX Hu0mjfYQ4q! diff --git a/template-lit-js/public/img/logo-34.png b/template-lit-js/public/img/logo-34.png index c69e674136ab81ad86209c6042a84f16df986a25..e514bb987a55dc711c5f46c961e7fd020101b160 100644 GIT binary patch delta 769 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 !yR`{7 zBsJmAoC3>R<`?{nt)LZmdI`cCxdkwY5b<(U;hUW#dLJ>Zfm51Zr!%W|p-zNDJ+0|-DwCQ6?I2@MYJV(_ zaU$!-{{X9I!Evx>?sKM|6j|@T?rv?;jhLW0?6xa*{lvd0qRf9#Zr&<$DIj%`q+;KM z2{=jFw`#{*kjx{-@eO~YT(7VeV-geV8R#TvYKB9MYvo|V=5(c5W|_cDESxlLa@&Bd zx6!PENt4(~I(#D(M%4Cm8=9Zo5G1Axz7)rpoew#i)ki1${{W5}$a-*4$7uin002ov JPDHLkV1lr{E<^wT 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 4a27211202847704f26672c2813b68e6d2252625..b616def2c17676c589987b0b80d8770f90caab5b 100644 GIT binary patch literal 15406 zcmeHNONbmr7;fDV;{#0uQ9S4#qS-9&rn^TY0S}7@!R&VT2APnHAbJU+5)TQupbaV~4SB>Z0;Z1q#*L&!vz1?d(Z>#5d)6@F<%m&Z<63=`;egCBA{rr&U&0q|sV1|B< z&goArH9{2!pQt4KMJ2&i-SC;u@UD!AiW>J|>`~0SiKa>#-eC;J+H_=Y9R5@?r;`@P zS~OC=_P86MRn)98!BJw6_1c)@@Q6yb>`<}4sFvoosc6f~()cV14_g>-TC!@khqtWO2;e7LF>13tzYvxz&X=kR<7SL#)2K`gZ{(9)dE`6qh6Oii# zeAaeIe?B4aI0j<}=1byEN4l(8wRx_+zh_wN5I=)I1db) zi!kW@9;(a@&wPKXNFP#N%a1kRZ$T#4DmKnB^K-p_$d-Yev2s1Xg|oC(AmANB(g@TL_z$o`3Vbvv)ZE{cuUsJwfAaKxZ=b=jTJ$! zTWnWg|GMrM?b^xS{I&fRA0V+}2~GMR`jR+!7wucO7JjIG7Uq_ntz3)kNaGLTFY$JL@t0uGarY=8n|~m-*VNtq>v+7L{L4lN+f+;bX=C7LD^}DoQx-cQ2XFbYBRKa% z&A;h{Hdllg?wRyddYu6#f?SS<%7s!j$z+U%iht)=ypM# z@g2u-Y!i77^90c7AUxs+;zyRYYz3yh&?{m(gO;nemH18V_c->9%q0!df^QlzY$31W zr#Auj7bqDa6jV@cpM3;8_M!a++=lmXd(tKk@}k-g;SY4~ zM9%*_Fds)_tzx*CJL!?fap4KxgDgSLXX3vOnb7x_)htG_9>jLw8G(17=UXi-tWy!{ zAxU^?6=Yr}gG+(|SgPy;u&=@X?E&tKHDWhwx+qwH$z=_q?{WABY{K7TfIVFUun<#^ z^T0DN=SJ(hS^s$Savoquy4WSLTiVX7=2>->4>27l#xgw;+v{p0b-e-iERstypB$vQ z`tEDMxVH#D^A})n^i7R(@cplvUc)53e1F@e*3 z>?3L&yhCJtC7FM=tw{|A_A8#>)b>0-&U_~g$;-o!!QZ|YEnf>`4J%%f_({hz<#SqV zyMaC2ubRy%+%4da7kWSYBiWZE_&R%T-WT#zX#E7j(YbspCf1i~8}w zZ*uKP#c%2alZ&5qjq+M}@w&!Ge@uO*7-y00kJtG%wWZ0$uj^uyi~qFL`z95?sYmvU zpZ8aBfV!F0BL5ln!u-9cee7v_ZjWjE%sVi~vX$aDb2fD?)jjTOKfm&O7UTiU1xzCr z=Fw7rv7Vdv`JOcT!;d%~c@JyHy8dd`)T_7br|%=*$8SCdXiJUf`ow=murpTgH-3&8 z{|CsK253?6O<(wlnb?^F3@?A_wRc7D`@x^(FOq{TqyFAc{uul3K=!Dk576S^Q;~lh zzOQ3jha8+()BI8JGk4jxs>+}uEId+@lNebxlZf7jN&Z@K(k)=;H> zqH7(IT0rfi-?~X_-uPv%i1$UjbE)^`o;oLYG81@zYStq0u(`i>z9Vq5=lOFw z^!sbG2GhgW&*)fV$iE+8`~upB&nSC|85r|1Ze<*+>%UcMsMlqVp1Z2Q->~J_ ZUFG*Ps2Q_%oW}1q&D)=EOJFr6@E^SUKMDW< literal 4239 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 vL<+CQP*1Hs?Jv^e_4 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 6a511d568cba20602d4a7f80693449b6ed494e3f..4c072621c6d72ec5449938a9f5b2df9c4b4a0d36 100644 GIT binary patch delta 3084 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 delta 3067 zcmV*c_F@MNOL_t(|UhSQ4j1=V^$G^WhEK!M?_^N56jTO$&qGk7>X<8a9 z(M0|<(A?~iv?*3CYBWtsUsU2HmPCVZ>YHjsS`?Z#;dUbk$h|A}j|?(=!=ZzfDQzyyE^x`_9W{FzR7Tezsx9TLf&cJM97 z!AfQ<6G;bfl_tL~1TYYeRI51HQ^h|z9g2YIU$+439AG^I>j2D;n;paDrU)3R0((C_kC9Wa(v)HS(&};zK+$D! zhp)#>(r=OWF53#Czc2z|ukX>JY)xscJ(mC!`gx5**u=ovyarCjE&}#d89OS&G%8ci zMA=*c&~1rtOkf^C$OQo1p7=b2kSPG)*uYMyTI6}(}Av+P1x<1={{Y4Y6GC?@@oL@)@Aq{ll!{w z(LFkR)&fA$T8J$C691yci1bXm-CuTE=-t)D0Y`+bj64X&jEpjhHE7;YldZ6!4kAb5V6N=bz! z2EY#TBn`QSdMO5r5&;kn@4leH6)Q4n1PG5L88(&%Ae`7aXvg-GW=dPVvsDKxWhaoN z0e>jEywA?+X-i^S!K1!MQVVIN0I>7$CrgZg{_~*=c)|9@Qo_4K3OMd{e zxch~{3@og8bjoy)Oz2zc@?r;g&xEde9qn3yrT}Dh_Y0$akFKz(=m z9{r>dfRg|gMtY^WKr;X|t28P;tC7G4CqM8#T6773Q)}g>1;8i(o2gLZ?ZjxicHEpvEtiBz zF9@+e0nu4w!i!|OV-#hUZ2_Vpr1bkS0l-@TmMayTLYM_0MeyXS9u@%PW(+{sZvl|c zVu~8a1pwj^FgIuNS$_ahq*K1?hXR0q1NfqRT|G4{0D9uuLh6460J+-Y)dFA?fO7(X z+zbQTK7i5W3uPB902*Visx{MSVgP{s3D6Yb4getd39y~OxeGwh3AB%aa~FW%G0+YK z&0PS3fgn2+Ja+*IhJwZB3&vK-M8#TF$H~qHMnyXKe#}k>$A5}bvO=n0PNqG&RxllG z7lcFyDrt$l13-k$c1c*$?8d0q0RXJFi$Y^0GHH>#0}w0<70%^pK0sB_Y$q@h+nHtI zApp4<3$Or0CQem>%P)rXmG~uQ1g{HceOUm^WPk`SkC*BGpam%O^ACyeM>DG1Yq0>B z$pSNeR2il}1%CkK>Fpp3fEfTp2T*JiQ@=xq*u!?Q8TGBTSOAP<;Dql{uxt4x0J1t5 zqS0LofPMh#50bbHK#A{X#!mg}Z66@(7!%=v@iM(Ms|Dz`ZQ|@WKugS;Zxbhqchg3Z z7J%jewA?5%cpU7atzsih;RctqH7Ht7&3PAhKqJP6-;jY*&-U84RfcD$PhX8cN zfe{vfrT|1A7!h^`jUN|RGuMs-=y^ztePm2HH;~DJkwUixKo0;?hel=D3Uu?aap5`4 z|J0M>)>5U9jmxwZVEoJFr1FBxhY46_ zGW&^-j(^Rv6|jd#t3xE!;n86$kje4!0Nx|Q&S}P9j(Q}Hvgx=>93KzhE(cg+`Vejr ztklQH3n5|0MI0pAmCbU;Q5E0dGt)g-@%A42s9lvfN3Nhy;zx<`TzuWOWY!U2!ef;( zJs)L9EC7U%qRV1G;Z;!r?f1EezyaT*)p0D50e>LVA>ugB*fN(QaK(^stJuT_AnXu6 z!N5~C(D{u30fXZnJssCVDFDKsf_(ti#8qI+8I8cG@6lQrjnV)t9pF2hDh>j;QAUw1 zt33i|s}5Ek9in$+G)V&xv;rl57>pNW6xp(xBS3h>FVl8eEr|dKA=m}RMp=cnyoLx6 zc7OY2N_6ULVgSPaz-s{R*5HyA89xHA`ySmBzxeEusQ?Her~p`+)BsyARRoUu9u?9^ zNDV*;!N&k@N@IwvD;>Akp8>cgtwFYatO!i{9$g!&WJDol0E7_a zYTscM0m`9_bG}D6sIp5b03ihL0$8HTKz}P|Rs@du9^I}oCdvT_As7V^YcfKmGhHrg zzweRq5m+q%1Q3+C42Ij~NipLd!Sl;h(xFTn03if+uqbWTQVjCMQLPn#5CSo5EM^ex z+(Dd-TrP7Kgux`kyE1CD10akECy)dL%74RTob8~pqg4lkvJ*Q={4)YT&9FX~?SFcL z=;v~&`TQhFudibifba=HtSs7MmzQ0Ux&r{V`5qlgn^c+l#sR1q7cMk?+^#mp874dv zX91^7V&j(03;bD-Tz>%}Pl>O^JXZj8D+qZ^e69hg8CP^!JTa^Xur5zW z+{bLQPXibMu-A0YKBj#^v0SzQjSh(2%dT61bq=teXJD8wFcRxshaV2Jf`y#TJ#6uJulCP1hV@ diff --git a/template-lit-ts/public/img/logo-16.png b/template-lit-ts/public/img/logo-16.png index 872949b76c446d970f1cd219f9b7d37c39eb140e..356e6eb3dd76d3ab566d018e4e1c6523e6f5bc98 100644 GIT binary patch delta 406 zcmV;H0crlk1HA)~F@JYSL_t(IPpy+ZC`Dly$A8b^=3~REC>sk`G07yGD^Zk`1=-k4 zm}Fr>7V=T#O0h^5x)bGNk%hX-%8KOvbx!A=j^o@xd56<^-lymH{yXpQ7?IW5qw3Eu zIt*F_9d6s;RB)Ln;`HLcp2H&+E|MuN07F1k6ztb8z~=R#O@HS50U()@3Jk?=Umuz` z>phyf)NjVlUjPyVH%GQ>4V|hiDdh^N^#DdX2g`9V2gVV7elPp+PO~MuHG)_T2E;55 z^$|cBP)?2v#&pm#MqR)bV(UlK($dLsD>Py9tBV9{0je^kz&>?=JNSou3rR$|Ik z_}9;r-|*BfqZepHwE22xfXv4m`*$by8s>fjah{g+Vh?}B`~Uy|07*qoM6N<$g3;!; ArvLx| delta 413 zcmV;O0b>5W1H=Q6F@JtZL_t(IPpy-`OIuMGhMzY^i`}BDpwO*TNkYXzT*N;>?gfP+ zWND>ayLBp^N|!nraZ&sMiV3cQIJ9IamRh>GSV*C3x@()fl|>2b-Ln9_n|xMCl+O_@l%UFn`(&PU42m_V=n@xAPr9 zA+-Ax^;|xyD6WmCV&Dafy}JNp7Qa=suc^=@S8xVQ!~juIi*hfRGrYuvNv=Kw1?59O z7p%7nY~Cru<7)sj3_P@{Nxbdsg%>IY-m!R=1^|{Y=3E)FZjqD7waj1|AhWAN=sGZd ztphO=$EJ)pNPlvlY(A#}z^@2!0X*sjklD1@x&`o4g}`fwegH#Bk-Gl|_|dU1dB*q>Q^Q7G&)CQ|c@m41DE#U!BH64&O5cyl?UNIw-*>FM z*-~BRO{DOR&(vOs)V_ouW2P;pW4leQC29|#`lX^jX%_B(%NU|Jz`e7Z00000NkvXX Hu0mjfYQ4q! diff --git a/template-lit-ts/public/img/logo-34.png b/template-lit-ts/public/img/logo-34.png index c69e674136ab81ad86209c6042a84f16df986a25..e514bb987a55dc711c5f46c961e7fd020101b160 100644 GIT binary patch delta 769 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 !yR`{7 zBsJmAoC3>R<`?{nt)LZmdI`cCxdkwY5b<(U;hUW#dLJ>Zfm51Zr!%W|p-zNDJ+0|-DwCQ6?I2@MYJV(_ zaU$!-{{X9I!Evx>?sKM|6j|@T?rv?;jhLW0?6xa*{lvd0qRf9#Zr&<$DIj%`q+;KM z2{=jFw`#{*kjx{-@eO~YT(7VeV-geV8R#TvYKB9MYvo|V=5(c5W|_cDESxlLa@&Bd zx6!PENt4(~I(#D(M%4Cm8=9Zo5G1Axz7)rpoew#i)ki1${{W5}$a-*4$7uin002ov JPDHLkV1lr{E<^wT 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 520f0d8581b5c41227849100a3a8d59fe44debf0..cc588cd29b987f78d519f9bf198aae80292f22ce 100644 GIT binary patch literal 5928 zcmYjVc{o)6_rG_>*wthiyT+bn?2>&jG6*GG_C3myebM+o9&;kI!po_&Alh?k}i<**r ze`!%sKwdyUV;xPP;vLs_06@&?Vl+&GZGSwzn`*ik(%U}VDz-{-Q&djYkekVJ=u!0R zuwhsRP=Dcd-MRhg4<1hq#oURqqg`$SHt%zY7bjOXFx@$BN)EDr-3Z(i8%^cz(QN)# zyE;^Z&bf4mmOdJHeinTfmsP$VqV)4K-K)l+pAYtr)rNB&5TEx$zAhiAEzgI&Yh6~6 z)Hq|uyz*mlz3k~FF)g>7Pq@#xMoV#%L`X4(y(f8z%K+|P@3G3>Pb$*J&%JAu{8uJq zn;H0Te;mn?Odw8+6sz3*v9p{P-s7MdM(K8w>ZZmUv>TO_)l`VznLWm;ICg$oE-E&6 zC%i|)io)Bbw9#HsBu*|w&41@kSl+#M`<`y3HT}%EkPU@WKJ`)VF99&GXL56B(=t?W z1aMT#1&m8@k6{H_F5>p~AjsOBtuL*{#>U%7^5Ew8;FfrQTiUR9e*~7QEAWoBF^N4J zumEP5+RS;UX>5V2ENXR0R(GeyB8+z+NVLod`OI%1cf~8dq%3X zt)RKma~VXARO_=rsq>Jczu_`-b+k$?oT?7wOq*noWJV zf*vm)Pp^<8y&~z6Ucy&=aCt#&HV1nAZD4FQ7pV>~+&1anxpbs@&g=nr&%LS1NCmmP zd*{f3YB1prO4gOQY`rIWopP`F37j&hqU79(EA2NwM=uf7ho0y71xD&&`p@L-KyCZ z(DxyV!^8L{u^tv5NsQ*a-J0{LdP_=uuY9`&M5ZLWr0|$(N4n`wU&Q6w;kIjzJMCe7 zl!2AJyE&2NDHCA2*rq9a;7@rar(*wsdxG{8y!0lCJ8t>Jcm^b0^FgLo3`p4q7mgDA zm_Q5P?95<`7|z1BG9wQ75jZxX!n5}1g6zcOgK;<9s$!+u6akgY5hE|Lgwi8REBLcfE z#nSzWn$DD8lTqQ;qnILEZi@y`pgcXZ^T({?u1`3$ZP$g80i*{hSX2}SN6V*Pn4nEhS z?k509)3y{H#@aEbDe1&VzV=Mnqh~KhXlaq;fm4W=r@w zh=&#PZ=I7UsAJACB~I4SMwCWP9QL&eb?BCwK}8$yu;uq5us~z!f}bE3q%0`2sJ-w! z6LPw%G*HMODxE7lN~_{(VgPzBv*m5vd); zPb)QB#!^@S*@LC79&vFlrUfV_K#fTbn%U=nW(1$X?i!$BaV_i2BcFN40Q(8g8~!1G zTnWoKHW*LlC+EdX25qq8!4JODwxI&<0tkUa96ldbpe>w&i4tP5@5pZTpqOPxzK}l) zauy$9Ggz`_zlxGBQD|nHqwcGK82Ny(>?eWPtcbrYsD|L%22q~Evaeg*43}w;AsOdW zQ{rBl8kZkmLkHXuxAK2n5#)(BskC-HHc^0Av%*@;aO~!$dc*?I<6s2R_2ZRVBI-T% zwacIG5gnLG=lcHFZUU>qd*zpgPhn&bwZEnK*0$s=FH+3}OSwS8Pl*a1nw2Hi(qjX* zAKi4hn_^bX+Kgjn3*Zvx_&PEvq=q{EXN~LY%vTd!IBZ}aClL|PScFla@fW7eH)cZ2 zoY#=_Fd5P-ZiMRe`m_O*5SXFr!+gswuF)&!0K#^%0fZSMk8d?=x4WCw$|WnjKCp(5 z{}o>~%Kt|F<@{iT3+T?mrAN%^KUIrVg5knk7h3I-|APAk{>>CKriiXeomRM;PIIX zY|=b~$WjJN~H7{QkVWz(+z*ss^)*BeEIADwU)p?#tr4PWI|dTbEZ? zB@C|mC*uq?&Y)hKRe=Fp5vSburmCQ2){6X?JQhUG&?||pxi35GeX!P`&oCWx{}8V9 zF%BS@x5)vJ8P0m`lSy%8bp-Oq1O^5Ni6E^0Gs56C%K=fWuf@xD1wOu3Tdht3Z)JSu z42yz_bJe@8{kmm9i+#7COzpPX6w)g5`z8vv;+}^<=iJdL#@cyPlhJPjy!)7Ok>evI z-j@44gc@g4uf0r;iQSBZtH4q>ABX|mO+db5(#lk`NVh+QxK$jP|& zSqC%vQTp2NH>I!`>QC88J2*P5_0h&f<4}-zF6&l`E(-a4@24uHZy5diHcEv5mN?Fh zMd&T=xWtBF^Z@F(RR*L)hCLT_@5002FQbX9aQjNn(cJN=!OyKvFO>^A#UzvEb3}Id zP(kd)fn1e1TQGZ@KV5& z$Dr6F+O2d5#`E6Mwf}6}QUQd}k*@qlvVI+R43gyjBf--mw+4QgP|zTK69j(}jWn>6 zppRtrf)KYwc>u4>sKuj;!53WnDyH-N4|2?b(g2=k5ilS1r7THWGBlliVbhYdi`SUQ z;K{{+LMkF>#Rf_&wnWT4VbgIei#|a&G@M~%4TR?*D;cb5EW~=q{-9U`Bpxu<0wISi z$OxqSEcKlYGQ#=U!qz_6pddSEM7%;yhb@U4e$3>0(+h-~>A#~seUY}VAQJf7S-&zsgIh4LeMfpwyMTXknl_mxkdA-AZU_*! zY5!U*NnQSrYOb~@A{f;w1HyODD`xD&M=Ji!;&Z90_1fpv36rB?@ZGbq{oklIwNbkK zuBUk?5P^fYd9!|x)dl*vJ&<@a4Pz>5riu#Y@1wflck#_~`uX-cf#jT1 zM^bmd^zQNjrO*gt^o#5pQ$V<;{zq!|(|p8oBBwl()B?&KnKm?D;HDX7#4KN3?y~?! zMK8Yqcssr<^1aMqObw4}&iO@$y20;!>I1(i&Y8_dS&zse!lSBI6>Vak*0r<7f~H8N zWSMZW^56L7Bn%^;M}NZS3pxC`zB`cJ3o)*VmYPq|OKAHFM?Myk>;s0~bve(GVORz) z1-n4R8LQel-c$DyRt_a_)JTR4n=PKB(fvIJp$Vq21q9HbFr)Hbivs>~i|7Jt>aJf= zHUQJD2Dmf3s~)zTlR}_t6I0Ki*|-A}Y&~dGS4A0*TFKTRF$I$6kt9(e|7=O{p-f-U zcJdXAVnLt2)0lyb?a}c0XTAv=o;0b}3MVw@1^~mcbVbZ*bvPzMx0GFn$}(5pJ_LNs z(;(k^@ZN6yTm*7R1tSR{Z^w^Cz6d|j`_EdsjAK`6>>M*`etE2nAdz=V130*EdRS$a zE)HMVd}$v(ICv1gvs>#qdcW>?SZvcVuKIKDL4@B+4p}K)b!&k-hS0Z9C6F6$L!*w~ ztZbt!&vVPpKGI9$`Q?*1{`%tU17G;Z9%G;bXG6@|b@ZlAP2uqxR@!Lo+X+3x|NH1} z4eC&nVm>hftC(TVc;_ZPlj5a^8j;JPFQ)Dl@uH_qiFxyr?fZgL1V2ZMuD&=A=3qE} zSVwJS9_n2FN`HJrjGF-}QyDiL*khjN?!y#=;~YdpNP79`D1P;mSiElJ)+r0j?Wq@z zmP4J6C_|ghMQ~Df*=S$+3*y!|eYonRe{%QWZHz{yt|f_8{9=RI()BD#<4+=|2(g?Q za{qUf3ouXn&5eH?n4mPz8oa|tX2c}??r2hZB!)e<`Y9&skiS<)4i+!dmlrM!4fy$& zlL0y7LnVV3OSyYne1^?Y)utlPTd2dv=ZdE1nsxok?YCWD<^Exm2~Q^=_J*=d+8*nc zlz~bRHO zE5xrIb%({?{zf+;E-#rNh#nV+?SBAmBz&fEX}JKeg;1#2)<18^3bCRjZu=G#vUk?_ z98WZ`6m<#J)8duRAnHOzzQ`ay=)d%qbr^_ibrdV3D4>Sr_*fNVQ0hm|V14ZOq93x($V^~@M4=-c-t5Uq`AU)|+pQRs1E6U0s%Us%t9n@E5}ijeSSqJqZCC3WF$ z&^g;%xyJx>3vEB>0@orF#hEylq>8cKHJX38YY+`57;db9B(nsStM*gM_zG1)r6+5H zOlT8$Z2vM;LO}RCrQjX`JxD8cCThgRir6;vQB4I(3|04qN-vb&`0*~iSX#fO?NbuH0$xRuWUs<8Bo>YzO)`H0Ib&PEQA$o{47$)1c7C@RaV!mVx zx|ToB#Qwl99n5kfO|ct}J#PziP-nEGUO>7U%d82Nhl25yI1|YR9)TX2c1C!6so9Li z6rp|pI`|E|_J;FI3pg)1)yGR4Tuh>zB6wBif7oK8MoI_>m3;{l@~B=5@|{z!ruC>p zS+ZdQqrf>^uiTb6+#ZrKLy@tJ#4|;BK$T_l1ZQHNegfO<)eyX}Eua_GK(2*c&X=R0 z#`nA2i=XPHcJx`NT_;te1}M2rFW^jgL%2yg(S{aFNyU)LDa2b^{;d(9^lOHSJ{qZD zOyaZ_V^qhW!sK_hx%6>!Ta}l=fG%Hy#X|M%sbQ9#;RT~4MRie4+ zgXr@;yzib24^q-a5?Mmf(?*RwRmdjdAnQ zW2to1ji^o{%2MK}*duJ^0=CsB5%uAGq|l6s~pjab5TE2C2bsxI=g`~0#Djl1g4$Elty7t4=Kx_ADy(Nz-{;z9L27~;Hh>#IIQpY^Q>zyLS zheFdoX-66M?^><_WwQ7W%6cX=t^@Y2x?D&d=e0)svMbAl`Kl{tFTWdq>kG$!a3Y&1 zj11}ysa4~+V8wA$HBOBWX$EO>(z^I!Q^(Y#C?7Lbg_0XTW5;onL2fWQC34Pm=EjW~ z%fM;V#aa@x;YUn6f5!}))Fo@;r}V7Jh0jFF)Td$t#%isod&8T-CA~@SuR5RgoyOpK zsVuIGjOOwDPD)N12Yo$Ud{w74Qs@#7`G-RcR6Gl*q$qk)Z3wJRewV|z++Ki+W`l+q ztZ)aBYPvy1o;5DkpynLuu9zZ+B$Kj<@$-;Aff95Z$!4gLB1YSO$Y|$==7b>$;k&ub zEf^{@+EkyK4;bszhDY60COHDj8TYm|e%B!UQ_}lwT~(6k>z#2WWcI^ZJVQVv0q>o) zeT9a3XCP7%6tfVZjX!XP#Jht3KcemZVSN|T_earc zETCqol2NJye{OfI-`?4hGR)ROr`_{o8vd>w2zHg!6g6bmRHn?8(-%Gd@bD~oELMcPabj=lI zp2tw8h(a0C?^NI4^L*bw-sk=6oO{+@>+ZGp+Ml)7XU7uF3=iOVZ~%Y<$BpzY0f3NK z2+&X=568=e?tgw=u{6{LPe1T20&pZxzwGm>04Xj}7B=B$>J6oRfy5)@>V1iQngums-@7PTSFX_B8z zCpxS{aq4!n*Xk6{@Zx z>`{Tl@NV@j{^8-8%mBlQoE8Bm2qJVoYJO4eB{l2)?xQz;a!6yrus!pJ#QPP`rs_3#OvxFN=|q0LbzqfV7Ax>z+pmbyxZZ!gQz(FO zFCO@L(r14n{=#UyiB!C1NP1r`BJ6Y#a>;!KKKqN2xZk z(|2y!+r$|b0?3Oup=Q}8SiH&IlJgXp?y*!|)5HyYbU~rQsA$0Gf+%%;1LStX6Cx`g z#(?Gp5$gJv(Ai)KNXIK01ELp%sp}V`{mS+*7`L_G$zB` zfhsmTZkCsC9qsBwlfG$a<@HclsGi1Hdc^vqpfKZE9l7WFB!e4EI%nRCl>?Q584JUs zDR3DVB{Ik@b&%eIq|VhbDYBt)vCm2Ga-8B#6I71f%(mc<66XXPAJ0xBEKMP~$EvvZ zgfMFYzQ_a;)K2VrNRVHtykZ9^0wMf@}0A3@hB~}pxd;Xo4AR^M`kl|`5eGXM$28c z8%?s9al9RAYDwA_C%rwE;iM=bar)I`7J!W(SW@qxNqcN89((6BmTTCA;?kbK>1ie8 z55!Y`o>25h`&y57Chz-Mla>4P&X%4C^jDyJf3tuJ^c8%M89JOp9ogkMXw(#ox+q1d z4*e1!y||M1%QH!o9lYuK)OSTydY0@~`AHO~{{%pZN<4Os&Zb@ZqeS{fRz}z*ofBVU zwa@C>ZG4{z%OGBMlg9Ww`)k>^$s#-;>gW`G+vag4!e#SnRHQ>DZX&7QNrVLygoP*a zJm>wvf>$nTGM-$tfXM^9iIlvqy|hWAQ_ona;U>|LL$AwFzAt-|Q^iSfsJexA-TCXI z?k9Aez8SFr+?A_`E|)>I?Z)$u6U3RyQC+!EhrOwT%LQfME3pva%n@@P2F5q<>nTpg ztwC(VH>i#T*!JC7SKxelPaouXtW$FbaZ%p*PTU)PNRY;T5hmHb&v$O^Jr#2-ftt`W z!_u6!)nUwLbQguOQ_OfGcGyP&#JSaHa%9IuXe`%ceWZf_-QWb1M%NS17zw3U5(j0NX6i z$1tu1COY~lY7b#cm^*c-*e~(;c`ht0Zya*{)|%HHOtPasl!a5^5(s*7B5^5!TP#Hm zcwFzwPH*LEP80KIeM&%|OaG=034@%2^Lcy^%&JS1>&2(-p$pUWtOpOTs(^1CfvjuN zu&_q)VXOgpPO2<}+_$8(>Hk8CA4^I9zJ2=D^%Au2iNgj-RR&}Ri8b9vbn*{Q9S>U~ z?q)d%|Ne^0R|A7&F*EO$Y-sZ@BqIVao2Om%shk6-o2{0Y#DyKdK>R!^jCnb_tm4WDhzB7Ff#ZnZO2cB94#D1JL9 zXUsSQMe4C9r|>sZL<&wX@Qa$=Jf({gzyK^c>0kZVihe6PG`swe;CqXpNqK-{i`L(7iMpqIsp?M)i0gFoX){KKx>K+ySf zam*z{HdDFV7U8eqb<`wh(N@;pcq=LfJhX z)XbO3lIGi@K_17Kj$06xts+JNQF=W@Y&?~XUDVt{un5QGs#AJG%75+|78IP)SmLKp zQN^hxCv!c7#qqT$O#eQW$+gM+x-t z_-RhN*rhPk9T~g52C%P1F4{Fy?d(**gQI?1zpp$JuzK)1d%yjqyk)K{Zmwfb$R$uF zuD_wF6NQ2Vjn9RNm6V+H&{;CHz^U7n{nQ4IcblH_59Z~R!vyfAdqkkKy2vRn&z?)) zbJ;bw)0uj0E4iu||ti`g4F=@5ZYsd$^!6 zl#o-B_3IbNA+4(c6glmd*s~w*FQ`C6Ip_j!W=5O=Q(q5X4mU(ud$^sB4Wc4&bnT;H zVCZgQgQQ)$m2(_OsJ0$8cWv8At5tl${p<&rV-a*3!+_FFu_o0@Tv36aL%jxs#JfZ6 zC7&9S=bj@Vp%0qo$T8WY2CQRPkUz~1DmLBXUHfXr?wzND zL(IW7?HIy9$twpVc7U*Vs z+Pn}2W)5#=4Of~uK>Ib1Bliq2zbqupvz(OnJ} zkmgweD34?#4a}le4`ASjt;O8cEv{BY(qaJLXA8l~&NS5x?tP9^;Elt$sc*sW)06j4 zoRfgy^m-i7*zN72w0u11!MnwRtf>oq$&34oseod#iv{%|_A|p3-i18PD8Y-DWTE-( z^I}m^Sm1sinb9g8I&r{<=bKKY5QGHjQM7sR#Y1(Xh%{IVtj*IwR_B#`)G7v(fcV{Q z9{h#xL;7mQbf9y?22A&HHgRU*LOXcD(TX$|b#5$JVO#1%7INyf_QLQ+PZdbh$}+6I z&R6B;{jA~4zy>XtdTJC!!r^D-WaBH{eRPsI&R-DN#hHCU(mHjj>KB&336Q3CfQVOr zU;2q1eBKfqOQ!{sTiGz(d8J=ZL;+58pNB^I?6u+AiE9wyg<&|D7W~bntZuV&-V506 z@dEi|pPKqFSg=#^MPCG>2o4OXD%FMA0h7v~Z|W${P{LBAy;zk5!1u6!Riy<~o|S=Y zYaebZ)m@!_7O@H;DU;b<jk_%sDUmEl1H~zn;w0o3BhkyE4oa9?;CnhIN*KXZmH9t3IU_4DHPoNi&qXe`(RI^E??`a7Zn1G1}4NYiH>DKEC#$i$na-`aGRl*O|UQ1 zAGfJ!d{UXswtUyJ>j0&}U2K2}(0`GdQzEBn)c^tcoSuT^C(4_8cL36nDhm~mDu_nku`T);Ti*L8>Q(lrr4 z<0*|!9q>7&g-45je@}80IO;B0Oozx0oFo%YJp(%lxIxpJ0=tm_F)GLWqIWCLejc4 zU|ftzZR0||BJi;A{FAO^%2i0-b|E&kUYwQ+-eVxtV?C}CSk4Hs8;6Lp)@Rh~oitCx zfMCCVJ_C2agAr{z#}1ylHI?$r%yhXfnYN!)~GZZNC%&LM;j`knml(Mi1m4B*l4 z7tlpC6x^nr*};AmT&&n)>_+p?1BKxx3ct1Z_c~IDrCzP|4JN?lSquo#GLZsB&!7R_ z9M1naO&u&4p(~3@Ljg@;(<^Kcd{Add0`&L4x71wkDC=-eUVN|}g4}uos4*`6y6{73lWDAB5kShMiw=JY0qLBdI^1TX%%wU1J9}7F8 z-n<0CH>^S|kOim+kcH;NasZ*rH%>MV5E2JhO$o^Mft+(Ht;iH|484AM5w?Yr{(A%? zd9Hwh%&b|WUL1Lx(iUe#zx`v=vKFzawqc9>oTZfByZa3CPf%EqLzYd%Uw}FVtAo6? zS&j=K54J!~%x%%e|N3xv`jkDJ^(y4Sb>ew66Yxk1Az2XZIcoFnUS=dT8}$k3f*c*I zKzrX2F8w2rLPB1(9t}_sH;c4?p_t}~`j6T|lB3T7v5bg!^n`Z1IMo|~5HY>_IY-j0 z(PiXd2$#;MgYb>p`Pz{{ur?n(7E!EX5U(sxq!*A6WyXMG!IDV0(?ON@P475@xsDJ4 zxzEuF>F<{Q#am=W6s^=U`zgFHE%9?kW3|@VPHS7vznd&rBJ;OJ!Q&B-VTOK0-b`=X z`4^9f7P(_dNk$uqcs`K$-}YX9azvV~BS6ePL>E2G@#pB#fP@Wez|@<<=R1QGc9)^) zN$Rqn{=ikY&Ghu2lahj*l#v%5&pk_Um+;^^<8*@WrM{C6e}e_~tp|MVz?^`<{-eE-H~kM79ut%Yo~qn$1q{G&kXIHchMc zERjM)HV~qfhA(i+t&9M^Pg-4XVft?puJS*I0p-m{K|ph+BZD$L?=z}M1D3S0@k8h| zjza-UPjCn}ATErj9Jpn=6sWzrTzV0@52|S?CnMU;oJ|oQ9^gRu*f+)YeBNj(VpFj;7r#Tq!RL=;K^xe%3&4KymRaTpwLR0MHLH+?k^3n%Ja%Ewyh| z2of(IM=H5QQ)_*%ncqC$UY>nxBI&asaR^c2#H-vmi9ZuS1NlS*b4X=&N~JAZgSyqe$O*ffMhOjif6ia=M#1P=kZs z_h(yGkqS2Tr|zNZ4BE4cf0TV70-ZyeT#Zv+bgjxfH?Ysb(tuj}N5dU7;KuFot`X;` zH7qRs0TqH0Oc8E;?s=@{#^0>1rv(i@y}+XN;~{y;u+ha#H_Y$T!u*%7ydXUjJJ-EZ z^04$ZeX`2B1b$@Z&JJ0-ZOG-E!?$Z&j2O7&J*vN%=$~SHj(|nW(GrVaF)Z>Zv**GSr&8(I~>8JGA6&S-yx~ACZ*7+6Wq_7M}UA zp9}q`t17gJEjIjl+bY+XH8t=C%Ljz=k%%sk?{oXtS9ye?L+N~dT@B*Dx=hFA(2A5z z{+9dLw~2G34xz;_b{hW_xUA}Uph=O|=%jHRX8d&d;yZk!?myD40ov^EiNwc>l&wYx zYM4{XRm00Y+3S)hS|UnrmFN8#f-Xj^ADmn3Y9Th<+N)^^coQ}=R&zOxBVas=3Vv5Z zoRN)K^Zy;1#DjFIOh!=K$xO+p{hJXSAoKisVIbh;5~o^9ux7#PLtQu~;w~?Ki;z^gWlSm))T;hf4)k9eLXo1~~ zRQlS)U0%@%R&0e7A)#yViC^j#g&Lc{2UbmTTBe|nS1bbbUE)zimhhz-tGq75i2^%- z4^>MX_UAizW_qtsU1Z&W{8%c7Bb)m>&V6gEcfW9#g$`IBzE7uExC`4G-q5B)XJwlBr(Q?CV35W-_sH5f=|3-pr$5I#)2 zjPXF`a!LMS_3kYP(*QmodFNrPz}f0l^fwml(Odv=_IvNx6sUV)zj`VdjYvgS{eX=;4U{k?)_MJ0q&m&qCaKMx%gv{L$?sse{ z1|=p%h-|IIg^oSuyNQNb4m;1}=~wrNLpYtvBXmybk4T)^}sYg*UWcbl_^fxE|I9fldZ zAzAjcCn{09GI{^8vbSFk3l@krd(vIqD-8W92iy0&J#^aun!;(+28w8{f5DA@tZ}E7 z5@7%*idPxGFI;jRPbYk#6Zh+u@*H)6p!qpp#m_w!Lm@wX^UdWr?*)m@ zm*|e5MQgbpK-5*>@*fAYEdq|LiqXXAKDcmOfhFb}$=n81z@9Q@ive{!!wwu6?(NSA$D3c>v$S z#VfM9{>KG*lY{v%mYsJ{7nxj-_g~w*`cB_9w;v*ST9y6eqe^)@ILBjn;)Y(4%xhXZ zzE4N$vXYhW0iugp<GjCjkT{BUI;(45ryF=|FdQOVF@n7HKR_c+lSCJ8vM~Zbzt_*kmGFQs_guNDtY{^x z)AtYkjY-+<=Pa6|;JxtfWtz9PuO#QYt(* z=dC^zj}|Nr6`NjlWYEm8?V+{pSwzUT=x}I;?~A*cJJ(A zNr>{XS<`uj?nmO>2G;WLjFuW5IiPWV;H}H$>0K*lFl{aiki3#M{LSCc>OQoCd69Wgn^u0N%tmkv+s_*YG-qr8%B)guM=wZ+l?6Ozo-j~ny z<*gqp3Qk)&8K1hU#vq?|>BxeNU_zYg0jv8~jMLu0Rg?Lkz<1nWp4)R%E6jz|Xpobo z%N(XPFeChf+1(c{AA{FiNfa+OyqMl&tXjhR*6w9bzOrzNUDHbq4lJ#RR70USnix!OHh=^eq6q|l))3&JGVA&-)4-wHNP)x>?f8iHKc&Ge~R8?U}_ zCn%#Q^i}NZ=7)bZgg5^rHb$JB)S(Pgy`l~hkgt03gReU^>QhB{hr1cl52!j}KAio( vFKjDoSYb7JfuR5O#+H01CGME`+V4jL+W`d=uN#ruX>i=YO#i7aDg6HdH`|pQ 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 }) })