Merge pull request #49 from guocaoyi/feat/side-panel-2

feat(sidepanel): alpine \ vanilla \ preact \ svelte \ solid \ inferno \ lit
guocaoyi · Oct 8, 2023 · 13b8808 · 13b8808
2 parents 6022011 + 094459a
commit 13b8808
Show file tree

Hide file tree

Showing 100 changed files with 1,444 additions and 200 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,4 +25,7 @@ types
 !.gitignore
 !.editorconfig
 !.vscode
-!template-*/src/*.js
+!template-*/src/*.js
+
+# build
+template-*/package
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,15 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.8.8 [2023.10.08]
+
+- feat: support side panel for chrome extension(alpine \ vanilla \ preact \ svelte \ solid \ inferno \ lit)
+
+## 0.8.7 [2023.10.03]
+
+- feat: support side panel for chrome extension(react \ vue)
+- merge: merge pull requests
+
 ## 0.8.4 [2023.03.23]
 
 - merge: merge pull requests

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-alpine-js/options.html b/template-alpine-js/options.html
@@ -5,25 +5,15 @@
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Alpine + JS + Vite App - Options</title>
-    <link rel="stylesheet" href="/common.css" />
   </head>
   <body>
-    <main>
+    <main x-data>
       <h3>Options Page!</h3>
 
       <h6>v 0.0.0</h6>
 
-      <a
-        href="https://www.npmjs.com/package/create-chrome-ext"
-        target="_blank"
-        x-data="{ crx: '' }"
-        x-text="crx"
-        x-init="() => {
-          crx = 'Power by create-chrome-ext';
-        }"
-      >
-      </a>
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"></a>
     </main>
-    <script type="module" src="/src/options/index.js"></script>
+    <!-- <script type="module" src="/src/main.ts"></script> -->
   </body>
 </html>
diff --git a/template-alpine-js/package.json b/template-alpine-js/package.json
@@ -21,10 +21,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "alpinejs": "^3.10.2"
+    "alpinejs": "^3.13.1"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "vite": "^2.9.13"
+    "vite": "^4.4.11"
   }
 }
diff --git a/template-alpine-js/popup.html b/template-alpine-js/popup.html
@@ -5,25 +5,15 @@
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Alpine + JS + Vite App - Popup</title>
-    <link rel="stylesheet" href="/common.css" />
   </head>
   <body>
-    <main>
+    <main x-data>
       <h3>Popup Page!</h3>
 
       <h6>v 0.0.0</h6>
 
-      <a
-        href="https://www.npmjs.com/package/create-chrome-ext"
-        target="_blank"
-        x-data="{ crx: '' }"
-        x-text="crx"
-        x-init="() => {
-          crx = 'Power by create-chrome-ext';
-        }"
-      >
-      </a>
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"></a>
     </main>
-    <script type="module" src="/src/popup/index.js"></script>
+    <!-- <script type="module" src="/src/main.ts"></script> -->
   </body>
 </html>
diff --git a/template-alpine-js/sidepanel.html b/template-alpine-js/sidepanel.html
@@ -0,0 +1,21 @@
+<!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 + Alpine + JS + Vite App - Side Panel</title>
+  </head>
+  <body>
+    <main x-data>
+      <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 <span x-text="$store.shop.crx"></span>
+      </a>
+    </main>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/template-alpine-ts/public/common.css → template-alpine-js/src/main.css b/template-alpine-ts/public/common.css → template-alpine-js/src/main.css
@@ -1,5 +1,6 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -19,11 +20,6 @@ body {
   min-width: 20rem;
 }
 
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
 main {
   text-align: center;
   padding: 1em;

diff --git a/template-alpine-js/src/main.js b/template-alpine-js/src/main.js
@@ -0,0 +1,10 @@
+import Alpine from 'alpinejs'
+import './main.css'
+
+window.Alpine = Alpine
+
+Alpine.store('shop', {
+  crx: 'create-chrome-ext',
+})
+
+Alpine.start()
diff --git a/template-alpine-js/src/manifest.js b/template-alpine-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-alpine-js/src/options/index.js b/template-alpine-js/src/options/index.js
diff --git a/template-alpine-js/src/popup/index.js b/template-alpine-js/src/popup/index.js
diff --git a/template-alpine-ts/options.html b/template-alpine-ts/options.html
@@ -5,25 +5,15 @@
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Alpine + TS + Vite App - Options</title>
-    <link rel="stylesheet" href="/common.css" />
   </head>
   <body>
-    <main>
+    <main x-data>
       <h3>Options Page!</h3>
 
       <h6>v 0.0.0</h6>
 
-      <a
-        href="https://www.npmjs.com/package/create-chrome-ext"
-        target="_blank"
-        x-data="{ crx: '' }"
-        x-text="crx"
-        x-init="() => {
-          crx = 'Power by create-chrome-ext';
-        }"
-      >
-      </a>
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"></a>
     </main>
-    <script type="module" src="/src/options/index.ts"></script>
+    <!-- <script type="module" src="/src/main.ts"></script> -->
   </body>
 </html>
diff --git a/template-alpine-ts/package.json b/template-alpine-ts/package.json
@@ -21,12 +21,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "alpinejs": "^3.10.2"
+    "alpinejs": "^3.13.1"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
-    "@types/chrome": "^0.0.236",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.13"
+    "@types/alpinejs": "^3.13.2",
+    "@types/chrome": "^0.0.246",
+    "typescript": "^5.2.2",
+    "vite": "^3.2.7"
   }
 }
diff --git a/template-alpine-ts/popup.html b/template-alpine-ts/popup.html
@@ -5,25 +5,15 @@
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chrome Extension + Alpine + TS + Vite App - Popup</title>
-    <link rel="stylesheet" href="/common.css" />
   </head>
   <body>
-    <main>
+    <main x-data>
       <h3>Popup Page!</h3>
 
       <h6>v 0.0.0</h6>
 
-      <a
-        href="https://www.npmjs.com/package/create-chrome-ext"
-        target="_blank"
-        x-data="{ crx: '' }"
-        x-text="crx"
-        x-init="() => {
-          crx = 'Power by create-chrome-ext';
-        }"
-      >
-      </a>
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank"></a>
     </main>
-    <script type="module" src="/src/popup/index.ts"></script>
+    <!-- <script type="module" src="/src/main.ts"></script> -->
   </body>
 </html>
diff --git a/template-alpine-ts/sidepanel.html b/template-alpine-ts/sidepanel.html
@@ -0,0 +1,23 @@
+<!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 + Alpine + TS + Vite App - Side Panel</title>
+  </head>
+  <body>
+    <main x-data>
+      <h3>Side Panel Page!</h3>
+
+      <div x-data="{ username: 'calebporzio' }">Username: <strong x-text="username"></strong></div>
+
+      <h6>v 0.0.0</h6>
+
+      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank" x-data>
+        Power by <span :x-text="$store.shop.crx"></span>
+      </a>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/template-alpine-ts/src/main.css b/template-alpine-ts/src/main.css
@@ -0,0 +1,55 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', 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%;
+}
+
+body {
+  min-width: 20rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #3999b1;
+  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;
+  }
+}
diff --git a/template-alpine-ts/src/main.ts b/template-alpine-ts/src/main.ts
@@ -0,0 +1,18 @@
+import Alpine from 'alpinejs'
+import './main.css'
+
+import type { Alpine as AlpineType } from 'alpinejs'
+
+declare global {
+  interface Window {
+    Alpine: AlpineType
+  }
+}
+
+window.Alpine = Alpine
+
+Alpine.store('shop', {
+  crx: 'create-chrome-ext',
+})
+
+Alpine.start()