diff --git a/.gitignore b/.gitignore index 0f48ac1..bc48a79 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ build types *.js !template-*/*.js +!template-*/**/*.js # ignore ide settings .idea diff --git a/index.ts b/index.ts old mode 100755 new mode 100644 diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 9ab1dd8..09e91da 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "create-chrome-ext", - "version": "0.8.4", + "version": "0.8.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "create-chrome-ext", - "version": "0.8.4", + "version": "0.8.7", "license": "MIT", "dependencies": { "kolorist": "^1.5.1", @@ -19,7 +19,7 @@ "crx": "index.js" }, "engines": { - "node": ">=16.x" + "node": ">=14.18.0" }, "optionalDependencies": { "@types/minimist": "^1.2.2", diff --git a/package.json b/package.json index 81111b4..c89f810 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-chrome-ext", - "version": "0.8.6", + "version": "0.8.7", "type": "module", "description": "Scaffolding your chrome extension, multiple boilerplates supported!", "author": "yalda", diff --git a/template-alpine-js/jsconfig.json b/template-alpine-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-alpine-js/jsconfig.json +++ b/template-alpine-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-alpine-js/package.json b/template-alpine-js/package.json index b8dd0e3..0272d84 100644 --- a/template-alpine-js/package.json +++ b/template-alpine-js/package.json @@ -24,7 +24,7 @@ "alpinejs": "^3.10.2" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "vite": "^2.9.13" } } diff --git a/template-alpine-ts/package.json b/template-alpine-ts/package.json index 7e91435..c642763 100644 --- a/template-alpine-ts/package.json +++ b/template-alpine-ts/package.json @@ -24,7 +24,7 @@ "alpinejs": "^3.10.2" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "typescript": "^4.6.4", "vite": "^2.9.13" diff --git a/template-inferno-js/jsconfig.json b/template-inferno-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-inferno-js/jsconfig.json +++ b/template-inferno-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-inferno-js/package.json b/template-inferno-js/package.json index 04d7782..139fe68 100644 --- a/template-inferno-js/package.json +++ b/template-inferno-js/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@babel/core": "7.x", "@babel/parser": "7.x", - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "vite": "^2.9.13", "vite-plugin-inferno": "0.0.0" } diff --git a/template-inferno-ts/package.json b/template-inferno-ts/package.json index f9a7404..ff19aa6 100644 --- a/template-inferno-ts/package.json +++ b/template-inferno-ts/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@babel/core": "7.x", "@babel/parser": "7.x", - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "typescript": "^4.6.4", "vite": "^2.9.13", diff --git a/template-lit-js/jsconfig.json b/template-lit-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-lit-js/jsconfig.json +++ b/template-lit-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-lit-js/package.json b/template-lit-js/package.json index df13e4d..140addd 100644 --- a/template-lit-js/package.json +++ b/template-lit-js/package.json @@ -24,7 +24,7 @@ "lit": "^2.2.6" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "prettier": "^2.7.1", "vite": "^2.9.13" } diff --git a/template-lit-ts/package.json b/template-lit-ts/package.json index fc31b9e..a0eb063 100644 --- a/template-lit-ts/package.json +++ b/template-lit-ts/package.json @@ -24,7 +24,7 @@ "lit": "^2.2.6" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "path": "^0.12.7", "prettier": "^2.7.1", diff --git a/template-preact-js/jsconfig.json b/template-preact-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-preact-js/jsconfig.json +++ b/template-preact-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-preact-js/package.json b/template-preact-js/package.json index cfac05f..4a0428b 100644 --- a/template-preact-js/package.json +++ b/template-preact-js/package.json @@ -24,7 +24,7 @@ "preact": "^10.8.2" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@preact/preset-vite": "^2.3.0", "prettier": "^2.7.1", "vite": "^2.9.13" diff --git a/template-preact-ts/package.json b/template-preact-ts/package.json index feabc7a..49e69da 100644 --- a/template-preact-ts/package.json +++ b/template-preact-ts/package.json @@ -24,7 +24,7 @@ "preact": "^10.8.2" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@preact/preset-vite": "^2.3.0", "@types/chrome": "^0.0.236", "prettier": "^2.7.1", diff --git a/template-preact-ts/vite.config.ts b/template-preact-ts/vite.config.ts index 063f229..7a3a0da 100644 --- a/template-preact-ts/vite.config.ts +++ b/template-preact-ts/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import preact from '@preact/preset-vite' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' // https://vitejs.dev/config/ @@ -17,11 +17,17 @@ export default defineConfig(({ mode }) => { }, }, - plugins: [crx({ manifest }), preact(),zipPack({ + plugins: [ + crx({ manifest }), + preact(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-react-js/jsconfig.json b/template-react-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-react-js/jsconfig.json +++ b/template-react-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-react-js/package.json b/template-react-js/package.json index 9644271..8c1b013 100644 --- a/template-react-js/package.json +++ b/template-react-js/package.json @@ -26,7 +26,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/react": "^18.0.14", "@types/react-dom": "^18.0.5", "@vitejs/plugin-react": "^1.3.2", diff --git a/template-react-js/pages/page.html b/template-react-js/pages/page.html index 2e18a5a..12fa100 100644 --- a/template-react-js/pages/page.html +++ b/template-react-js/pages/page.html @@ -1,12 +1,12 @@ - - - - + + + + Document - - + + page - - \ No newline at end of file + + diff --git a/template-react-js/sidepanel.html b/template-react-js/sidepanel.html new file mode 100644 index 0000000..0d72dae --- /dev/null +++ b/template-react-js/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + React + JS + Vite App - SidePanel + + +
+ + + diff --git a/template-react-js/src/manifest.js b/template-react-js/src/manifest.js index d6a5376..a7fc7f4 100644 --- a/template-react-js/src/manifest.js +++ b/template-react-js/src/manifest.js @@ -1,5 +1,5 @@ import { defineManifest } from '@crxjs/vite-plugin' -import packageData from '../package.json' assert { type: "json" };; +import packageData from '../package.json' assert { type: 'json' } export default defineManifest({ name: packageData.displayName, @@ -27,11 +27,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-react-js/src/read_pages_folder.js b/template-react-js/src/read_pages_folder.js index d6220c5..fb7ad78 100644 --- a/template-react-js/src/read_pages_folder.js +++ b/template-react-js/src/read_pages_folder.js @@ -1,7 +1,10 @@ -import glob from 'glob'; +import glob from 'glob' const pages = glob.sync('pages/*.html') -const arrayKeyValuePairs = pages.map(file => [file.split('\\').slice(-1).toString().split('.html').join(''), file]) +const arrayKeyValuePairs = pages.map((file) => [ + file.split('\\').slice(-1).toString().split('.html').join(''), + file, +]) export const config = Object.fromEntries(arrayKeyValuePairs) diff --git a/template-react-js/src/sidepanel/SidePanel.css b/template-react-js/src/sidepanel/SidePanel.css new file mode 100644 index 0000000..7a8898d --- /dev/null +++ b/template-react-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: #61dafb; + 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-react-js/src/sidepanel/SidePanel.jsx b/template-react-js/src/sidepanel/SidePanel.jsx new file mode 100644 index 0000000..553e255 --- /dev/null +++ b/template-react-js/src/sidepanel/SidePanel.jsx @@ -0,0 +1,20 @@ +import { useState } from 'react' +import './SidePanel.css' + +function App() { + const [crx, setCrx] = useState('create-chrome-ext') + + return ( +
+

Sidepanel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default App diff --git a/template-react-js/src/sidepanel/index.css b/template-react-js/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-react-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-react-js/src/sidepanel/index.jsx b/template-react-js/src/sidepanel/index.jsx new file mode 100644 index 0000000..a92777f --- /dev/null +++ b/template-react-js/src/sidepanel/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './SidePanel' +import './index.css' + +ReactDOM.createRoot(document.getElementById('app')).render( + + + , +) diff --git a/template-react-js/vite.config.js b/template-react-js/vite.config.js index 54ed156..8092804 100644 --- a/template-react-js/vite.config.js +++ b/template-react-js/vite.config.js @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import react from '@vitejs/plugin-react' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest.js' import { config } from './src/read_pages_folder.js' @@ -19,11 +19,17 @@ export default defineConfig(({ mode }) => { }, }, - plugins: [crx({ manifest }), react(),zipPack({ + plugins: [ + crx({ manifest }), + react(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-react-ts/package.json b/template-react-ts/package.json index 8034fe9..d740bca 100644 --- a/template-react-ts/package.json +++ b/template-react-ts/package.json @@ -26,7 +26,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "@types/react": "^18.0.14", "@types/react-dom": "^18.0.5", diff --git a/template-react-ts/pages/page.html b/template-react-ts/pages/page.html index 1c9ef65..d80e4f3 100644 --- a/template-react-ts/pages/page.html +++ b/template-react-ts/pages/page.html @@ -1,16 +1,14 @@ - - - - + + + + Document - - + +
-

- Page works -

- +

Page works

+ diff --git a/template-react-ts/sidepanel.html b/template-react-ts/sidepanel.html new file mode 100644 index 0000000..f97ba30 --- /dev/null +++ b/template-react-ts/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + React + TS + Vite App - SidePanel + + +
+ + + diff --git a/template-react-ts/src/manifest.ts b/template-react-ts/src/manifest.ts index 2afbc6b..53ef1ed 100644 --- a/template-react-ts/src/manifest.ts +++ b/template-react-ts/src/manifest.ts @@ -1,5 +1,5 @@ import { defineManifest } from '@crxjs/vite-plugin' -import packageData from '../package.json'; +import packageData from '../package.json' export default defineManifest({ name: packageData.displayName, @@ -27,11 +27,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-react-ts/src/read_pages_folder.ts b/template-react-ts/src/read_pages_folder.ts index bca7a22..09681c5 100644 --- a/template-react-ts/src/read_pages_folder.ts +++ b/template-react-ts/src/read_pages_folder.ts @@ -1,7 +1,10 @@ -import globSync from 'glob'; +import globSync from 'glob' const pages = await globSync('pages/*.html') -const arrayKeyValuePairs = pages.map(file => [file.split('\\').slice(-1).toString().split('.html').join(''), file]) +const arrayKeyValuePairs = pages.map((file) => [ + file.split('\\').slice(-1).toString().split('.html').join(''), + file, +]) export const config = Object.fromEntries(arrayKeyValuePairs) diff --git a/template-react-ts/src/sidepanel/SidePanel.css b/template-react-ts/src/sidepanel/SidePanel.css new file mode 100644 index 0000000..7a8898d --- /dev/null +++ b/template-react-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: #61dafb; + 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-react-ts/src/sidepanel/SidePanel.tsx b/template-react-ts/src/sidepanel/SidePanel.tsx new file mode 100644 index 0000000..553e255 --- /dev/null +++ b/template-react-ts/src/sidepanel/SidePanel.tsx @@ -0,0 +1,20 @@ +import { useState } from 'react' +import './SidePanel.css' + +function App() { + const [crx, setCrx] = useState('create-chrome-ext') + + return ( +
+

Sidepanel Page!

+ +
v 0.0.0
+ + + Power by {crx} + +
+ ) +} + +export default App diff --git a/template-react-ts/src/sidepanel/index.css b/template-react-ts/src/sidepanel/index.css new file mode 100644 index 0000000..8a3e44d --- /dev/null +++ b/template-react-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-react-ts/src/sidepanel/index.tsx b/template-react-ts/src/sidepanel/index.tsx new file mode 100644 index 0000000..0a903e5 --- /dev/null +++ b/template-react-ts/src/sidepanel/index.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './SidePanel' +import './index.css' + +ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( + + + , +) diff --git a/template-react-ts/vite.config.ts b/template-react-ts/vite.config.ts index 27ef899..e4a57e5 100644 --- a/template-react-ts/vite.config.ts +++ b/template-react-ts/vite.config.ts @@ -1,11 +1,11 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import react from '@vitejs/plugin-react' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' //@ts-ignore -import {config} from './src/read_pages_folder' +import { config } from './src/read_pages_folder' // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { @@ -21,11 +21,17 @@ export default defineConfig(({ mode }) => { }, }, - plugins: [crx({ manifest }), react(),zipPack({ + plugins: [ + crx({ manifest }), + react(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-solid-js/jsconfig.json b/template-solid-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-solid-js/jsconfig.json +++ b/template-solid-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-solid-js/package.json b/template-solid-js/package.json index 78f3581..08ff333 100644 --- a/template-solid-js/package.json +++ b/template-solid-js/package.json @@ -22,7 +22,7 @@ "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "prettier": "^2.7.1", "vite": "^2.9.13", "vite-plugin-zip-pack": "^1.0.5", diff --git a/template-solid-js/vite.config.js b/template-solid-js/vite.config.js index 11ce218..31482ee 100644 --- a/template-solid-js/vite.config.js +++ b/template-solid-js/vite.config.js @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import solidPlugin from 'vite-plugin-solid' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest.js' export default defineConfig(({ mode }) => { @@ -17,11 +17,17 @@ export default defineConfig(({ mode }) => { }, }, }, - plugins: [crx({ manifest }), solidPlugin(),zipPack({ + plugins: [ + crx({ manifest }), + solidPlugin(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json index a3e7fbb..27df54d 100644 --- a/template-solid-ts/package.json +++ b/template-solid-ts/package.json @@ -22,7 +22,7 @@ "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "prettier": "^2.7.1", "typescript": "^4.6.4", diff --git a/template-solid-ts/vite.config.ts b/template-solid-ts/vite.config.ts index af85e3c..22e9ed4 100644 --- a/template-solid-ts/vite.config.ts +++ b/template-solid-ts/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import solidPlugin from 'vite-plugin-solid' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest.jsx' export default defineConfig(({ mode }) => { @@ -17,11 +17,17 @@ export default defineConfig(({ mode }) => { }, }, }, - plugins: [crx({ manifest }), solidPlugin(),zipPack({ + plugins: [ + crx({ manifest }), + solidPlugin(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-stencil-js/jsconfig.json b/template-stencil-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-stencil-js/jsconfig.json +++ b/template-stencil-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-stencil-js/package.json b/template-stencil-js/package.json index f0773bb..6e6460b 100644 --- a/template-stencil-js/package.json +++ b/template-stencil-js/package.json @@ -27,7 +27,7 @@ "fmt": "prettier --write '**/*.{jsx,js,json,css,md}'" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@stencil/core": "2.13.0", "express": "4.17.2", "prettier": "^2.7.1", diff --git a/template-stencil-js/src/global/app.js b/template-stencil-js/src/global/app.js index 826167f..fc6fdb9 100644 --- a/template-stencil-js/src/global/app.js +++ b/template-stencil-js/src/global/app.js @@ -4,4 +4,4 @@ export default async () => { * exported by the global script. Ensure all of the code in the global script * is wrapped in the function() that is exported. */ -}; +} diff --git a/template-stencil-js/src/index.js b/template-stencil-js/src/index.js index 94d1ecc..309b513 100644 --- a/template-stencil-js/src/index.js +++ b/template-stencil-js/src/index.js @@ -1,2 +1,2 @@ -export { Components, JSX } from './components'; -import '@stencil-community/router'; +export { Components, JSX } from './components' +import '@stencil-community/router' diff --git a/template-stencil-js/vite.config.js b/template-stencil-js/vite.config.js index 9159be8..ef008cb 100644 --- a/template-stencil-js/vite.config.js +++ b/template-stencil-js/vite.config.js @@ -2,7 +2,7 @@ import { defineConfig } from 'vite' import { resolve } from 'path' import { crx } from '@crxjs/vite-plugin' import vitePluginStencil from 'vite-plugin-stencil' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' export default defineConfig(({ mode }) => { @@ -51,12 +51,14 @@ export default defineConfig(({ mode }) => { }, ], }, - }) - ,zipPack({ + }), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, }), ], } diff --git a/template-stencil-ts/package.json b/template-stencil-ts/package.json index 2e6475a..378e0fc 100644 --- a/template-stencil-ts/package.json +++ b/template-stencil-ts/package.json @@ -27,7 +27,7 @@ "fmt": "prettier --write '**/*.{tsx,ts,json,css,md}'" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@stencil/core": "2.13.0", "@types/chrome": "^0.0.236", "@types/node": "17.0.17", diff --git a/template-stencil-ts/src/global/app.ts b/template-stencil-ts/src/global/app.ts index 826167f..fc6fdb9 100644 --- a/template-stencil-ts/src/global/app.ts +++ b/template-stencil-ts/src/global/app.ts @@ -4,4 +4,4 @@ export default async () => { * exported by the global script. Ensure all of the code in the global script * is wrapped in the function() that is exported. */ -}; +} diff --git a/template-stencil-ts/src/index.ts b/template-stencil-ts/src/index.ts index 94d1ecc..309b513 100644 --- a/template-stencil-ts/src/index.ts +++ b/template-stencil-ts/src/index.ts @@ -1,2 +1,2 @@ -export { Components, JSX } from './components'; -import '@stencil-community/router'; +export { Components, JSX } from './components' +import '@stencil-community/router' diff --git a/template-stencil-ts/vite.config.ts b/template-stencil-ts/vite.config.ts index a912ecc..2fcf4ee 100644 --- a/template-stencil-ts/vite.config.ts +++ b/template-stencil-ts/vite.config.ts @@ -2,7 +2,7 @@ import { defineConfig } from 'vite' import { resolve } from 'path' import { crx } from '@crxjs/vite-plugin' import vitePluginStencil from 'vite-plugin-stencil' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' import type { Config } from '@stencil/core' @@ -53,11 +53,14 @@ export default defineConfig(({ mode }) => { }, ], }, - } as Config),zipPack({ + } as Config), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, }), ], } diff --git a/template-svelte-js/jsconfig.json b/template-svelte-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-svelte-js/jsconfig.json +++ b/template-svelte-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-svelte-js/package.json b/template-svelte-js/package.json index 9151b9a..eb348a6 100755 --- a/template-svelte-js/package.json +++ b/template-svelte-js/package.json @@ -22,7 +22,7 @@ }, "dependencies": {}, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@sveltejs/vite-plugin-svelte": "1.0.0-next.49", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", diff --git a/template-svelte-js/vite.config.js b/template-svelte-js/vite.config.js index 70c7614..0906453 100644 --- a/template-svelte-js/vite.config.js +++ b/template-svelte-js/vite.config.js @@ -2,7 +2,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import { svelte } from '@sveltejs/vite-plugin-svelte' import sveltePreprocess from 'svelte-preprocess' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest.js' export default defineConfig(({ mode }) => { @@ -26,11 +26,14 @@ export default defineConfig(({ mode }) => { }, preprocess: sveltePreprocess(), }), - ,zipPack({ + , + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, }), ], } diff --git a/template-svelte-ts/package.json b/template-svelte-ts/package.json index 95475bd..c31b161 100755 --- a/template-svelte-ts/package.json +++ b/template-svelte-ts/package.json @@ -22,7 +22,7 @@ }, "dependencies": {}, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "@sveltejs/vite-plugin-svelte": "1.0.0-next.49", "prettier": "^2.7.1", diff --git a/template-svelte-ts/vite.config.ts b/template-svelte-ts/vite.config.ts index 20bb3d6..ce6e80a 100644 --- a/template-svelte-ts/vite.config.ts +++ b/template-svelte-ts/vite.config.ts @@ -3,7 +3,7 @@ import { crx } from '@crxjs/vite-plugin' import { svelte } from '@sveltejs/vite-plugin-svelte' import path from 'path' import sveltePreprocess from 'svelte-preprocess' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' export default defineConfig(({ mode }) => { @@ -31,7 +31,9 @@ export default defineConfig(({ mode }) => { outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, }), ], resolve: { diff --git a/template-vanilla-js/jsconfig.json b/template-vanilla-js/jsconfig.json index 2a5a008..3f6d5bd 100644 --- a/template-vanilla-js/jsconfig.json +++ b/template-vanilla-js/jsconfig.json @@ -1 +1 @@ -{ "typeAcquisition": { "include": ["chrome"] } } \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-vanilla-js/package.json b/template-vanilla-js/package.json index 1769fde..8fb14a7 100644 --- a/template-vanilla-js/package.json +++ b/template-vanilla-js/package.json @@ -22,7 +22,7 @@ }, "dependencies": {}, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "prettier": "^2.7.1", "vite": "^2.9.13", "vite-plugin-zip-pack": "^1.0.5" diff --git a/template-vanilla-js/vite.config.js b/template-vanilla-js/vite.config.js index fe1a8f0..a115980 100644 --- a/template-vanilla-js/vite.config.js +++ b/template-vanilla-js/vite.config.js @@ -1,6 +1,6 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest.js' // https://vitejs.dev/config/ @@ -16,11 +16,16 @@ export default defineConfig(({ mode }) => { }, }, - plugins: [crx({ manifest }),zipPack({ + plugins: [ + crx({ manifest }), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json index ad49898..65d3ca9 100644 --- a/template-vanilla-ts/package.json +++ b/template-vanilla-ts/package.json @@ -22,7 +22,7 @@ }, "dependencies": {}, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "prettier": "^2.7.1", "typescript": "^4.7.4", diff --git a/template-vanilla-ts/vite.config.ts b/template-vanilla-ts/vite.config.ts index 1bdd05d..bdb64b5 100644 --- a/template-vanilla-ts/vite.config.ts +++ b/template-vanilla-ts/vite.config.ts @@ -1,6 +1,6 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' // https://vitejs.dev/config/ @@ -16,11 +16,16 @@ export default defineConfig(({ mode }) => { }, }, - plugins: [crx({ manifest }),zipPack({ + plugins: [ + crx({ manifest }), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-vue-js/jsconfig.json b/template-vue-js/jsconfig.json index 8ea258b..3f6d5bd 100644 --- a/template-vue-js/jsconfig.json +++ b/template-vue-js/jsconfig.json @@ -1 +1 @@ -{"typeAcquisition": {"include": ["chrome"]}} \ No newline at end of file +{ "typeAcquisition": { "include": ["chrome"] } } diff --git a/template-vue-js/package.json b/template-vue-js/package.json index 65f19e6..0ba6b92 100644 --- a/template-vue-js/package.json +++ b/template-vue-js/package.json @@ -24,7 +24,7 @@ "vue": "^3.2.37" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@vitejs/plugin-vue": "^2.3.3", "prettier": "^2.7.1", "vite": "^2.9.13", diff --git a/template-vue-js/sidepanel.html b/template-vue-js/sidepanel.html new file mode 100644 index 0000000..6bdb0a4 --- /dev/null +++ b/template-vue-js/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Vue + JS + Vite App - SidePanel + + +
+ + + diff --git a/template-vue-js/src/manifest.js b/template-vue-js/src/manifest.js index e41ff31..1c3ebcf 100644 --- a/template-vue-js/src/manifest.js +++ b/template-vue-js/src/manifest.js @@ -1,9 +1,10 @@ import { defineManifest } from '@crxjs/vite-plugin' +import packageData from '../package.json' assert { type: 'json' } export default defineManifest({ - name: 'create-chrome-ext', - description: '', - version: '0.0.0', + name: packageData.name, + description: packageData.description, + version: packageData.version, manifest_version: 3, icons: { 16: 'img/logo-16.png', @@ -26,11 +27,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-vue-js/src/sidepanel/Sidepanel.vue b/template-vue-js/src/sidepanel/Sidepanel.vue new file mode 100644 index 0000000..b9a5a73 --- /dev/null +++ b/template-vue-js/src/sidepanel/Sidepanel.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/template-vue-js/src/sidepanel/index.js b/template-vue-js/src/sidepanel/index.js new file mode 100644 index 0000000..2f0e2c1 --- /dev/null +++ b/template-vue-js/src/sidepanel/index.js @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import './style.css' +import App from './Sidepanel.vue' + +createApp(App).mount('#app') diff --git a/template-vue-js/src/sidepanel/style.css b/template-vue-js/src/sidepanel/style.css new file mode 100644 index 0000000..661fbcd --- /dev/null +++ b/template-vue-js/src/sidepanel/style.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%; +} + +body { + min-width: 20rem; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} diff --git a/template-vue-js/vite.config.js b/template-vue-js/vite.config.js index 9824957..b15ca78 100644 --- a/template-vue-js/vite.config.js +++ b/template-vue-js/vite.config.js @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import vue from '@vitejs/plugin-vue' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest.js' // https://vitejs.dev/config/ @@ -18,11 +18,17 @@ export default defineConfig(({ mode }) => { }, }, }, - plugins: [crx({ manifest }), vue(),zipPack({ + plugins: [ + crx({ manifest }), + vue(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } }) diff --git a/template-vue-ts/devtools.html b/template-vue-ts/devtools.html index 46c1fa6..a3db0b2 100644 --- a/template-vue-ts/devtools.html +++ b/template-vue-ts/devtools.html @@ -1,16 +1,14 @@ + + + + + Chrome Extensioin + Vue + TS + Vite App - DevTools + - - - - - Chrome Extensioin + Vue + TS + Vite App - Options - - - -
- - - + +
+ + diff --git a/template-vue-ts/package.json b/template-vue-ts/package.json index f658d18..48742b6 100644 --- a/template-vue-ts/package.json +++ b/template-vue-ts/package.json @@ -24,7 +24,7 @@ "vue": "^3.2.37" }, "devDependencies": { - "@crxjs/vite-plugin": "^1.0.12", + "@crxjs/vite-plugin": "^2.0.0-beta.19", "@types/chrome": "^0.0.236", "@vitejs/plugin-vue": "^2.3.3", "prettier": "^2.7.1", diff --git a/template-vue-ts/sidepanel.html b/template-vue-ts/sidepanel.html new file mode 100644 index 0000000..020bd5f --- /dev/null +++ b/template-vue-ts/sidepanel.html @@ -0,0 +1,13 @@ + + + + + + + Chrome Extension + Vue + TS + Vite App - SidePanel + + +
+ + + diff --git a/template-vue-ts/src/manifest.ts b/template-vue-ts/src/manifest.ts index 225c817..b27eced 100644 --- a/template-vue-ts/src/manifest.ts +++ b/template-vue-ts/src/manifest.ts @@ -1,9 +1,10 @@ import { defineManifest } from '@crxjs/vite-plugin' +import packageData from '../package.json' export default defineManifest({ - name: 'create-chrome-ext', - description: '', - version: '0.0.0', + name: packageData.name, + description: packageData.description, + version: packageData.version, manifest_version: 3, icons: { 16: 'img/logo-16.png', @@ -27,11 +28,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-vue-ts/src/newtab/index.ts b/template-vue-ts/src/newtab/index.ts index 8ffd37c..25186a7 100644 --- a/template-vue-ts/src/newtab/index.ts +++ b/template-vue-ts/src/newtab/index.ts @@ -1,13 +1,8 @@ import { createApp } from 'vue' import App from './NewTab.vue' -chrome.devtools.panels.create( - "Devtools Panel", - "", - "../../devtools.html", - function () { - console.log("devtools panel create"); - } -); +chrome.devtools.panels.create('Devtools Panel', '', '../../devtools.html', function () { + console.log('devtools panel create') +}) createApp(App).mount('#app') diff --git a/template-vue-ts/src/sidepanel/SidePanel.vue b/template-vue-ts/src/sidepanel/SidePanel.vue new file mode 100644 index 0000000..cf1b67c --- /dev/null +++ b/template-vue-ts/src/sidepanel/SidePanel.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/template-vue-ts/src/sidepanel/index.ts b/template-vue-ts/src/sidepanel/index.ts new file mode 100644 index 0000000..4578a8b --- /dev/null +++ b/template-vue-ts/src/sidepanel/index.ts @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import './style.css' +import App from './SidePanel.vue' + +createApp(App).mount('#app') diff --git a/template-vue-ts/src/sidepanel/style.css b/template-vue-ts/src/sidepanel/style.css new file mode 100644 index 0000000..661fbcd --- /dev/null +++ b/template-vue-ts/src/sidepanel/style.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%; +} + +body { + min-width: 20rem; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} diff --git a/template-vue-ts/vite.config.ts b/template-vue-ts/vite.config.ts index ceda51e..bc7e417 100644 --- a/template-vue-ts/vite.config.ts +++ b/template-vue-ts/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import { crx } from '@crxjs/vite-plugin' import vue from '@vitejs/plugin-vue' -import zipPack from 'vite-plugin-zip-pack'; +import zipPack from 'vite-plugin-zip-pack' import manifest from './src/manifest' // https://vitejs.dev/config/ @@ -18,11 +18,17 @@ export default defineConfig(({ mode }) => { }, }, }, - plugins: [crx({ manifest }), vue(),zipPack({ + plugins: [ + crx({ manifest }), + vue(), + zipPack({ outDir: `package`, inDir: 'build', // @ts-ignore - outFileName: `${manifest.short_name ?? manifest.name.replaceAll(" ", "-")}-extension-v${manifest.version}.zip`, - }),], + outFileName: `${manifest.short_name ?? manifest.name.replaceAll(' ', '-')}-extension-v${ + manifest.version + }.zip`, + }), + ], } })