feat(lit):out of box functions, countor \ newtab timer \ events

guocaoyi · Oct 16, 2023 · d9339d2 · d9339d2
1 parent fb82175
commit d9339d2
Show file tree

Hide file tree

Showing 67 changed files with 711 additions and 527 deletions.
diff --git a/template-lit-js/.vscode/extensions.json 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
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Lit + JS + Vite</title>
+    <link rel="stylesheet" href="./src/index.css" />
+  </head>
+  <body>
+    <devtools-root></devtools-root>
+    <script type="module" src="./src/devtools/index.js"></script>
+  </body>
+</html>
diff --git a/template-lit-js/newtab.html b/template-lit-js/newtab.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Lit + JS + Vite</title>
+    <link rel="stylesheet" href="./src/index.css" />
+  </head>
+  <body>
+    <newtab-root></newtab-root>
+    <script type="module" src="./src/newtab/index.js"></script>
+  </body>
+</html>
diff --git a/template-lit-js/options.html b/template-lit-js/options.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Lit + JS + Vite App - Options</title>
+    <title>Chrome Extension + Lit + JS + Vite</title>
     <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
-    <options-panel></options-panel>
+    <options-root></options-root>
     <script type="module" src="./src/options/index.js"></script>
   </body>
 </html>
diff --git a/template-lit-js/popup.html b/template-lit-js/popup.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Lit + JS + Vite App - Popup</title>
+    <title>Chrome Extension + Lit + JS + Vite</title>
     <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
-    <popup-panel></popup-panel>
+    <popup-root></popup-root>
     <script type="module" src="./src/popup/index.js"></script>
   </body>
 </html>
diff --git a/template-lit-js/public/icons/logo.ico b/template-lit-js/public/icons/logo.ico
diff --git a/template-lit-js/public/icons/logo.svg b/template-lit-js/public/icons/logo.svg
diff --git a/template-lit-js/public/img/logo-128.png b/template-lit-js/public/img/logo-128.png
diff --git a/template-lit-js/public/img/logo-16.png b/template-lit-js/public/img/logo-16.png
diff --git a/template-lit-js/public/img/logo-34.png b/template-lit-js/public/img/logo-34.png
diff --git a/template-lit-js/public/img/logo-48.png b/template-lit-js/public/img/logo-48.png
diff --git a/template-lit-js/sidepanel.html b/template-lit-js/sidepanel.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Lit + JS + Vite App - Side Panel</title>
+    <title>Chrome Extension + Lit + JS + Vite</title>
     <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
-    <side-panel></side-panel>
+    <sidepanel-root></sidepanel-root>
     <script type="module" src="./src/sidepanel/index.js"></script>
   </body>
 </html>
diff --git 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
diff --git a/template-lit-js/src/contentScript/index.js 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
@@ -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`
+      <main>
+        <h3>DevTools Page</h3>
+        <a href=${this.link} target="_blank"> generated by create-chrome-ext </a>
+      </main>
+    `
+  }
+
+  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
@@ -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
@@ -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,14 +17,15 @@ export default defineManifest({
     default_icon: 'img/logo-48.png',
   },
   options_page: 'options.html',
+  devtools_page: 'devtools.html',
   background: {
     service_worker: 'src/background/index.js',
     type: 'module',
   },
   content_scripts: [
     {
       matches: ['http://*/*', 'https://*/*'],
-      js: ['src/content/index.js'],
+      js: ['src/contentScript/index.js'],
     },
   ],
   side_panel: {
@@ -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
@@ -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`
+      <section>
+        <span></span>
+        <h1>${this.time}</h1>
+        <a .href=${this.link} target="_blank"> generated by create-chrome-ext </a>
+      </section>
+    `
+  }
+
+  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)