diff --git a/.gitignore b/.gitignore
index bc48a79..0c2f63c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,7 @@ types
!.gitignore
!.editorconfig
!.vscode
-!template-*/src/*.js
\ No newline at end of file
+!template-*/src/*.js
+
+# build
+template-*/package
\ No newline at end of file
diff --git a/template-vanilla-js/sidepanel.html b/template-vanilla-js/sidepanel.html
new file mode 100644
index 0000000..07ea6ca
--- /dev/null
+++ b/template-vanilla-js/sidepanel.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Chrome Extension + Vanilla + JS + Vite App - Side Panel
+
+
+
+
+
+
diff --git a/template-vanilla-js/src/manifest.js b/template-vanilla-js/src/manifest.js
index e41ff31..476d049 100644
--- a/template-vanilla-js/src/manifest.js
+++ b/template-vanilla-js/src/manifest.js
@@ -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",
+ ],
})
diff --git a/template-vanilla-js/src/sidepanel/index.css b/template-vanilla-js/src/sidepanel/index.css
new file mode 100644
index 0000000..8e02650
--- /dev/null
+++ b/template-vanilla-js/src/sidepanel/index.css
@@ -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;
+ }
+}
diff --git a/template-vanilla-js/src/sidepanel/index.js b/template-vanilla-js/src/sidepanel/index.js
new file mode 100644
index 0000000..817bba1
--- /dev/null
+++ b/template-vanilla-js/src/sidepanel/index.js
@@ -0,0 +1,18 @@
+import './index.css'
+
+const crx = 'create-chrome-ext'
+
+document.querySelector('#app').innerHTML = `
+
+ Side Panel Page!
+
+ v 0.0.0
+
+
+ Power by ${crx}
+
+
+`
diff --git a/template-vanilla-ts/sidepanel.html b/template-vanilla-ts/sidepanel.html
new file mode 100644
index 0000000..cb811c3
--- /dev/null
+++ b/template-vanilla-ts/sidepanel.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Chrome Extension + Vanilla + TS + Vite App - Sidepanel
+
+
+
+
+
+
diff --git a/template-vanilla-ts/src/manifest.ts b/template-vanilla-ts/src/manifest.ts
index 6e50228..7089f75 100644
--- a/template-vanilla-ts/src/manifest.ts
+++ b/template-vanilla-ts/src/manifest.ts
@@ -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",
+ ],
})
diff --git a/template-vanilla-ts/src/sidepanel/index.css b/template-vanilla-ts/src/sidepanel/index.css
new file mode 100644
index 0000000..8e02650
--- /dev/null
+++ b/template-vanilla-ts/src/sidepanel/index.css
@@ -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;
+ }
+}
diff --git a/template-vanilla-ts/src/sidepanel/index.ts b/template-vanilla-ts/src/sidepanel/index.ts
new file mode 100644
index 0000000..2321a23
--- /dev/null
+++ b/template-vanilla-ts/src/sidepanel/index.ts
@@ -0,0 +1,18 @@
+import './index.css'
+
+const crx = 'create-chrome-ext'
+
+document.querySelector('#app')!.innerHTML = `
+
+ Side Panel Page!
+
+ v 0.0.0
+
+
+ Power by ${crx}
+
+
+`