Skip to content

Commit 9806305

Browse files
guocaoyiguocaoyi
committed
feat(sidepanel):vanilla support sidepanel
1 parent 8de95df commit 9806305

File tree

9 files changed

+206
-3
lines changed

9 files changed

+206
-3
lines changed

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,7 @@ types
2525
!.gitignore
2626
!.editorconfig
2727
!.vscode
28-
!template-*/src/*.js
28+
!template-*/src/*.js
29+
30+
# build
31+
template-*/package

‎template-vanilla-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="/icons/logo.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Chrome Extension + Vanilla + JS + Vite App - Side Panel</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/sidepanel/index.js"></script>
12+
</body>
13+
</html>

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,16 @@ export default defineManifest({
2626
js: ['src/content/index.js'],
2727
},
2828
],
29+
side_panel: {
30+
default_path: 'sidepanel.html',
31+
},
2932
web_accessible_resources: [
3033
{
3134
resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
3235
matches: [],
3336
},
3437
],
35-
permissions: [],
38+
permissions: [
39+
"sidePanel",
40+
],
3641
})

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
}
31+
32+
main {
33+
text-align: center;
34+
padding: 1em;
35+
margin: 0 auto;
36+
}
37+
38+
h3 {
39+
color: #f3e5ab;
40+
text-transform: uppercase;
41+
font-size: 1.5rem;
42+
font-weight: 200;
43+
line-height: 1.2rem;
44+
margin: 2rem auto;
45+
}
46+
47+
h6 {
48+
font-size: 0.5rem;
49+
color: #333333;
50+
margin: 0.5rem;
51+
}
52+
53+
a {
54+
font-size: 0.5rem;
55+
margin: 0.5rem;
56+
color: #cccccc;
57+
text-decoration: none;
58+
}
59+
60+
@media (min-width: 480px) {
61+
h3 {
62+
max-width: none;
63+
}
64+
}

‎template-vanilla-js/src/sidepanel/index.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import './index.css'
2+
3+
const crx = 'create-chrome-ext'
4+
5+
document.querySelector('#app').innerHTML = `
6+
<main>
7+
<h3>Side Panel Page!</h3>
8+
9+
<h6>v 0.0.0</h6>
10+
11+
<a
12+
href="https://www.npmjs.com/package/create-chrome-ext"
13+
target="_blank"
14+
>
15+
Power by ${crx}
16+
</a>
17+
</main>
18+
`

‎template-vanilla-ts/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 + Vanilla + TS + Vite App - Sidepanel</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/sidepanel/index.ts"></script>
12+
</body>
13+
</html>

‎template-vanilla-ts/src/manifest.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,16 @@ export default defineManifest({
2626
js: ['src/content/index.ts'],
2727
},
2828
],
29+
side_panel: {
30+
default_path: 'sidepanel.html',
31+
},
2932
web_accessible_resources: [
3033
{
3134
resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
3235
matches: [],
3336
},
3437
],
35-
permissions: [],
38+
permissions: [
39+
"sidePanel",
40+
],
3641
})

‎template-vanilla-ts/src/sidepanel/index.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
}
31+
32+
main {
33+
text-align: center;
34+
padding: 1em;
35+
margin: 0 auto;
36+
}
37+
38+
h3 {
39+
color: #f3e5ab;
40+
text-transform: uppercase;
41+
font-size: 1.5rem;
42+
font-weight: 200;
43+
line-height: 1.2rem;
44+
margin: 2rem auto;
45+
}
46+
47+
h6 {
48+
font-size: 0.5rem;
49+
color: #333333;
50+
margin: 0.5rem;
51+
}
52+
53+
a {
54+
font-size: 0.5rem;
55+
margin: 0.5rem;
56+
color: #cccccc;
57+
text-decoration: none;
58+
}
59+
60+
@media (min-width: 480px) {
61+
h3 {
62+
max-width: none;
63+
}
64+
}

‎template-vanilla-ts/src/sidepanel/index.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import './index.css'
2+
3+
const crx = 'create-chrome-ext'
4+
5+
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
6+
<main>
7+
<h3>Side Panel Page!</h3>
8+
9+
<h6>v 0.0.0</h6>
10+
11+
<a
12+
href="https://www.npmjs.com/package/create-chrome-ext"
13+
target="_blank"
14+
>
15+
Power by ${crx}
16+
</a>
17+
</main>
18+
`

0 commit comments

Comments
 (0)