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/CHANGELOG.md b/CHANGELOG.md index 5e43f8c..018b23a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,15 @@ Summary 5. version timestamp follow the yyyy.MM.dd format ``` +## 0.8.8 [2023.10.08] + +- feat: support side panel for chrome extension(alpine \ vanilla \ preact \ svelte \ solid \ inferno \ lit) + +## 0.8.7 [2023.10.03] + +- feat: support side panel for chrome extension(react \ vue) +- merge: merge pull requests + ## 0.8.4 [2023.03.23] - merge: merge pull requests diff --git a/package.json b/package.json index c89f810..dbd87d6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-chrome-ext", - "version": "0.8.7", + "version": "0.8.8", "type": "module", "description": "Scaffolding your chrome extension, multiple boilerplates supported!", "author": "yalda", diff --git a/template-alpine-js/options.html b/template-alpine-js/options.html index 58301a6..5019460 100644 --- a/template-alpine-js/options.html +++ b/template-alpine-js/options.html @@ -5,25 +5,15 @@ Chrome Extension + Alpine + JS + Vite App - Options - -
+

Options Page!

v 0.0.0
- - +
- + diff --git a/template-alpine-js/package.json b/template-alpine-js/package.json index 0272d84..d271a44 100644 --- a/template-alpine-js/package.json +++ b/template-alpine-js/package.json @@ -21,10 +21,10 @@ "preview": "vite preview" }, "dependencies": { - "alpinejs": "^3.10.2" + "alpinejs": "^3.13.1" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "vite": "^2.9.13" + "vite": "^4.4.11" } } diff --git a/template-alpine-js/popup.html b/template-alpine-js/popup.html index a092f5a..ef35107 100644 --- a/template-alpine-js/popup.html +++ b/template-alpine-js/popup.html @@ -5,25 +5,15 @@ Chrome Extension + Alpine + JS + Vite App - Popup - -
+

Popup Page!

v 0.0.0
- - +
- + diff --git a/template-alpine-js/sidepanel.html b/template-alpine-js/sidepanel.html new file mode 100644 index 0000000..598a288 --- /dev/null +++ b/template-alpine-js/sidepanel.html @@ -0,0 +1,21 @@ + + + + + + + Chrome Extension + Alpine + JS + Vite App - Side Panel + + +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by + +
+ + + diff --git a/template-alpine-ts/public/common.css b/template-alpine-js/src/main.css similarity index 92% rename from template-alpine-ts/public/common.css rename to template-alpine-js/src/main.css index 16a216d..6896d96 100644 --- a/template-alpine-ts/public/common.css +++ b/template-alpine-js/src/main.css @@ -1,5 +1,6 @@ :root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; @@ -19,11 +20,6 @@ body { min-width: 20rem; } -:root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; -} - main { text-align: center; padding: 1em; diff --git a/template-alpine-js/src/main.js b/template-alpine-js/src/main.js new file mode 100644 index 0000000..fe6a161 --- /dev/null +++ b/template-alpine-js/src/main.js @@ -0,0 +1,10 @@ +import Alpine from 'alpinejs' +import './main.css' + +window.Alpine = Alpine + +Alpine.store('shop', { + crx: 'create-chrome-ext', +}) + +Alpine.start() diff --git a/template-alpine-js/src/manifest.js b/template-alpine-js/src/manifest.js index e41ff31..54ea3b2 100644 --- a/template-alpine-js/src/manifest.js +++ b/template-alpine-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-alpine-js/src/options/index.js b/template-alpine-js/src/options/index.js deleted file mode 100644 index 605069d..0000000 --- a/template-alpine-js/src/options/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import Alpine from 'alpinejs' - -const dropdown = () => { - return { - show: false, - open() { - this.show = true - }, - close() { - this.show = false - }, - isOpen() { - return this.show === true - }, - } -} - -Reflect.set(window, 'dropdown', dropdown) - -Alpine.start() -window.Alpine = Alpine diff --git a/template-alpine-js/src/popup/index.js b/template-alpine-js/src/popup/index.js deleted file mode 100644 index ff6eb2d..0000000 --- a/template-alpine-js/src/popup/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import Alpine from 'alpinejs' - -window.Alpine = Alpine - -Alpine.start() - -Alpine.data('dropdown', () => ({ - open: false, - - toggle() { - this.open = !this.open - }, -})) - -console.info('popup index.js loaded') diff --git a/template-alpine-ts/options.html b/template-alpine-ts/options.html index d0dbf41..a0cd11c 100644 --- a/template-alpine-ts/options.html +++ b/template-alpine-ts/options.html @@ -5,25 +5,15 @@ Chrome Extension + Alpine + TS + Vite App - Options - -
+

Options Page!

v 0.0.0
- - +
- + diff --git a/template-alpine-ts/package.json b/template-alpine-ts/package.json index c642763..1c2c740 100644 --- a/template-alpine-ts/package.json +++ b/template-alpine-ts/package.json @@ -21,12 +21,13 @@ "preview": "vite preview" }, "dependencies": { - "alpinejs": "^3.10.2" + "alpinejs": "^3.13.1" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "@types/chrome": "^0.0.236", - "typescript": "^4.6.4", - "vite": "^2.9.13" + "@types/alpinejs": "^3.13.2", + "@types/chrome": "^0.0.246", + "typescript": "^5.2.2", + "vite": "^3.2.7" } } diff --git a/template-alpine-ts/popup.html b/template-alpine-ts/popup.html index 9167ba4..f80138e 100644 --- a/template-alpine-ts/popup.html +++ b/template-alpine-ts/popup.html @@ -5,25 +5,15 @@ Chrome Extension + Alpine + TS + Vite App - Popup - -
+

Popup Page!

v 0.0.0
- - +
- + diff --git a/template-alpine-ts/sidepanel.html b/template-alpine-ts/sidepanel.html new file mode 100644 index 0000000..bbcbc5f --- /dev/null +++ b/template-alpine-ts/sidepanel.html @@ -0,0 +1,23 @@ + + + + + + + Chrome Extension + Alpine + TS + Vite App - Side Panel + + +
+

Side Panel Page!

+ +
Username:
+ +
v 0.0.0
+ + + Power by + +
+ + + diff --git a/template-alpine-ts/src/main.css b/template-alpine-ts/src/main.css new file mode 100644 index 0000000..6896d96 --- /dev/null +++ b/template-alpine-ts/src/main.css @@ -0,0 +1,55 @@ +:root { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', 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%; +} + +body { + min-width: 20rem; +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #3999b1; + 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-alpine-ts/src/main.ts b/template-alpine-ts/src/main.ts new file mode 100644 index 0000000..4943b68 --- /dev/null +++ b/template-alpine-ts/src/main.ts @@ -0,0 +1,18 @@ +import Alpine from 'alpinejs' +import './main.css' + +import type { Alpine as AlpineType } from 'alpinejs' + +declare global { + interface Window { + Alpine: AlpineType + } +} + +window.Alpine = Alpine + +Alpine.store('shop', { + crx: 'create-chrome-ext', +}) + +Alpine.start() diff --git a/template-alpine-ts/src/manifest.ts b/template-alpine-ts/src/manifest.ts index 3c64c7b..9f63f01 100644 --- a/template-alpine-ts/src/manifest.ts +++ b/template-alpine-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-alpine-ts/src/options/index.ts b/template-alpine-ts/src/options/index.ts deleted file mode 100644 index d41a043..0000000 --- a/template-alpine-ts/src/options/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Alpine from 'alpinejs' - -window.Alpine = Alpine - -Alpine.start() diff --git a/template-alpine-ts/src/popup/index.ts b/template-alpine-ts/src/popup/index.ts deleted file mode 100644 index d41a043..0000000 --- a/template-alpine-ts/src/popup/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Alpine from 'alpinejs' - -window.Alpine = Alpine - -Alpine.start() diff --git a/template-alpine-ts/vite.config.ts b/template-alpine-ts/vite.config.ts index 85f2498..670a908 100644 --- a/template-alpine-ts/vite.config.ts +++ b/template-alpine-ts/vite.config.ts @@ -3,7 +3,7 @@ import { crx } from '@crxjs/vite-plugin' import manifest from './src/manifest' // https://vitejs.dev/config/ -export default defineConfig(({ mode }) => { +export default defineConfig(() => { return { build: { emptyOutDir: true, 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')!) diff --git a/template-lit-js/options.html b/template-lit-js/options.html index 9027fa9..06a7fb5 100644 --- a/template-lit-js/options.html +++ b/template-lit-js/options.html @@ -6,11 +6,9 @@ Chrome Extension + Lit + JS + Vite App - Options - - -

Vite + Lit

- + + diff --git a/template-lit-js/package.json b/template-lit-js/package.json index 140addd..31ee805 100644 --- a/template-lit-js/package.json +++ b/template-lit-js/package.json @@ -21,11 +21,11 @@ "fmt": "prettier --write '**/*.{js,json,css,scss,md}'" }, "dependencies": { - "lit": "^2.2.6" + "lit": "^2.8.0" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "prettier": "^2.7.1", - "vite": "^2.9.13" + "prettier": "^3.0.3", + "vite": "^3.2.7" } } diff --git a/template-lit-js/popup.html b/template-lit-js/popup.html index 70fa2b3..919c81c 100644 --- a/template-lit-js/popup.html +++ b/template-lit-js/popup.html @@ -6,11 +6,9 @@ Chrome Extension + Lit + JS + Vite App - Popup - - -

Vite + Lit

- + + diff --git a/template-lit-js/sidepanel.html b/template-lit-js/sidepanel.html new file mode 100644 index 0000000..966c1c6 --- /dev/null +++ b/template-lit-js/sidepanel.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Lit + JS + Vite App - Side Panel + + + + + + + diff --git a/template-lit-js/src/index.css b/template-lit-js/src/index.css index b52d4c6..05242c4 100644 --- a/template-lit-js/src/index.css +++ b/template-lit-js/src/index.css @@ -15,14 +15,6 @@ -webkit-text-size-adjust: 100%; } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - @media (prefers-color-scheme: light) { :root { color: #213547; diff --git a/template-lit-js/src/manifest.js b/template-lit-js/src/manifest.js index e41ff31..54ea3b2 100644 --- a/template-lit-js/src/manifest.js +++ b/template-lit-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-lit-js/src/options/index.js b/template-lit-js/src/options/index.js index bceb5a6..462cf84 100644 --- a/template-lit-js/src/options/index.js +++ b/template-lit-js/src/options/index.js @@ -22,8 +22,6 @@ export class Options extends LitElement {
v 0.0.0
- - Generator by ${this.crx} @@ -59,7 +57,7 @@ export class Options extends LitElement { h6 { font-size: 0.5rem; - color: #333333; + color: #cccccc; margin: 0.5rem; } @@ -79,4 +77,4 @@ export class Options extends LitElement { } } -window.customElements.define('options', Options) +window.customElements.define('options-panel', Options) diff --git a/template-lit-js/src/popup/index.js b/template-lit-js/src/popup/index.js index ea2199a..d926fb2 100644 --- a/template-lit-js/src/popup/index.js +++ b/template-lit-js/src/popup/index.js @@ -22,8 +22,6 @@ export class Popup extends LitElement {
v 0.0.0
- - Generator by ${this.crx} @@ -59,7 +57,7 @@ export class Popup extends LitElement { h6 { font-size: 0.5rem; - color: #333333; + color: #cccccc; margin: 0.5rem; } @@ -79,4 +77,4 @@ export class Popup extends LitElement { } } -window.customElements.define('popup', Popup) +window.customElements.define('popup-panel', Popup) diff --git a/template-lit-js/src/sidepanel/index.js b/template-lit-js/src/sidepanel/index.js new file mode 100644 index 0000000..ea7a100 --- /dev/null +++ b/template-lit-js/src/sidepanel/index.js @@ -0,0 +1,80 @@ +import { html, css, LitElement } from 'lit' + +/** + * Side Panel + */ +export class Sidepanel extends LitElement { + static get properties() { + return { + crx: { type: String }, + } + } + + constructor() { + super() + this.crx = 'create-chrome-ext' + } + + render() { + return html` +
+

