Merge pull request #47 from guocaoyi/feat/side-panel

feat: React & Vue temp support SidePanel

.gitignore

@@ -16,6 +16,7 @@ build
 types
 *.js
 !template-*/*.js
+!template-*/**/*.js
 
 # ignore ide settings
 .idea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-chrome-ext",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "type": "module",
   "description": "Scaffolding your chrome extension, multiple boilerplates supported!",
   "author": "yalda",

template-alpine-js/jsconfig.json

@@ -1 +1 @@
-{ "typeAcquisition": { "include": ["chrome"] } }
+{ "typeAcquisition": { "include": ["chrome"] } }

template-alpine-js/package.json

@@ -24,7 +24,7 @@
     "alpinejs": "^3.10.2"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "vite": "^2.9.13"
   }
 }

template-alpine-ts/package.json

@@ -24,7 +24,7 @@
     "alpinejs": "^3.10.2"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@types/chrome": "^0.0.236",
     "typescript": "^4.6.4",
     "vite": "^2.9.13"

template-inferno-js/jsconfig.json

@@ -1 +1 @@
-{ "typeAcquisition": { "include": ["chrome"] } }
+{ "typeAcquisition": { "include": ["chrome"] } }

template-inferno-js/package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "@babel/core": "7.x",
     "@babel/parser": "7.x",
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "vite": "^2.9.13",
     "vite-plugin-inferno": "0.0.0"
   }

template-inferno-ts/package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "@babel/core": "7.x",
     "@babel/parser": "7.x",
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@types/chrome": "^0.0.236",
     "typescript": "^4.6.4",
     "vite": "^2.9.13",

template-lit-js/jsconfig.json

@@ -1 +1 @@
-{ "typeAcquisition": { "include": ["chrome"] } }
+{ "typeAcquisition": { "include": ["chrome"] } }

template-lit-js/package.json

@@ -24,7 +24,7 @@
     "lit": "^2.2.6"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "prettier": "^2.7.1",
     "vite": "^2.9.13"
   }

template-lit-ts/package.json

@@ -24,7 +24,7 @@
     "lit": "^2.2.6"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@types/chrome": "^0.0.236",
     "path": "^0.12.7",
     "prettier": "^2.7.1",

template-preact-js/jsconfig.json

@@ -1 +1 @@
-{ "typeAcquisition": { "include": ["chrome"] } }
+{ "typeAcquisition": { "include": ["chrome"] } }

template-preact-js/package.json

@@ -24,7 +24,7 @@
     "preact": "^10.8.2"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@preact/preset-vite": "^2.3.0",
     "prettier": "^2.7.1",
     "vite": "^2.9.13"

template-preact-ts/package.json

@@ -24,7 +24,7 @@
     "preact": "^10.8.2"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@preact/preset-vite": "^2.3.0",
     "@types/chrome": "^0.0.236",
     "prettier": "^2.7.1",

template-preact-ts/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import { crx } from '@crxjs/vite-plugin'
 import preact from '@preact/preset-vite'
-import zipPack from 'vite-plugin-zip-pack';
+import zipPack from 'vite-plugin-zip-pack'
 import manifest from './src/manifest'
 
 // https://vitejs.dev/config/
@@ -17,11 +17,17 @@ export default defineConfig(({ mode }) => {
       },
     },
 
-    plugins: [crx({ manifest }), preact(),zipPack({
+    plugins: [
+      crx({ manifest }),
+      preact(),
+      zipPack({
         outDir: `package`,
         inDir: 'build',
         // @ts-ignore
-        outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`,
-      }),],
+        outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${
+          manifest.version
+        }.zip`,
+      }),
+    ],
   }
 })

template-react-js/jsconfig.json

@@ -1 +1 @@
-{ "typeAcquisition": { "include": ["chrome"] } }
+{ "typeAcquisition": { "include": ["chrome"] } }

template-react-js/package.json

@@ -26,7 +26,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@vitejs/plugin-react": "^1.3.2",

template-react-js/pages/page.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-</head>
-<body>
+  </head>
+  <body>
     page
-</body>
-</html>
+  </body>
+</html>

template-react-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 + React + JS + Vite App - SidePanel</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/sidepanel/index.jsx"></script>
+  </body>
+</html>

template-react-js/src/manifest.js

@@ -1,5 +1,5 @@
 import { defineManifest } from '@crxjs/vite-plugin'
-import packageData from '../package.json' assert { type: "json" };;
+import packageData from '../package.json' assert { type: 'json' }
 
 export default defineManifest({
   name: packageData.displayName,
@@ -27,11 +27,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'],
 })

template-react-js/src/read_pages_folder.js

@@ -1,7 +1,10 @@
-import glob from 'glob';
+import glob from 'glob'
 
 const pages = glob.sync('pages/*.html')
 
-const arrayKeyValuePairs = pages.map(file => [file.split('\\').slice(-1).toString().split('.html').join(''), file])
+const arrayKeyValuePairs = pages.map((file) => [
+  file.split('\\').slice(-1).toString().split('.html').join(''),
+  file,
+])
 
 export const config = Object.fromEntries(arrayKeyValuePairs)

template-react-js/src/sidepanel/SidePanel.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: #61dafb;
+  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;
+  }
+}

template-react-js/src/sidepanel/SidePanel.jsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import './SidePanel.css'
+
+function App() {
+  const [crx, setCrx] = useState('create-chrome-ext')
+
+  return (
+    <main>
+      <h3>Sidepanel 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 App

template-react-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;
+}

template-react-js/src/sidepanel/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './SidePanel'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('app')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

template-react-js/vite.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import { crx } from '@crxjs/vite-plugin'
 import react from '@vitejs/plugin-react'
-import zipPack from 'vite-plugin-zip-pack';
+import zipPack from 'vite-plugin-zip-pack'
 import manifest from './src/manifest.js'
 import { config } from './src/read_pages_folder.js'
 
@@ -19,11 +19,17 @@ export default defineConfig(({ mode }) => {
       },
     },
 
-    plugins: [crx({ manifest }), react(),zipPack({
+    plugins: [
+      crx({ manifest }),
+      react(),
+      zipPack({
         outDir: `package`,
         inDir: 'build',
         // @ts-ignore
-        outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`,
-      }),],
+        outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${
+          manifest.version
+        }.zip`,
+      }),
+    ],
   }
 })

template-react-ts/package.json

@@ -26,7 +26,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.12",
+    "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@types/chrome": "^0.0.236",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",