feat(side):svelte support sidepnale

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

Hide file tree

Showing 14 changed files with 166 additions and 16 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 \ solid \ stencil \ svelte \ lit \ inferno)
+- feat: support side panel for chrome extension(vanilla \ preact \ svelte)
 
 ## 0.8.7 [2023.10.03]
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-chrome-ext",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "type": "module",
   "description": "Scaffolding your chrome extension, multiple boilerplates supported!",
   "author": "yalda",

diff --git a/template-preact-js/src/manifest.js b/template-preact-js/src/manifest.js
@@ -35,7 +35,5 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: [
-    "sidePanel",
-  ],
+  permissions: ['sidePanel'],
 })
diff --git a/template-preact-ts/src/manifest.ts b/template-preact-ts/src/manifest.ts
@@ -35,7 +35,5 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: [
-    "sidePanel",
-  ],
+  permissions: ['sidePanel'],
 })
diff --git a/template-svelte-js/sidepanel.html b/template-svelte-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>Chrome Extension + Svelte + JS + Vite App - Sidepanel</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/sidepanel/index.js"></script>
+  </body>
+</html>
diff --git a/template-svelte-js/src/manifest.js b/template-svelte-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-svelte-js/src/sidepanel/Sidepanel.svelte b/template-svelte-js/src/sidepanel/Sidepanel.svelte
@@ -0,0 +1,56 @@
+<script>
+  const crx = 'create-chrome-ext'
+</script>
+
+<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>
+
+<style>
+  :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: #ff3e00;
+    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;
+    }
+  }
+</style>
diff --git a/template-svelte-js/src/sidepanel/index.js b/template-svelte-js/src/sidepanel/index.js
@@ -0,0 +1,7 @@
+import App from './Sidepanel.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
diff --git a/template-svelte-ts/sidepanel.html b/template-svelte-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>Chrome Extension + Svelte + TS + Vite App - Sidepanel</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/sidepanel/index.ts"></script>
+  </body>
+</html>
diff --git a/template-svelte-ts/src/manifest.ts b/template-svelte-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-svelte-ts/src/sidepanel/Sidepanel.svelte b/template-svelte-ts/src/sidepanel/Sidepanel.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  const crx = 'create-chrome-ext'
+</script>
+
+<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>
+
+<style>
+  :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: #ff3e00;
+    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;
+    }
+  }
+</style>
diff --git a/template-svelte-ts/src/sidepanel/index.ts b/template-svelte-ts/src/sidepanel/index.ts
@@ -0,0 +1,7 @@
+import App from './Sidepanel.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
diff --git a/template-vanilla-js/src/manifest.js b/template-vanilla-js/src/manifest.js
@@ -35,7 +35,5 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: [
-    "sidePanel",
-  ],
+  permissions: ['sidePanel'],
 })
diff --git a/template-vanilla-ts/src/manifest.ts b/template-vanilla-ts/src/manifest.ts
@@ -35,7 +35,5 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: [
-    "sidePanel",
-  ],
+  permissions: ['sidePanel'],
 })