Side Panel Page!

+ +
v 0.0.0
+ + Generator by ${this.crx} +
+ ` + } + + static get styles() { + return css` + :root { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + + :global(body) { + min-width: 20rem; + } + + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } + + h3 { + color: #3355ff; + 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; + } + } + ` + } +} + +window.customElements.define('side-panel', Sidepanel) diff --git a/template-lit-js/vite.config.js b/template-lit-js/vite.config.js index 19812da..07178a1 100644 --- a/template-lit-js/vite.config.js +++ b/template-lit-js/vite.config.js @@ -4,21 +4,20 @@ import { crx } from '@crxjs/vite-plugin' import manifest from './src/manifest.js' // https://vitejs.dev/config/ -export default defineConfig(({ mode }) => { - return { - build: { - emptyOutDir: true, - outDir: 'build', - rollupOptions: { - input: { - options: path.resolve('options.html'), - popup: path.resolve('popup.html'), - }, - output: { - chunkFileNames: 'assets/chunk-[hash].js', - }, +export default defineConfig({ + build: { + emptyOutDir: true, + outDir: 'build', + rollupOptions: { + input: { + options: path.resolve('options.html'), + popup: path.resolve('popup.html'), + sidepanel: path.resolve('sidepanel.html'), + }, + output: { + chunkFileNames: 'assets/chunk-[hash].js', }, }, - plugin: [crx({ manifest })], - } + }, + plugins: [crx({ manifest })], }) diff --git a/template-lit-ts/options.html b/template-lit-ts/options.html index 892bd79..eba7e66 100644 --- a/template-lit-ts/options.html +++ b/template-lit-ts/options.html @@ -8,9 +8,9 @@ - +

Vite + Lit

- + diff --git a/template-lit-ts/package.json b/template-lit-ts/package.json index a0eb063..82e635d 100644 --- a/template-lit-ts/package.json +++ b/template-lit-ts/package.json @@ -21,14 +21,14 @@ "fmt": "prettier --write '**/*.{ts,json,css,scss,md}'" }, "dependencies": { - "lit": "^2.2.6" + "lit": "^2.8.0" }, "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", - "@types/chrome": "^0.0.236", + "@types/chrome": "^0.0.246", "path": "^0.12.7", - "prettier": "^2.7.1", - "typescript": "^4.6.4", - "vite": "^2.9.13" + "prettier": "^3.0.3", + "typescript": "^5.2.2", + "vite": "^3.2.7" } } diff --git a/template-lit-ts/popup.html b/template-lit-ts/popup.html index f1710d2..ceaf579 100644 --- a/template-lit-ts/popup.html +++ b/template-lit-ts/popup.html @@ -8,9 +8,9 @@ - +

