feat(side):lit temp support sidepanel

guocaoyi · Oct 8, 2023 · 8f319eb · 8f319eb
1 parent 928933f
commit 8f319eb
Show file tree

Hide file tree

Showing 21 changed files with 233 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,11 +11,11 @@ Summary
 
 ## 0.8.8 [2023.10.08]
 
-- feat: support side panel for chrome extension(vanilla \ preact \ svelte \ solid \ inferno)
+- feat: support side panel for chrome extension(vanilla \ preact \ svelte \ solid \ inferno \ lit)
 
 ## 0.8.7 [2023.10.03]
 
-- feat: support side panel for chrome extension(react & vue)
+- feat: support side panel for chrome extension(react \ vue)
 - merge: merge pull requests
 
 ## 0.8.4 [2023.03.23]

diff --git a/template-lit-js/options.html b/template-lit-js/options.html
@@ -6,11 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Lit + JS + Vite App - Options</title>
     <link rel="stylesheet" href="./src/index.css" />
-    <script type="module" src="./src/options/index.js"></script>
   </head>
   <body>
-    <options>
-      <h1>Vite + Lit</h1>
-    </options>
+    <options-panel></options-panel>
+    <script type="module" src="./src/options/index.js"></script>
   </body>
 </html>
diff --git a/template-lit-js/package.json b/template-lit-js/package.json
@@ -21,11 +21,11 @@
     "fmt": "prettier --write '**/*.{js,json,css,scss,md}'"
   },
   "dependencies": {
-    "lit": "^2.2.6"
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "prettier": "^2.7.1",
-    "vite": "^2.9.13"
+    "prettier": "^3.0.3",
+    "vite": "^3.2.7"
   }
 }
diff --git a/template-lit-js/popup.html b/template-lit-js/popup.html
@@ -6,11 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Lit + JS + Vite App - Popup</title>
     <link rel="stylesheet" href="./src/index.css" />
-    <script type="module" src="/src/popup/index.js"></script>
   </head>
   <body>
-    <popup>
-      <h1>Vite + Lit</h1>
-    </popup>
+    <popup-panel></popup-panel>
+    <script type="module" src="./src/popup/index.js"></script>
   </body>
 </html>
diff --git a/template-lit-js/sidepanel.html b/template-lit-js/sidepanel.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 App - Side Panel</title>
+    <link rel="stylesheet" href="./src/index.css" />
+  </head>
+  <body>
+    <side-panel></side-panel>
+    <script type="module" src="./src/sidepanel/index.js"></script>
+  </body>
+</html>
diff --git a/template-lit-js/src/index.css b/template-lit-js/src/index.css
@@ -15,14 +15,6 @@
   -webkit-text-size-adjust: 100%;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

diff --git a/template-lit-js/src/manifest.js b/template-lit-js/src/manifest.js
@@ -26,11 +26,14 @@ export default defineManifest({
       js: ['src/content/index.js'],
     },
   ],
+  side_panel: {
+    default_path: 'sidepanel.html',
+  },
   web_accessible_resources: [
     {
       resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
       matches: [],
     },
   ],
-  permissions: [],
+  permissions: ['sidePanel'],
 })
