From 980630558223ab794da3bf95d44845344a58bd03 Mon Sep 17 00:00:00 2001 From: Yalda Date: Sun, 8 Oct 2023 00:08:04 +0800 Subject: [PATCH] feat(sidepanel):vanilla support sidepanel --- .gitignore | 5 +- template-vanilla-js/sidepanel.html | 13 +++++ template-vanilla-js/src/manifest.js | 7 ++- template-vanilla-js/src/sidepanel/index.css | 64 +++++++++++++++++++++ template-vanilla-js/src/sidepanel/index.js | 18 ++++++ template-vanilla-ts/sidepanel.html | 13 +++++ template-vanilla-ts/src/manifest.ts | 7 ++- template-vanilla-ts/src/sidepanel/index.css | 64 +++++++++++++++++++++ template-vanilla-ts/src/sidepanel/index.ts | 18 ++++++ 9 files changed, 206 insertions(+), 3 deletions(-) create mode 100644 template-vanilla-js/sidepanel.html create mode 100644 template-vanilla-js/src/sidepanel/index.css create mode 100644 template-vanilla-js/src/sidepanel/index.js create mode 100644 template-vanilla-ts/sidepanel.html create mode 100644 template-vanilla-ts/src/sidepanel/index.css create mode 100644 template-vanilla-ts/src/sidepanel/index.ts 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} + +
+`