Vite + Lit

- + diff --git a/template-lit-ts/sidepanel.html b/template-lit-ts/sidepanel.html new file mode 100644 index 0000000..fd1c65f --- /dev/null +++ b/template-lit-ts/sidepanel.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Lit + TS + Vite App - Side Panel + + + + + + + diff --git a/template-lit-ts/src/index.css b/template-lit-ts/src/index.css index b52d4c6..05242c4 100644 --- a/template-lit-ts/src/index.css +++ b/template-lit-ts/src/index.css @@ -15,14 +15,6 @@ -webkit-text-size-adjust: 100%; } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - @media (prefers-color-scheme: light) { :root { color: #213547; diff --git a/template-lit-ts/src/manifest.ts b/template-lit-ts/src/manifest.ts index 3c64c7b..9f63f01 100644 --- a/template-lit-ts/src/manifest.ts +++ b/template-lit-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-lit-ts/src/options/index.ts b/template-lit-ts/src/options/index.ts index b93b151..57594fc 100644 --- a/template-lit-ts/src/options/index.ts +++ b/template-lit-ts/src/options/index.ts @@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js' /** * options */ -@customElement('options') +@customElement('options-panel') export class Options extends LitElement { @property() crx = 'create-chrome-ext' @@ -73,6 +73,6 @@ export class Options extends LitElement { declare global { interface HTMLElementTagNameMap { - options: Options + 'options-panel': Options } } diff --git a/template-lit-ts/src/popup/index.ts b/template-lit-ts/src/popup/index.ts index 0334f03..398d232 100644 --- a/template-lit-ts/src/popup/index.ts +++ b/template-lit-ts/src/popup/index.ts @@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js' /** * popup */ -@customElement('popup') +@customElement('popup-panel') export class Popup extends LitElement { @property() crx = 'create-chrome-ext' @@ -73,6 +73,6 @@ export class Popup extends LitElement { declare global { interface HTMLElementTagNameMap { - popup: Popup + 'popup-panel': Popup } } diff --git a/template-lit-ts/src/sidepanel/index.ts b/template-lit-ts/src/sidepanel/index.ts new file mode 100644 index 0000000..a22e7c1 --- /dev/null +++ b/template-lit-ts/src/sidepanel/index.ts @@ -0,0 +1,76 @@ +import { html, css, LitElement } from 'lit' +import { customElement, property } from 'lit/decorators.js' + +/** + * sidepanel + */ +@customElement('side-panel') +export class Sidepanel extends LitElement { + @property() + crx = 'create-chrome-ext' + + render() { + return html` +
+

Side Panel Page!

+ +
v 0.0.0
+ + Generator by ${this.crx} +
+ ` + } + + static styles = css` + :root { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; + } + + :global(body) { + min-width: 20rem; + } + + main { + text-align: center; + padding: 1em; + margin: 0 auto; + } + + h3 { + color: #3355ff; + 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; + } + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'side-panel': Sidepanel + } +} diff --git a/template-lit-ts/vite.config.ts b/template-lit-ts/vite.config.ts index d365b5b..c976f98 100644 --- a/template-lit-ts/vite.config.ts +++ b/template-lit-ts/vite.config.ts @@ -12,6 +12,7 @@ export default defineConfig({ input: { options: path.resolve('options.html'), popup: path.resolve('popup.html'), + sidepanel: path.resolve('sidepanel.html'), }, output: { chunkFileNames: 'assets/chunk-[hash].js', diff --git a/template-preact-js/sidepanel.html b/template-preact-js/sidepanel.html new file mode 100644 index 0000000..400b084 --- /dev/null +++ b/template-preact-js/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Preact + JS + Vite App - SidePanel + + +
+ + + diff --git a/template-preact-js/src/manifest.js b/template-preact-js/src/manifest.js index e41ff31..54ea3b2 100644 --- a/template-preact-js/src/manifest.js +++ b/template-preact-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-preact-js/src/sidepanel/Sidepanel.css b/template-preact-js/src/sidepanel/Sidepanel.css new file mode 100644 index 0000000..c5cfc48 --- /dev/null +++ b/template-preact-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: #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; + } +} diff --git a/template-preact-js/src/sidepanel/Sidepanel.jsx b/template-preact-js/src/sidepanel/Sidepanel.jsx new file mode 100644 index 0000000..4145c55 --- /dev/null +++ b/template-preact-js/src/sidepanel/Sidepanel.jsx @@ -0,0 +1,20 @@ +import { useState } from 'preact/hooks' +import './Sidepanel.css' + +export const Sidepanel = () => { + const [crx, setCrx] = useState('create-chrome-ext') + + return ( +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Sidepanel diff --git a/template-preact-js/src/sidepanel/index.css b/template-preact-js/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-preact-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-preact-js/src/sidepanel/index.jsx b/template-preact-js/src/sidepanel/index.jsx new file mode 100644 index 0000000..a85814f --- /dev/null +++ b/template-preact-js/src/sidepanel/index.jsx @@ -0,0 +1,5 @@ +import { render } from 'preact' +import { Sidepanel } from './Sidepanel' +import './index.css' + +render(, document.getElementById('app')) diff --git a/template-preact-ts/sidepanel.html b/template-preact-ts/sidepanel.html new file mode 100644 index 0000000..d0a2c41 --- /dev/null +++ b/template-preact-ts/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Preact + TS + Vite App - SidePanel + + +
+ + + diff --git a/template-preact-ts/src/manifest.ts b/template-preact-ts/src/manifest.ts index 6e50228..bc1eee2 100644 --- a/template-preact-ts/src/manifest.ts +++ b/template-preact-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-preact-ts/src/sidepanel/Sidepanel.css b/template-preact-ts/src/sidepanel/Sidepanel.css new file mode 100644 index 0000000..c5cfc48 --- /dev/null +++ b/template-preact-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: #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; + } +} diff --git a/template-preact-ts/src/sidepanel/Sidepanel.tsx b/template-preact-ts/src/sidepanel/Sidepanel.tsx new file mode 100644 index 0000000..9f61f56 --- /dev/null +++ b/template-preact-ts/src/sidepanel/Sidepanel.tsx @@ -0,0 +1,20 @@ +import { useState } from 'preact/hooks' +import './Sidepanel.css' + +export const Sidepanel = () => { + const [crx] = useState('create-chrome-ext') + + return ( +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Sidepanel diff --git a/template-preact-ts/src/sidepanel/index.css b/template-preact-ts/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-preact-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-preact-ts/src/sidepanel/index.tsx b/template-preact-ts/src/sidepanel/index.tsx new file mode 100644 index 0000000..5c896a8 --- /dev/null +++ b/template-preact-ts/src/sidepanel/index.tsx @@ -0,0 +1,5 @@ +import { render } from 'preact' +import { Sidepanel } from './Sidepanel' +import './index.css' + +render(, document.getElementById('app') as HTMLElement) diff --git a/template-solid-js/package.json b/template-solid-js/package.json index 08ff333..3663612 100644 --- a/template-solid-js/package.json +++ b/template-solid-js/package.json @@ -24,9 +24,9 @@ "devDependencies": { "@crxjs/vite-plugin": "^2.0.0-beta.19", "prettier": "^2.7.1", - "vite": "^2.9.13", - "vite-plugin-zip-pack": "^1.0.5", - "vite-plugin-solid": "^2.2.6" + "vite": "^3.2.7", + "vite-plugin-solid": "^2.7.0", + "vite-plugin-zip-pack": "^1.0.6" }, "dependencies": { "solid-js": "^1.4.2" diff --git a/template-solid-js/sidepanel.html b/template-solid-js/sidepanel.html new file mode 100644 index 0000000..49dfa1b --- /dev/null +++ b/template-solid-js/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Solid + TS + Vite - Side Panel + + +
+ + + diff --git a/template-solid-js/src/manifest.js b/template-solid-js/src/manifest.js index e41ff31..54ea3b2 100644 --- a/template-solid-js/src/manifest.js +++ b/template-solid-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-solid-js/src/sidepanel/Sidepanel.jsx b/template-solid-js/src/sidepanel/Sidepanel.jsx new file mode 100644 index 0000000..4a1f795 --- /dev/null +++ b/template-solid-js/src/sidepanel/Sidepanel.jsx @@ -0,0 +1,23 @@ +import { createSignal } from 'solid-js' + +import './Sidepanel.module.css' + +/** + * Popup component. + */ +export const Sidepanel = () => { + const [crx] = createSignal('create-chrome-ext') + return ( +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Sidepanel diff --git a/template-solid-js/src/sidepanel/Sidepanel.module.css b/template-solid-js/src/sidepanel/Sidepanel.module.css new file mode 100644 index 0000000..3316cfc --- /dev/null +++ b/template-solid-js/src/sidepanel/Sidepanel.module.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: #142d61; + 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-solid-js/src/sidepanel/index.css b/template-solid-js/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-solid-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-solid-js/src/sidepanel/index.jsx b/template-solid-js/src/sidepanel/index.jsx new file mode 100644 index 0000000..dce6964 --- /dev/null +++ b/template-solid-js/src/sidepanel/index.jsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { Sidepanel } from './Sidepanel' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json index 27df54d..c829e7e 100644 --- a/template-solid-ts/package.json +++ b/template-solid-ts/package.json @@ -26,9 +26,9 @@ "@types/chrome": "^0.0.236", "prettier": "^2.7.1", "typescript": "^4.6.4", - "vite": "^2.9.9", - "vite-plugin-solid": "^2.2.6", - "vite-plugin-zip-pack": "^1.0.5" + "vite": "^3.2.7", + "vite-plugin-solid": "^2.7.0", + "vite-plugin-zip-pack": "^1.0.6" }, "dependencies": { "solid-js": "^1.4.2" diff --git a/template-solid-ts/sidepanel.html b/template-solid-ts/sidepanel.html new file mode 100644 index 0000000..1ed2c7f --- /dev/null +++ b/template-solid-ts/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Solid + TS + Vite - Side Panel + + +
+ + + diff --git a/template-solid-ts/src/manifest.tsx b/template-solid-ts/src/manifest.tsx index 3c64c7b..9f63f01 100644 --- a/template-solid-ts/src/manifest.tsx +++ b/template-solid-ts/src/manifest.tsx @@ -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-solid-ts/src/sidepanel/Sidepanel.module.css b/template-solid-ts/src/sidepanel/Sidepanel.module.css new file mode 100644 index 0000000..3316cfc --- /dev/null +++ b/template-solid-ts/src/sidepanel/Sidepanel.module.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: #142d61; + 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-solid-ts/src/sidepanel/Sidepanel.tsx b/template-solid-ts/src/sidepanel/Sidepanel.tsx new file mode 100644 index 0000000..4a1f795 --- /dev/null +++ b/template-solid-ts/src/sidepanel/Sidepanel.tsx @@ -0,0 +1,23 @@ +import { createSignal } from 'solid-js' + +import './Sidepanel.module.css' + +/** + * Popup component. + */ +export const Sidepanel = () => { + const [crx] = createSignal('create-chrome-ext') + return ( +
+

Side Panel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default Sidepanel diff --git a/template-solid-ts/src/sidepanel/index.css b/template-solid-ts/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-solid-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-solid-ts/src/sidepanel/index.tsx b/template-solid-ts/src/sidepanel/index.tsx new file mode 100644 index 0000000..dce6964 --- /dev/null +++ b/template-solid-ts/src/sidepanel/index.tsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import { Sidepanel } from './Sidepanel' + +render(() => , document.getElementById('app') ?? document.body) diff --git a/template-svelte-js/sidepanel.html b/template-svelte-js/sidepanel.html new file mode 100644 index 0000000..ebc0600 --- /dev/null +++ b/template-svelte-js/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Svelte + JS + Vite App - Sidepanel + + +
+ + + diff --git a/template-svelte-js/src/manifest.js b/template-svelte-js/src/manifest.js index e41ff31..54ea3b2 100644 --- a/template-svelte-js/src/manifest.js +++ b/template-svelte-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-svelte-js/src/sidepanel/Sidepanel.svelte b/template-svelte-js/src/sidepanel/Sidepanel.svelte new file mode 100644 index 0000000..cd014f4 --- /dev/null +++ b/template-svelte-js/src/sidepanel/Sidepanel.svelte @@ -0,0 +1,56 @@ + + +
+

Side Panel Page!

+ +
v 0.0.0
+ + Power by {crx} +
+ + diff --git a/template-svelte-js/src/sidepanel/index.js b/template-svelte-js/src/sidepanel/index.js new file mode 100644 index 0000000..f89c087 --- /dev/null +++ b/template-svelte-js/src/sidepanel/index.js @@ -0,0 +1,7 @@ +import App from './Sidepanel.svelte' + +const app = new App({ + target: document.getElementById('app'), +}) + +export default app diff --git a/template-svelte-ts/sidepanel.html b/template-svelte-ts/sidepanel.html new file mode 100644 index 0000000..bab9a31 --- /dev/null +++ b/template-svelte-ts/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Svelte + TS + Vite App - Sidepanel + + +
+ + + diff --git a/template-svelte-ts/src/manifest.ts b/template-svelte-ts/src/manifest.ts index 6e50228..bc1eee2 100644 --- a/template-svelte-ts/src/manifest.ts +++ b/template-svelte-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-svelte-ts/src/sidepanel/Sidepanel.svelte b/template-svelte-ts/src/sidepanel/Sidepanel.svelte new file mode 100644 index 0000000..75f1492 --- /dev/null +++ b/template-svelte-ts/src/sidepanel/Sidepanel.svelte @@ -0,0 +1,56 @@ + + +
+

Side Panel Page!

+ +
v 0.0.0
+ + Power by {crx} +
+ + diff --git a/template-svelte-ts/src/sidepanel/index.ts b/template-svelte-ts/src/sidepanel/index.ts new file mode 100644 index 0000000..f89c087 --- /dev/null +++ b/template-svelte-ts/src/sidepanel/index.ts @@ -0,0 +1,7 @@ +import App from './Sidepanel.svelte' + +const app = new App({ + target: document.getElementById('app'), +}) + +export default app 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..54ea3b2 100644 --- a/template-vanilla-js/src/manifest.js +++ b/template-vanilla-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-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..bc1eee2 100644 --- a/template-vanilla-ts/src/manifest.ts +++ b/template-vanilla-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-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} + +
+`