diff --git a/template-lit-js/src/options/index.js b/template-lit-js/src/options/index.js
@@ -22,8 +22,6 @@ export class Options extends LitElement {
 
         <h6>v 0.0.0</h6>
 
-        <slot></slot>
-
         <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"
           >Generator by ${this.crx}</a
         >
@@ -59,7 +57,7 @@ export class Options extends LitElement {
 
       h6 {
         font-size: 0.5rem;
-        color: #333333;
+        color: #cccccc;
         margin: 0.5rem;
       }
 
@@ -79,4 +77,4 @@ export class Options extends LitElement {
   }
 }
 
-window.customElements.define('options', Options)
+window.customElements.define('options-panel', Options)
diff --git a/template-lit-js/src/popup/index.js b/template-lit-js/src/popup/index.js
@@ -22,8 +22,6 @@ export class Popup extends LitElement {
 
         <h6>v 0.0.0</h6>
 
-        <slot></slot>
-
         <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"
           >Generator by ${this.crx}</a
         >
@@ -59,7 +57,7 @@ export class Popup extends LitElement {
 
       h6 {
         font-size: 0.5rem;
-        color: #333333;
+        color: #cccccc;
         margin: 0.5rem;
       }
 
@@ -79,4 +77,4 @@ export class Popup extends LitElement {
   }
 }
 
-window.customElements.define('popup', Popup)
+window.customElements.define('popup-panel', Popup)
diff --git a/template-lit-js/src/sidepanel/index.js b/template-lit-js/src/sidepanel/index.js
@@ -0,0 +1,80 @@
+import { html, css, LitElement } from 'lit'
+
+/**
+ * Side Panel
+ */
+export class Sidepanel extends LitElement {
+  static get properties() {
+    return {
+      crx: { type: String },
+    }
+  }
+
+  constructor() {
+    super()
+    this.crx = 'create-chrome-ext'
+  }
+
+  render() {
+    return html`
+      <main>
+        <h3>Side Panel Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"
+          >Generator by ${this.crx}</a
+        >
+      </main>
+    `
+  }
+
+  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: #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;
+        }
+      }
+    `
+  }
+}
+
+window.customElements.define('side-panel', Sidepanel)
diff --git a/template-lit-js/vite.config.js b/template-lit-js/vite.config.js
@@ -4,21 +4,20 @@ import { crx } from '@crxjs/vite-plugin'
 import manifest from './src/manifest.js'
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  return {
-    build: {
-      emptyOutDir: true,
-      outDir: 'build',
-      rollupOptions: {
-        input: {
-          options: path.resolve('options.html'),
-          popup: path.resolve('popup.html'),
-        },
-        output: {
-          chunkFileNames: 'assets/chunk-[hash].js',
-        },
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+    outDir: 'build',
+    rollupOptions: {
+      input: {
+        options: path.resolve('options.html'),
+        popup: path.resolve('popup.html'),
+        sidepanel: path.resolve('sidepanel.html'),
+      },
+      output: {
+        chunkFileNames: 'assets/chunk-[hash].js',
       },
     },
-    plugin: [crx({ manifest })],
-  }
+  },
+  plugins: [crx({ manifest })],
 })
diff --git a/template-lit-ts/options.html b/template-lit-ts/options.html
@@ -8,9 +8,9 @@
     <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
-    <options>
+    <lit-options>
       <h1>Vite + Lit</h1>
-    </options>
+    </lit-options>
     <script type="module" src="./src/options/index.ts"></script>
   </body>
 </html>
diff --git a/template-lit-ts/package.json b/template-lit-ts/package.json
@@ -21,14 +21,14 @@
     "fmt": "prettier --write '**/*.{ts,json,css,scss,md}'"
   },
   "dependencies": {
-    "lit": "^2.2.6"
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "@types/chrome": "^0.0.236",
+    "@types/chrome": "^0.0.246",
     "path": "^0.12.7",
-    "prettier": "^2.7.1",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.13"
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^3.2.7"
   }
 }
diff --git a/template-lit-ts/popup.html b/template-lit-ts/popup.html
@@ -8,9 +8,9 @@
     <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
-    <popup>
+    <lit-popup>
       <h1>Vite + Lit</h1>
-    </popup>
+    </lit-popup>
     <script type="module" src="./src/popup/index.ts"></script>
   </body>
 </html>
diff --git a/template-lit-ts/sidepanel.html b/template-lit-ts/sidepanel.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 + TS + Vite App - Side Panel</title>
+    <link rel="stylesheet" href="./src/index.css" />
+  </head>
+  <body>
+    <side-panel></side-panel>
+    <script type="module" src="./src/sidepanel/index.ts"></script>
+  </body>
+</html>
diff --git a/template-lit-ts/src/index.css b/template-lit-ts/src/index.css
@@ -15,14 +15,6 @@
   -webkit-text-size-adjust: 100%;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

diff --git a/template-lit-ts/src/manifest.ts b/template-lit-ts/src/manifest.ts
@@ -26,11 +26,14 @@ export default defineManifest({
       js: ['src/content/index.ts'],
     },
   ],
+  side_panel: {
+    default_path: 'sidepanel.html',
+  },
   web_accessible_resources: [
     {
       resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
       matches: [],
     },
   ],
-  permissions: [],
+  permissions: ['sidePanel'],
 })
diff --git a/template-lit-ts/src/options/index.ts b/template-lit-ts/src/options/index.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js'
 /**
  * options
  */
-@customElement('options')
+@customElement('options-panel')
 export class Options extends LitElement {
   @property()
   crx = 'create-chrome-ext'
@@ -73,6 +73,6 @@ export class Options extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    options: Options
+    'options-panel': Options
   }
 }
diff --git a/template-lit-ts/src/popup/index.ts b/template-lit-ts/src/popup/index.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js'
 /**
  * popup
  */
-@customElement('popup')
+@customElement('popup-panel')
 export class Popup extends LitElement {
   @property()
   crx = 'create-chrome-ext'
@@ -73,6 +73,6 @@ export class Popup extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    popup: Popup
+    'popup-panel': Popup
   }
 }