Skip to content

Commit

Permalink
feat(sidepanel):vanilla support sidepanel
Browse files Browse the repository at this point in the history
  • Loading branch information
guocaoyi committed Oct 7, 2023
1 parent 8de95df commit 9806305
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 3 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,7 @@ types
!.gitignore
!.editorconfig
!.vscode
!template-*/src/*.js
!template-*/src/*.js

# build
template-*/package
13 changes: 13 additions & 0 deletions template-vanilla-js/sidepanel.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!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 + Vanilla + JS + Vite App - Side Panel</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/sidepanel/index.js"></script>
</body>
</html>
7 changes: 6 additions & 1 deletion template-vanilla-js/src/manifest.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,16 @@ 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",
],
})
64 changes: 64 additions & 0 deletions template-vanilla-js/src/sidepanel/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
: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;
}

main {
text-align: center;
padding: 1em;
margin: 0 auto;
}

h3 {
color: #f3e5ab;
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;
}
}
18 changes: 18 additions & 0 deletions template-vanilla-js/src/sidepanel/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import './index.css'

const crx = 'create-chrome-ext'

document.querySelector('#app').innerHTML = `
<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>
`
13 changes: 13 additions & 0 deletions template-vanilla-ts/sidepanel.html
Original file line number Diff line number Diff line change
@@ -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 + Vanilla + TS + Vite App - Sidepanel</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/sidepanel/index.ts"></script>
</body>
</html>
7 changes: 6 additions & 1 deletion template-vanilla-ts/src/manifest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,16 @@ 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",
],
})
64 changes: 64 additions & 0 deletions template-vanilla-ts/src/sidepanel/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
: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;
}

main {
text-align: center;
padding: 1em;
margin: 0 auto;
}

h3 {
color: #f3e5ab;
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;
}
}
18 changes: 18 additions & 0 deletions template-vanilla-ts/src/sidepanel/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import './index.css'

const crx = 'create-chrome-ext'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<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>
`

0 comments on commit 9806305

Please sign in to comment.