Skip to content

Commit 6022011

Browse files
guocaoyiguocaoyi
authored
Merge pull request #47 from guocaoyi/feat/side-panel
feat: React & Vue temp support SidePanel
2 parents aa53b8f + 9ba7126 commit 6022011

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+657
-143
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ build
1616
types
1717
*.js
1818
!template-*/*.js
19+
!template-*/**/*.js
1920

2021
# ignore ide settings
2122
.idea

‎index.ts

100755100644
File mode changed.

‎npm-shrinkwrap.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-chrome-ext",
3-
"version": "0.8.6",
3+
"version": "0.8.7",
44
"type": "module",
55
"description": "Scaffolding your chrome extension, multiple boilerplates supported!",
66
"author": "yalda",

‎template-alpine-js/jsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "typeAcquisition": { "include": ["chrome"] } }
1+
{ "typeAcquisition": { "include": ["chrome"] } }

‎template-alpine-js/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"alpinejs": "^3.10.2"
2525
},
2626
"devDependencies": {
27-
"@crxjs/vite-plugin": "^1.0.12",
27+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2828
"vite": "^2.9.13"
2929
}
3030
}

‎template-alpine-ts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"alpinejs": "^3.10.2"
2525
},
2626
"devDependencies": {
27-
"@crxjs/vite-plugin": "^1.0.12",
27+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2828
"@types/chrome": "^0.0.236",
2929
"typescript": "^4.6.4",
3030
"vite": "^2.9.13"

‎template-inferno-js/jsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "typeAcquisition": { "include": ["chrome"] } }
1+
{ "typeAcquisition": { "include": ["chrome"] } }

‎template-inferno-js/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"devDependencies": {
2727
"@babel/core": "7.x",
2828
"@babel/parser": "7.x",
29-
"@crxjs/vite-plugin": "^1.0.12",
29+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
3030
"vite": "^2.9.13",
3131
"vite-plugin-inferno": "0.0.0"
3232
}

‎template-inferno-ts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"devDependencies": {
2727
"@babel/core": "7.x",
2828
"@babel/parser": "7.x",
29-
"@crxjs/vite-plugin": "^1.0.12",
29+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
3030
"@types/chrome": "^0.0.236",
3131
"typescript": "^4.6.4",
3232
"vite": "^2.9.13",

‎template-lit-js/jsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "typeAcquisition": { "include": ["chrome"] } }
1+
{ "typeAcquisition": { "include": ["chrome"] } }

‎template-lit-js/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"lit": "^2.2.6"
2525
},
2626
"devDependencies": {
27-
"@crxjs/vite-plugin": "^1.0.12",
27+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2828
"prettier": "^2.7.1",
2929
"vite": "^2.9.13"
3030
}

‎template-lit-ts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"lit": "^2.2.6"
2525
},
2626
"devDependencies": {
27-
"@crxjs/vite-plugin": "^1.0.12",
27+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2828
"@types/chrome": "^0.0.236",
2929
"path": "^0.12.7",
3030
"prettier": "^2.7.1",

‎template-preact-js/jsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "typeAcquisition": { "include": ["chrome"] } }
1+
{ "typeAcquisition": { "include": ["chrome"] } }

‎template-preact-js/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"preact": "^10.8.2"
2525
},
2626
"devDependencies": {
27-
"@crxjs/vite-plugin": "^1.0.12",
27+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2828
"@preact/preset-vite": "^2.3.0",
2929
"prettier": "^2.7.1",
3030
"vite": "^2.9.13"

‎template-preact-ts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"preact": "^10.8.2"
2525
},
2626
"devDependencies": {
27-
"@crxjs/vite-plugin": "^1.0.12",
27+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2828
"@preact/preset-vite": "^2.3.0",
2929
"@types/chrome": "^0.0.236",
3030
"prettier": "^2.7.1",

‎template-preact-ts/vite.config.ts

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from 'vite'
22
import { crx } from '@crxjs/vite-plugin'
33
import preact from '@preact/preset-vite'
4-
import zipPack from 'vite-plugin-zip-pack';
4+
import zipPack from 'vite-plugin-zip-pack'
55
import manifest from './src/manifest'
66

77
// https://vitejs.dev/config/
@@ -17,11 +17,17 @@ export default defineConfig(({ mode }) => {
1717
},
1818
},
1919

20-
plugins: [crx({ manifest }), preact(),zipPack({
20+
plugins: [
21+
crx({ manifest }),
22+
preact(),
23+
zipPack({
2124
outDir: `package`,
2225
inDir: 'build',
2326
// @ts-ignore
24-
outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`,
25-
}),],
27+
outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${
28+
manifest.version
29+
}.zip`,
30+
}),
31+
],
2632
}
2733
})

‎template-react-js/jsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "typeAcquisition": { "include": ["chrome"] } }
1+
{ "typeAcquisition": { "include": ["chrome"] } }

‎template-react-js/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"react-dom": "^18.2.0"
2727
},
2828
"devDependencies": {
29-
"@crxjs/vite-plugin": "^1.0.12",
29+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
3030
"@types/react": "^18.0.14",
3131
"@types/react-dom": "^18.0.5",
3232
"@vitejs/plugin-react": "^1.3.2",

‎template-react-js/pages/page.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Document</title>
8-
</head>
9-
<body>
8+
</head>
9+
<body>
1010
page
11-
</body>
12-
</html>
11+
</body>
12+
</html>

‎template-react-js/sidepanel.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/icon/logo.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Chrome Extension + React + JS + Vite App - SidePanel</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/sidepanel/index.jsx"></script>
12+
</body>
13+
</html>

‎template-react-js/src/manifest.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { defineManifest } from '@crxjs/vite-plugin'
2-
import packageData from '../package.json' assert { type: "json" };;
2+
import packageData from '../package.json' assert { type: 'json' }
33

44
export default defineManifest({
55
name: packageData.displayName,
@@ -27,11 +27,14 @@ export default defineManifest({
2727
js: ['src/content/index.js'],
2828
},
2929
],
30+
side_panel: {
31+
default_path: 'sidepanel.html',
32+
},
3033
web_accessible_resources: [
3134
{
3235
resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
3336
matches: [],
3437
},
3538
],
36-
permissions: [],
39+
permissions: ['sidePanel'],
3740
})

‎template-react-js/src/read_pages_folder.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import glob from 'glob';
1+
import glob from 'glob'
22

33
const pages = glob.sync('pages/*.html')
44

5-
const arrayKeyValuePairs = pages.map(file => [file.split('\\').slice(-1).toString().split('.html').join(''), file])
5+
const arrayKeyValuePairs = pages.map((file) => [
6+
file.split('\\').slice(-1).toString().split('.html').join(''),
7+
file,
8+
])
69

710
export const config = Object.fromEntries(arrayKeyValuePairs)

‎template-react-js/src/sidepanel/SidePanel.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
:root {
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
3+
'Open Sans', 'Helvetica Neue', sans-serif;
4+
}
5+
6+
main {
7+
text-align: center;
8+
padding: 1em;
9+
margin: 0 auto;
10+
}
11+
12+
h3 {
13+
color: #61dafb;
14+
text-transform: uppercase;
15+
font-size: 1.5rem;
16+
font-weight: 200;
17+
line-height: 1.2rem;
18+
margin: 2rem auto;
19+
}
20+
21+
h6 {
22+
font-size: 0.5rem;
23+
color: #333333;
24+
margin: 0.5rem;
25+
}
26+
27+
a {
28+
font-size: 0.5rem;
29+
margin: 0.5rem;
30+
color: #cccccc;
31+
text-decoration: none;
32+
}
33+
34+
@media (min-width: 480px) {
35+
h3 {
36+
max-width: none;
37+
}
38+
}

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useState } from 'react'
2+
import './SidePanel.css'
3+
4+
function App() {
5+
const [crx, setCrx] = useState('create-chrome-ext')
6+
7+
return (
8+
<main>
9+
<h3>Sidepanel Page!</h3>
10+
11+
<h6>v 0.0.0</h6>
12+
13+
<a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
14+
Power by {crx}
15+
</a>
16+
</main>
17+
)
18+
}
19+
20+
export default App

‎template-react-js/src/sidepanel/index.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
@media (prefers-color-scheme: light) {
19+
:root {
20+
color: #213547;
21+
background-color: #ffffff;
22+
}
23+
a:hover {
24+
color: #747bff;
25+
}
26+
}
27+
28+
body {
29+
min-width: 20rem;
30+
}

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './SidePanel'
4+
import './index.css'
5+
6+
ReactDOM.createRoot(document.getElementById('app')).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
)

‎template-react-js/vite.config.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from 'vite'
22
import { crx } from '@crxjs/vite-plugin'
33
import react from '@vitejs/plugin-react'
4-
import zipPack from 'vite-plugin-zip-pack';
4+
import zipPack from 'vite-plugin-zip-pack'
55
import manifest from './src/manifest.js'
66
import { config } from './src/read_pages_folder.js'
77

@@ -19,11 +19,17 @@ export default defineConfig(({ mode }) => {
1919
},
2020
},
2121

22-
plugins: [crx({ manifest }), react(),zipPack({
22+
plugins: [
23+
crx({ manifest }),
24+
react(),
25+
zipPack({
2326
outDir: `package`,
2427
inDir: 'build',
2528
// @ts-ignore
26-
outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`,
27-
}),],
29+
outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${
30+
manifest.version
31+
}.zip`,
32+
}),
33+
],
2834
}
2935
})

‎template-react-ts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"react-dom": "^18.2.0"
2727
},
2828
"devDependencies": {
29-
"@crxjs/vite-plugin": "^1.0.12",
29+
"@crxjs/vite-plugin": "^2.0.0-beta.19",
3030
"@types/chrome": "^0.0.236",
3131
"@types/react": "^18.0.14",
3232
"@types/react-dom": "^18.0.5",

0 commit comments

Comments
 (0)