feat(side):solid support side panel

guocaoyi · Oct 8, 2023 · 4d9e297 · 4d9e297
1 parent 7a8ea6e
commit 4d9e297
Show file tree

Hide file tree

Showing 15 changed files with 237 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,7 @@ Summary
 
 ## 0.8.8 [2023.10.08]
 
-- feat: support side panel for chrome extension(vanilla \ preact \ svelte)
+- feat: support side panel for chrome extension(apline \ vanilla \ preact \ svelte \ solid)
 
 ## 0.8.7 [2023.10.03]
 

diff --git a/template-solid-js/package.json b/template-solid-js/package.json
@@ -24,9 +24,9 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "prettier": "^2.7.1",
-    "vite": "^2.9.13",
-    "vite-plugin-zip-pack": "^1.0.5",
-    "vite-plugin-solid": "^2.2.6"
+    "vite": "^3.2.7",
+    "vite-plugin-solid": "^2.7.0",
+    "vite-plugin-zip-pack": "^1.0.6"
   },
   "dependencies": {
     "solid-js": "^1.4.2"

diff --git a/template-solid-js/sidepanel.html b/template-solid-js/sidepanel.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid + TS + Vite - Side Panel</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/sidepanel/index.jsx"></script>
+  </body>
+</html>
diff --git a/template-solid-js/src/manifest.js b/template-solid-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-solid-js/src/sidepanel/Sidepanel.jsx b/template-solid-js/src/sidepanel/Sidepanel.jsx
@@ -0,0 +1,23 @@
+import { createSignal } from 'solid-js'
+
+import './Sidepanel.module.css'
+
+/**
+ * Popup component.
+ */
+export const Sidepanel = () => {
+  const [crx] = createSignal('create-chrome-ext')
+  return (
+    <main>
+      <h3>Side Panel Page!</h3>
+
+      <h6>v 0.0.0</h6>
+
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+        Power by {crx}
+      </a>
+    </main>
+  )
+}
+
+export default Sidepanel
diff --git a/template-solid-js/src/sidepanel/Sidepanel.module.css b/template-solid-js/src/sidepanel/Sidepanel.module.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #142d61;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-solid-js/src/sidepanel/index.css b/template-solid-js/src/sidepanel/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-solid-js/src/sidepanel/index.jsx b/template-solid-js/src/sidepanel/index.jsx
@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import { Sidepanel } from './Sidepanel'
+
+render(() => <Sidepanel />, document.getElementById('app') ?? document.body)
diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json
@@ -26,9 +26,9 @@
     "@types/chrome": "^0.0.236",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
-    "vite": "^2.9.9",
-    "vite-plugin-solid": "^2.2.6",
-    "vite-plugin-zip-pack": "^1.0.5"
+    "vite": "^3.2.7",
+    "vite-plugin-solid": "^2.7.0",
+    "vite-plugin-zip-pack": "^1.0.6"
   },
   "dependencies": {
     "solid-js": "^1.4.2"

diff --git a/template-solid-ts/sidepanel.html b/template-solid-ts/sidepanel.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid + TS + Vite - Side Panel</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/sidepanel/index.tsx"></script>
+  </body>
+</html>
diff --git a/template-solid-ts/src/manifest.tsx b/template-solid-ts/src/manifest.tsx
@@ -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-solid-ts/src/sidepanel/Sidepanel.module.css b/template-solid-ts/src/sidepanel/Sidepanel.module.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #142d61;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}
diff --git a/template-solid-ts/src/sidepanel/Sidepanel.tsx b/template-solid-ts/src/sidepanel/Sidepanel.tsx
@@ -0,0 +1,23 @@
+import { createSignal } from 'solid-js'
+
+import './Sidepanel.module.css'
+
+/**
+ * Popup component.
+ */
+export const Sidepanel = () => {
+  const [crx] = createSignal('create-chrome-ext')
+  return (
+    <main>
+      <h3>Side Panel Page!</h3>
+
+      <h6>v 0.0.0</h6>
+
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+        Power by {crx}
+      </a>
+    </main>
+  )
+}
+
+export default Sidepanel
diff --git a/template-solid-ts/src/sidepanel/index.css b/template-solid-ts/src/sidepanel/index.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
diff --git a/template-solid-ts/src/sidepanel/index.tsx b/template-solid-ts/src/sidepanel/index.tsx
@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import { Sidepanel } from './Sidepanel'
+
+render(() => <Sidepanel />, document.getElementById('app') ?? document.body)