diff --git a/CHANGELOG.md b/CHANGELOG.md index 4993f1d..59b8ec0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ Summary ## 0.8.8 [2023.10.08] -- feat: support side panel for chrome extension(apline \ vanilla \ preact \ svelte \ solid) +- feat: support side panel for chrome extension(vanilla \ preact \ svelte \ solid \ inferno) ## 0.8.7 [2023.10.03] diff --git a/template-inferno-js/sidepanel.html b/template-inferno-js/sidepanel.html new file mode 100644 index 0000000..f045912 --- /dev/null +++ b/template-inferno-js/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Inferno + JS + Vite App - Side Panel + + +
+ + + diff --git a/template-inferno-js/src/manifest.js b/template-inferno-js/src/manifest.js index e41ff31..54ea3b2 100644 --- a/template-inferno-js/src/manifest.js +++ b/template-inferno-js/src/manifest.js @@ -26,11 +26,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'], }) diff --git a/template-inferno-js/src/options/Options.css b/template-inferno-js/src/options/Options.css index da8094d..3105a3b 100644 --- a/template-inferno-js/src/options/Options.css +++ b/template-inferno-js/src/options/Options.css @@ -20,7 +20,7 @@ h3 { h6 { font-size: 0.5rem; - color: #333333; + color: #cccccc; margin: 0.5rem; } diff --git a/template-inferno-js/src/popup/Popup.css b/template-inferno-js/src/popup/Popup.css index da8094d..3105a3b 100644 --- a/template-inferno-js/src/popup/Popup.css +++ b/template-inferno-js/src/popup/Popup.css @@ -20,7 +20,7 @@ h3 { h6 { font-size: 0.5rem; - color: #333333; + color: #cccccc; margin: 0.5rem; } diff --git a/template-inferno-js/src/sidepanel/Sidepanel.css b/template-inferno-js/src/sidepanel/Sidepanel.css new file mode 100644 index 0000000..3105a3b --- /dev/null +++ b/template-inferno-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: #d81e06; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +h6 { + font-size: 0.5rem; + color: #cccccc; + margin: 0.5rem; +} + +a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; +} + +@media (min-width: 480px) { + h3 { + max-width: none; + } +} diff --git a/template-inferno-js/src/sidepanel/Sidepanel.jsx b/template-inferno-js/src/sidepanel/Sidepanel.jsx new file mode 100644 index 0000000..48e0627 --- /dev/null +++ b/template-inferno-js/src/sidepanel/Sidepanel.jsx @@ -0,0 +1,22 @@ +import { Component } from 'inferno' +import './Sidepanel.css' + +export class Sidepanel extends Component { + render() { + const crx = 'create-chrome-ext' + + return ( +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) + } +} + +export default Sidepanel diff --git a/template-inferno-js/src/sidepanel/index.css b/template-inferno-js/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-inferno-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; +} diff --git a/template-inferno-js/src/sidepanel/index.jsx b/template-inferno-js/src/sidepanel/index.jsx new file mode 100644 index 0000000..979bd8b --- /dev/null +++ b/template-inferno-js/src/sidepanel/index.jsx @@ -0,0 +1,5 @@ +import { render } from 'inferno' +import './index.css' +import { Sidepanel } from './Sidepanel' + +render(, document.getElementById('app') ?? document.body) diff --git a/template-inferno-ts/sidepanel.html b/template-inferno-ts/sidepanel.html new file mode 100644 index 0000000..6c804fe --- /dev/null +++ b/template-inferno-ts/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Inferno + TS + Vite App - Side Panel + + +
+ + + diff --git a/template-inferno-ts/src/manifest.ts b/template-inferno-ts/src/manifest.ts index 3c64c7b..9f63f01 100644 --- a/template-inferno-ts/src/manifest.ts +++ b/template-inferno-ts/src/manifest.ts @@ -26,11 +26,14 @@ 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'], }) diff --git a/template-inferno-ts/src/options/Options.css b/template-inferno-ts/src/options/Options.css index da8094d..3105a3b 100644 --- a/template-inferno-ts/src/options/Options.css +++ b/template-inferno-ts/src/options/Options.css @@ -20,7 +20,7 @@ h3 { h6 { font-size: 0.5rem; - color: #333333; + color: #cccccc; margin: 0.5rem; } diff --git a/template-inferno-ts/src/popup/Popup.css b/template-inferno-ts/src/popup/Popup.css index da8094d..3105a3b 100644 --- a/template-inferno-ts/src/popup/Popup.css +++ b/template-inferno-ts/src/popup/Popup.css @@ -20,7 +20,7 @@ h3 { h6 { font-size: 0.5rem; - color: #333333; + color: #cccccc; margin: 0.5rem; } diff --git a/template-inferno-ts/src/sidepanel/Sidepanel.css b/template-inferno-ts/src/sidepanel/Sidepanel.css new file mode 100644 index 0000000..3105a3b --- /dev/null +++ b/template-inferno-ts/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: #d81e06; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +h6 { + font-size: 0.5rem; + color: #cccccc; + margin: 0.5rem; +} + +a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; +} + +@media (min-width: 480px) { + h3 { + max-width: none; + } +} diff --git a/template-inferno-ts/src/sidepanel/Sidepanel.tsx b/template-inferno-ts/src/sidepanel/Sidepanel.tsx new file mode 100644 index 0000000..48e0627 --- /dev/null +++ b/template-inferno-ts/src/sidepanel/Sidepanel.tsx @@ -0,0 +1,22 @@ +import { Component } from 'inferno' +import './Sidepanel.css' + +export class Sidepanel extends Component { + render() { + const crx = 'create-chrome-ext' + + return ( +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) + } +} + +export default Sidepanel diff --git a/template-inferno-ts/src/sidepanel/index.css b/template-inferno-ts/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-inferno-ts/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; +} diff --git a/template-inferno-ts/src/sidepanel/index.tsx b/template-inferno-ts/src/sidepanel/index.tsx new file mode 100644 index 0000000..1ded90e --- /dev/null +++ b/template-inferno-ts/src/sidepanel/index.tsx @@ -0,0 +1,5 @@ +import { render } from 'inferno' +import './index.css' +import { Sidepanel } from './Sidepanel' + +render(, document.getElementById('app')!)