Skip to content

Commit

Permalink
feat(sidepanel):preact support sidepanel
Browse files Browse the repository at this point in the history
  • Loading branch information
guocaoyi committed Oct 8, 2023
1 parent 9806305 commit f643cd5
Show file tree
Hide file tree
Showing 13 changed files with 228 additions and 2 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ Summary
5. version timestamp follow the yyyy.MM.dd format
```

## 0.8.8 [2023.10.08]

- feat: support side panel for chrome extension(vanilla \ preact \ solid \ stencil \ svelte \ lit \ inferno)

## 0.8.7 [2023.10.03]

- feat: support side panel for chrome extension(react & vue)
Expand Down
13 changes: 13 additions & 0 deletions template-preact-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="/icon/logo.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chrome Extension + Preact + JS + Vite App - SidePanel</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/sidepanel/index.jsx"></script>
</body>
</html>
7 changes: 6 additions & 1 deletion template-preact-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",
],
})
38 changes: 38 additions & 0 deletions template-preact-js/src/sidepanel/Sidepanel.css
Original file line number Diff line number Diff line change
@@ -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: #673ab8;
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;
}
}
20 changes: 20 additions & 0 deletions template-preact-js/src/sidepanel/Sidepanel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useState } from 'preact/hooks'
import './Sidepanel.css'

export const Sidepanel = () => {
const [crx, setCrx] = useState('create-chrome-ext')

return (
<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>
)
}

export default Sidepanel
30 changes: 30 additions & 0 deletions template-preact-js/src/sidepanel/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions template-preact-js/src/sidepanel/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { render } from 'preact'
import { Sidepanel } from './Sidepanel'
import './index.css'

render(<Sidepanel />, document.getElementById('app'))
13 changes: 13 additions & 0 deletions template-preact-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 + Preact + TS + Vite App - SidePanel</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/sidepanel/index.tsx"></script>
</body>
</html>
7 changes: 6 additions & 1 deletion template-preact-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",
],
})
38 changes: 38 additions & 0 deletions template-preact-ts/src/sidepanel/Sidepanel.css
Original file line number Diff line number Diff line change
@@ -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: #673ab8;
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;
}
}
20 changes: 20 additions & 0 deletions template-preact-ts/src/sidepanel/Sidepanel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useState } from 'preact/hooks'
import './Sidepanel.css'

export const Sidepanel = () => {
const [crx] = useState('create-chrome-ext')

return (
<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>
)
}

export default Sidepanel
30 changes: 30 additions & 0 deletions template-preact-ts/src/sidepanel/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions template-preact-ts/src/sidepanel/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { render } from 'preact'
import { Sidepanel } from './Sidepanel'
import './index.css'

render(<Sidepanel />, document.getElementById('app') as HTMLElement)

0 comments on commit f643cd5

Please sign in to comment.