├── .github └── workflows │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bin.ts ├── docs ├── README.de-DE.md ├── README.fr-FR.md ├── README.id-ID.md ├── README.ja-JP.md ├── README.ko-KR.md ├── README.ru-RU.md ├── README.zh-CN.md └── img │ ├── crx-build.png │ ├── crx-install.png │ ├── crx-preview.png │ └── crx-run.png ├── index.spec.ts ├── index.ts ├── mustache ├── .editorconfig.mustache ├── .gitignore.mustache ├── .npmignore.mustache ├── .prettierignore.mustache ├── .prettierrc.mustache ├── CHANGELOG.md.mustache ├── LICENSE.mustache └── README.md.mustache ├── package.json ├── template-alpine-js ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ └── index.js │ ├── manifest.js │ ├── newtab │ │ └── index.js │ ├── options │ │ └── index.js │ ├── popup │ │ └── index.js │ ├── sidepanel │ │ └── index.js │ └── zip.js └── vite.config.js ├── template-alpine-ts ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ └── index.ts │ ├── manifest.ts │ ├── newtab │ │ └── index.ts │ ├── options │ │ └── index.ts │ ├── popup │ │ └── index.ts │ ├── sidepanel │ │ └── index.ts │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-inferno-js ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── index.css │ │ └── index.jsx │ ├── manifest.js │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── options │ │ ├── Options.css │ │ ├── Options.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── sidepanel │ │ ├── Sidepanel.css │ │ ├── Sidepanel.jsx │ │ ├── index.css │ │ └── index.jsx │ └── zip.js └── vite.config.js ├── template-inferno-ts ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── index.css │ │ └── index.tsx │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── options │ │ ├── Options.css │ │ ├── Options.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── sidepanel │ │ ├── Sidepanel.css │ │ ├── Sidepanel.tsx │ │ ├── index.css │ │ └── index.tsx │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-lit-js ├── .vscode │ └── extensions.json ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ └── index.js │ ├── index.css │ ├── manifest.js │ ├── newtab │ │ └── index.js │ ├── options │ │ └── index.js │ ├── popup │ │ └── index.js │ ├── sidepanel │ │ └── index.js │ └── zip.js └── vite.config.js ├── template-lit-ts ├── .vscode │ └── extensions.json ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ └── index.ts │ ├── global.d.ts │ ├── index.css │ ├── manifest.ts │ ├── newtab │ │ └── index.ts │ ├── options │ │ └── index.ts │ ├── popup │ │ └── index.ts │ ├── sidepanel │ │ └── index.ts │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-preact-js ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── DevTools.css │ │ ├── DevTools.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── manifest.js │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── options │ │ ├── Options.css │ │ ├── Options.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── sidepanel │ │ ├── Sidepanel.css │ │ ├── Sidepanel.jsx │ │ ├── index.css │ │ └── index.jsx │ └── zip.js └── vite.config.js ├── template-preact-ts ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── DevTools.css │ │ ├── DevTools.tsx │ │ ├── index.css │ │ └── index.ts │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.tsx │ │ ├── index.css │ │ └── index.ts │ ├── options │ │ ├── Options.css │ │ ├── Options.tsx │ │ ├── index.css │ │ └── index.ts │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.tsx │ │ ├── index.css │ │ └── index.ts │ ├── sidepanel │ │ ├── Sidepanel.css │ │ ├── Sidepanel.tsx │ │ ├── index.css │ │ └── index.ts │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-react-js ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── DevTools.css │ │ ├── DevTools.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── manifest.js │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── options │ │ ├── Options.css │ │ ├── Options.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── sidepanel │ │ ├── SidePanel.css │ │ ├── SidePanel.jsx │ │ ├── index.css │ │ └── index.jsx │ └── zip.js └── vite.config.js ├── template-react-ts ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── DevTools.css │ │ ├── DevTools.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── options │ │ ├── Options.css │ │ ├── Options.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── sidepanel │ │ ├── SidePanel.css │ │ ├── SidePanel.tsx │ │ ├── index.css │ │ └── index.tsx │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-solid-js ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── DevTools.css │ │ ├── DevTools.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── manifest.js │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── options │ │ ├── Options.css │ │ ├── Options.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.jsx │ │ ├── index.css │ │ └── index.jsx │ ├── sidepanel │ │ ├── Sidepanel.css │ │ ├── Sidepanel.jsx │ │ ├── index.css │ │ └── index.jsx │ └── zip.js └── vite.config.js ├── template-solid-ts ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── DevTools.css │ │ ├── DevTools.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── NewTab.css │ │ ├── NewTab.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── options │ │ ├── Options.css │ │ ├── Options.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── popup │ │ ├── Popup.css │ │ ├── Popup.tsx │ │ ├── index.css │ │ └── index.tsx │ ├── sidepanel │ │ ├── Sidepanel.css │ │ ├── Sidepanel.tsx │ │ ├── index.css │ │ └── index.tsx │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-stencil-ts ├── package.json ├── src │ ├── assets │ │ ├── icons │ │ │ ├── logo.ico │ │ │ └── logo.svg │ │ └── img │ │ │ ├── logo-128.png │ │ │ ├── logo-16.png │ │ │ ├── logo-32.png │ │ │ └── logo-48.png │ ├── background │ │ └── index.js │ ├── components.d.ts │ ├── components │ │ ├── devtools-root │ │ │ ├── devtools-root.css │ │ │ └── devtools-root.tsx │ │ ├── newtab-root │ │ │ ├── newtab-root.css │ │ │ └── newtab-root.tsx │ │ ├── options-root │ │ │ ├── options-root.css │ │ │ └── options-root.tsx │ │ ├── popup-root │ │ │ ├── popup-root.css │ │ │ └── popup-root.tsx │ │ └── side-root │ │ │ ├── side-root.css │ │ │ └── side-root.tsx │ ├── contentScript │ │ └── index.js │ ├── devtools.html │ ├── manifest.json │ ├── newtab.html │ ├── options.html │ ├── popup.html │ ├── sidepanel.html │ └── zip.js ├── stencil.config.ts └── tsconfig.json ├── template-svelte-js ├── .vscode │ └── extensions.json ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── DevTools.svelte │ │ └── index.js │ ├── manifest.js │ ├── newtab │ │ ├── NewTab.svelte │ │ └── index.js │ ├── options │ │ ├── Options.svelte │ │ └── index.js │ ├── popup │ │ ├── Popup.svelte │ │ └── index.js │ ├── sidepanel │ │ ├── Sidepanel.svelte │ │ └── index.js │ └── zip.js └── vite.config.js ├── template-svelte-ts ├── .vscode │ └── extensions.json ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── DevTools.svelte │ │ └── index.ts │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── NewTab.svelte │ │ └── index.ts │ ├── options │ │ ├── Options.svelte │ │ └── index.ts │ ├── popup │ │ ├── Popup.svelte │ │ └── index.ts │ ├── sidepanel │ │ ├── Sidepanel.svelte │ │ └── index.ts │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-vanilla-js ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── index.css │ │ └── index.js │ ├── manifest.js │ ├── newtab │ │ ├── index.css │ │ └── index.js │ ├── options │ │ ├── index.css │ │ └── index.js │ ├── popup │ │ ├── index.css │ │ └── index.js │ ├── sidepanel │ │ ├── index.css │ │ └── index.js │ └── zip.js └── vite.config.js ├── template-vanilla-ts ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── index.css │ │ └── index.ts │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── index.css │ │ └── index.ts │ ├── options │ │ ├── index.css │ │ └── index.ts │ ├── popup │ │ ├── index.css │ │ └── index.ts │ ├── sidepanel │ │ ├── index.css │ │ └── index.ts │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── template-vue-js ├── .vscode │ └── extensions.json ├── devtools.html ├── jsconfig.json ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.js │ ├── contentScript │ │ └── index.js │ ├── devtools │ │ ├── DevTools.vue │ │ └── index.js │ ├── manifest.js │ ├── newtab │ │ ├── NewTab.vue │ │ └── index.js │ ├── options │ │ ├── Options.vue │ │ └── index.js │ ├── popup │ │ ├── Popup.vue │ │ └── index.js │ ├── sidepanel │ │ ├── SidePanel.vue │ │ └── index.js │ └── zip.js └── vite.config.js ├── template-vue-ts ├── .vscode │ └── extensions.json ├── devtools.html ├── newtab.html ├── options.html ├── package.json ├── popup.html ├── public │ ├── icons │ │ ├── logo.ico │ │ └── logo.svg │ └── img │ │ ├── logo-128.png │ │ ├── logo-16.png │ │ ├── logo-32.png │ │ └── logo-48.png ├── sidepanel.html ├── src │ ├── assets │ │ └── logo.png │ ├── background │ │ └── index.ts │ ├── contentScript │ │ └── index.ts │ ├── devtools │ │ ├── DevTools.vue │ │ └── index.ts │ ├── global.d.ts │ ├── manifest.ts │ ├── newtab │ │ ├── NewTab.vue │ │ └── index.ts │ ├── options │ │ ├── Options.vue │ │ └── index.ts │ ├── popup │ │ ├── Popup.vue │ │ └── index.ts │ ├── sidepanel │ │ ├── SidePanel.vue │ │ └── index.ts │ └── zip.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # OS 2 | .DS_Store 3 | 4 | # ignore node dependency directories & lock 5 | node_modules 6 | yarn.lock 7 | package-lock.json 8 | pnpm-lock.yaml 9 | 10 | # ignore log files and local 11 | *.log 12 | *.local 13 | 14 | # ignore compiled files 15 | build 16 | types 17 | *.js 18 | !template-*/*.js 19 | !template-*/**/*.js 20 | 21 | # ignore ide settings 22 | .idea 23 | 24 | # track these files, if they exist 25 | !.gitignore 26 | !.editorconfig 27 | !.vscode 28 | !template-*/src/*.js 29 | 30 | # build 31 | template-*/package -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OS 2 | .DS_Store 3 | 4 | # debug & development 5 | __tests__ 6 | *.spec.ts 7 | *.test.ts 8 | 9 | # npm 10 | node_modules 11 | yarn.lock 12 | package-lock.json 13 | pnpm-lock.yaml 14 | *.log 15 | 16 | # others 17 | .gitignore 18 | .gitattributes -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | node_modules 5 | pnpm-lock.yaml 6 | pnpm-workspace.yaml 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsxSingleQuote": false, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "endOfLine": "lf", 6 | "printWidth": 100, 7 | "semi": false, 8 | "tabWidth": 2, 9 | "useTabs": false, 10 | "plugins": ["prettier-plugin-svelte"] 11 | } 12 | -------------------------------------------------------------------------------- /bin.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import './index.js' 4 | -------------------------------------------------------------------------------- /docs/img/crx-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/docs/img/crx-build.png -------------------------------------------------------------------------------- /docs/img/crx-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/docs/img/crx-install.png -------------------------------------------------------------------------------- /docs/img/crx-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/docs/img/crx-preview.png -------------------------------------------------------------------------------- /docs/img/crx-run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/docs/img/crx-run.png -------------------------------------------------------------------------------- /mustache/.editorconfig.mustache: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,jsx,ts,tsx,md}] 14 | charset = utf-8 15 | indent_style = space 16 | indent_size = 2 17 | tab_width = 2 18 | end_of_line = lf 19 | insert_final_newline = true 20 | trim_trailing_whitespace = true 21 | 22 | 23 | # Matches the exact files either package.json or .travis.yml 24 | [{package.json,.travis.yml}] 25 | indent_style = space 26 | indent_size = 2 27 | -------------------------------------------------------------------------------- /mustache/.gitignore.mustache: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | /package 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | .history 20 | *.log 21 | 22 | # secrets 23 | secrets.*.js -------------------------------------------------------------------------------- /mustache/.npmignore.mustache: -------------------------------------------------------------------------------- 1 | # OS 2 | .DS_Store 3 | 4 | # ignore node dependency directories & lock 5 | node_modules 6 | yarn.lock 7 | pnpm-lock.yaml 8 | package-lock.json 9 | 10 | # ignore log files and local 11 | *.log 12 | *.local 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | .history 18 | 19 | # ignore compiled files 20 | build 21 | types 22 | coverage 23 | 24 | # ignore ide settings 25 | .idea 26 | .vscode 27 | -------------------------------------------------------------------------------- /mustache/.prettierignore.mustache: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | node_modules 5 | pnpm-lock.yaml 6 | pnpm-workspace.yaml 7 | -------------------------------------------------------------------------------- /mustache/.prettierrc.mustache: -------------------------------------------------------------------------------- 1 | { 2 | "jsxSingleQuote": false, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "endOfLine": "lf", 6 | "printWidth": 100, 7 | "semi": false, 8 | "tabWidth": 2, 9 | "useTabs": false 10 | } 11 | -------------------------------------------------------------------------------- /mustache/CHANGELOG.md.mustache: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | ```txt 4 | Summary 5 | 1. document grouping follow 'SemVer2.0' protocol 6 | 2. use 'PATCH' as a minimum granularity 7 | 3. use concise descriptions 8 | 4. type: feat \ fix \ update \ perf \ remove \ docs \ chore 9 | 5. version timestamp follow the yyyy.MM.dd format 10 | ``` 11 | 12 | ## 0.0.0 [{{ now }}] 13 | 14 | - feat: initial 15 | - feat: generator by ![create-chrome-ext](https://github.com/guocaoyi/create-chrome-ext) 16 | -------------------------------------------------------------------------------- /template-alpine-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-alpine-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-alpine-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-alpine-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-alpine-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-alpine-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-alpine-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-alpine-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-alpine-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-alpine-js/src/devtools/index.js: -------------------------------------------------------------------------------- 1 | chrome.devtools.panels.create('AlpineCrx', '', '../../devtools.html', function () { 2 | console.log('devtools panel create') 3 | }) 4 | -------------------------------------------------------------------------------- /template-alpine-js/src/newtab/index.js: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | 3 | window.Alpine = Alpine 4 | 5 | const getTime = () => { 6 | const date = new Date() 7 | const hour = String(date.getHours()).padStart(2, '0') 8 | const minute = String(date.getMinutes()).padStart(2, '0') 9 | return `${hour}:${minute}` 10 | } 11 | 12 | queueMicrotask(() => { 13 | Alpine?.data?.('newtab', () => ({ 14 | time: getTime(), 15 | interval: null, 16 | 17 | init() { 18 | this.interval = setInterval(() => { 19 | this.time = getTime() 20 | }, 1000) 21 | }, 22 | destroy() { 23 | clearInterval(this.interval) 24 | }, 25 | })) 26 | 27 | Alpine.start() 28 | }) 29 | -------------------------------------------------------------------------------- /template-alpine-js/src/options/index.js: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | 3 | window.Alpine = Alpine 4 | 5 | queueMicrotask(() => { 6 | Alpine?.data?.('options', () => ({ 7 | countSync: 0, 8 | 9 | init() { 10 | chrome.storage.sync.get(['count'], (result) => { 11 | this.countSync = result.count || 0 12 | }) 13 | 14 | chrome.runtime.onMessage.addListener((request) => { 15 | if (request.type === 'COUNT') { 16 | this.countSync = request.count || 0 17 | } 18 | }) 19 | }, 20 | })) 21 | 22 | Alpine.start() 23 | }) 24 | -------------------------------------------------------------------------------- /template-alpine-js/src/popup/index.js: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | 3 | window.Alpine = Alpine 4 | 5 | queueMicrotask(() => { 6 | Alpine?.data?.('popup', () => ({ 7 | count: 0, 8 | 9 | triggerSync(count) { 10 | chrome?.storage?.sync?.set?.({ count }) 11 | chrome?.runtime?.sendMessage?.({ type: 'COUNT', count }) 12 | }, 13 | 14 | toggleMinus() { 15 | this.triggerSync(--this.count) 16 | }, 17 | 18 | toggleAdd() { 19 | this.triggerSync(++this.count) 20 | }, 21 | 22 | init() { 23 | chrome?.storage?.sync?.get?.(['count'], (result) => { 24 | this.count = result.count || 0 25 | }) 26 | }, 27 | })) 28 | 29 | Alpine.start() 30 | }) 31 | -------------------------------------------------------------------------------- /template-alpine-js/src/sidepanel/index.js: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | 3 | window.Alpine = Alpine 4 | 5 | queueMicrotask(() => { 6 | Alpine?.data?.('sidepanel', () => ({ 7 | countSync: 0, 8 | 9 | init() { 10 | chrome.storage.sync.get(['count'], (result) => { 11 | this.countSync = result.count || 0 12 | }) 13 | 14 | chrome.runtime.onMessage.addListener((request) => { 15 | if (request.type === 'COUNT') { 16 | this.countSync = request.count || 0 17 | } 18 | }) 19 | }, 20 | })) 21 | 22 | Alpine.start() 23 | }) 24 | -------------------------------------------------------------------------------- /template-alpine-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-alpine-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | 4 | import manifest from './src/manifest.js' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | return { 9 | build: { 10 | emptyOutDir: true, 11 | outDir: 'build', 12 | rollupOptions: { 13 | output: { 14 | chunkFileNames: 'assets/chunk-[hash].js', 15 | }, 16 | }, 17 | }, 18 | 19 | plugins: [crx({ manifest })], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-alpine-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-alpine-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-alpine-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-alpine-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-alpine-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-alpine-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-alpine-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-alpine-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-alpine-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-alpine-ts/src/devtools/index.ts: -------------------------------------------------------------------------------- 1 | chrome.devtools.panels.create('AlpineCrx', '', '../../devtools.html', function () { 2 | console.log('devtools panel create') 3 | }) 4 | -------------------------------------------------------------------------------- /template-alpine-ts/src/options/index.ts: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | 3 | import type { Alpine as AlpineType } from 'alpinejs' 4 | 5 | declare global { 6 | interface Window { 7 | Alpine: AlpineType 8 | } 9 | } 10 | 11 | window.Alpine = Alpine 12 | 13 | queueMicrotask(() => { 14 | Alpine?.data?.('options', () => ({ 15 | countSync: 0, 16 | 17 | init() { 18 | chrome.storage.sync.get(['count'], (result) => { 19 | this.countSync = result.count || 0 20 | }) 21 | 22 | chrome.runtime.onMessage.addListener((request) => { 23 | if (request.type === 'COUNT') { 24 | this.countSync = request.count || 0 25 | } 26 | }) 27 | }, 28 | })) 29 | 30 | Alpine.start() 31 | }) 32 | -------------------------------------------------------------------------------- /template-alpine-ts/src/sidepanel/index.ts: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | 3 | import type { Alpine as AlpineType } from 'alpinejs' 4 | 5 | declare global { 6 | interface Window { 7 | Alpine: AlpineType 8 | } 9 | } 10 | 11 | window.Alpine = Alpine 12 | 13 | queueMicrotask(() => { 14 | Alpine?.data?.('sidepanel', () => ({ 15 | countSync: 0, 16 | 17 | init() { 18 | chrome.storage.sync.get(['count'], (result) => { 19 | this.countSync = result.count || 0 20 | }) 21 | 22 | chrome.runtime.onMessage.addListener((request) => { 23 | if (request.type === 'COUNT') { 24 | this.countSync = request.count || 0 25 | } 26 | }) 27 | }, 28 | })) 29 | 30 | Alpine.start() 31 | }) 32 | -------------------------------------------------------------------------------- /template-alpine-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-alpine-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true 17 | }, 18 | "include": ["src"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /template-alpine-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-alpine-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import manifest from './src/manifest' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig(() => { 7 | return { 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | rollupOptions: { 12 | output: { 13 | chunkFileNames: 'assets/chunk-[hash].js', 14 | }, 15 | }, 16 | }, 17 | 18 | plugins: [crx({ manifest })], 19 | legacy: { 20 | skipWebSocketTokenCheck: true, 21 | }, 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /template-inferno-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-inferno-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-inferno-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-inferno-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-inferno-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-inferno-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-inferno-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-inferno-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-inferno-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-inferno-js/src/devtools/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | render( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
, 13 | document.getElementById('app'), 14 | ) 15 | 16 | chrome.devtools.panels.create('InfernoCrx', '', '../../devtools.html', function () { 17 | console.log('devtools panel create') 18 | }) 19 | -------------------------------------------------------------------------------- /template-inferno-js/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #dc0030; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-inferno-js/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-js/src/newtab/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { NewTab } from './NewTab' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-inferno-js/src/options/Options.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #dc0030; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #dc0030; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-inferno-js/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-js/src/options/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { Options } from './Options' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-inferno-js/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-js/src/popup/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { Popup } from './Popup' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-inferno-js/src/sidepanel/Sidepanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #dc0030; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #dc0030; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-inferno-js/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-js/src/sidepanel/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { Sidepanel } from './Sidepanel' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-inferno-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-inferno-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import inferno from 'vite-plugin-inferno' 4 | import manifest from './src/manifest.js' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | return { 9 | build: { 10 | emptyOutDir: true, 11 | outDir: 'build', 12 | rollupOptions: { 13 | output: { 14 | chunkFileNames: 'assets/chunk-[hash].js', 15 | }, 16 | }, 17 | }, 18 | 19 | plugins: [crx({ manifest }), inferno()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-inferno-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-inferno-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-inferno-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-inferno-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-inferno-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-inferno-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Inferno + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-inferno-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-inferno-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-inferno-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-inferno-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-inferno-ts/src/devtools/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | render( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
, 13 | document.getElementById('app')!, 14 | ) 15 | 16 | chrome.devtools.panels.create('InfernoCrx', '', '../../devtools.html', function () { 17 | console.log('devtools panel create') 18 | }) 19 | -------------------------------------------------------------------------------- /template-inferno-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /template-inferno-ts/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #dc0030; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-inferno-ts/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-ts/src/newtab/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { NewTab } from './NewTab' 4 | 5 | render(, document.getElementById('app')!) 6 | -------------------------------------------------------------------------------- /template-inferno-ts/src/options/Options.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #dc0030; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #dc0030; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-inferno-ts/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-ts/src/options/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { Options } from './Options' 4 | 5 | render(, document.getElementById('app')!) 6 | -------------------------------------------------------------------------------- /template-inferno-ts/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-ts/src/popup/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { Popup } from './Popup' 4 | 5 | render(, document.getElementById('app')!) 6 | -------------------------------------------------------------------------------- /template-inferno-ts/src/sidepanel/Sidepanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #dc0030; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #dc0030; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-inferno-ts/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-inferno-ts/src/sidepanel/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'inferno' 2 | import './index.css' 3 | import { Sidepanel } from './Sidepanel' 4 | 5 | render(, document.getElementById('app')!) 6 | -------------------------------------------------------------------------------- /template-inferno-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-inferno-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "preserve", 18 | "jsxFactory": "h", 19 | "jsxFragmentFactory": "Fragment" 20 | }, 21 | "include": ["src"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /template-inferno-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-inferno-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import inferno from 'vite-plugin-inferno' 4 | import manifest from './src/manifest' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | return { 9 | build: { 10 | emptyOutDir: true, 11 | outDir: 'build', 12 | rollupOptions: { 13 | output: { 14 | chunkFileNames: 'assets/chunk-[hash].js', 15 | }, 16 | }, 17 | }, 18 | 19 | plugins: [crx({ manifest }), inferno()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-lit-js/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["bierner.lit-html"] 3 | } 4 | -------------------------------------------------------------------------------- /template-lit-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + JS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-lit-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + JS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + JS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + JS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-lit-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-lit-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-lit-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-lit-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-lit-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + JS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-lit-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-lit-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-lit-js/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-lit-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-lit-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import * as path from 'path' 2 | import { defineConfig } from 'vite' 3 | import { crx } from '@crxjs/vite-plugin' 4 | import manifest from './src/manifest.js' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | rollupOptions: { 12 | input: { 13 | options: path.resolve('options.html'), 14 | popup: path.resolve('popup.html'), 15 | sidepanel: path.resolve('sidepanel.html'), 16 | }, 17 | output: { 18 | chunkFileNames: 'assets/chunk-[hash].js', 19 | }, 20 | }, 21 | }, 22 | plugins: [crx({ manifest })], 23 | legacy: { 24 | skipWebSocketTokenCheck: true, 25 | }, 26 | }) 27 | -------------------------------------------------------------------------------- /template-lit-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["bierner.lit-html"] 3 | } 4 | -------------------------------------------------------------------------------- /template-lit-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + TS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + TS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + TS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + TS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-lit-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-lit-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-lit-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-lit-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-lit-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Lit + TS + Vite 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-lit-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-lit-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-lit-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-lit-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-lit-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /template-lit-ts/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-lit-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-lit-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "ESNext", 4 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "outDir": "./types", 8 | "strict": true, 9 | "noUnusedLocals": true, 10 | "noUnusedParameters": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "moduleResolution": "Node", 14 | "isolatedModules": true, 15 | "allowSyntheticDefaultImports": true, 16 | "resolveJsonModule": true, 17 | "experimentalDecorators": true, 18 | "forceConsistentCasingInFileNames": true, 19 | "useDefineForClassFields": false, 20 | "skipLibCheck": true 21 | }, 22 | "include": ["src/**/*.ts"], 23 | "references": [{ "path": "./tsconfig.node.json" }] 24 | } 25 | -------------------------------------------------------------------------------- /template-lit-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "resolveJsonModule": true 7 | }, 8 | "include": ["vite.config.ts", "src/manifest.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /template-lit-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path' 2 | import { defineConfig } from 'vite' 3 | import { crx } from '@crxjs/vite-plugin' 4 | import manifest from './src/manifest' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | rollupOptions: { 12 | input: { 13 | options: path.resolve('options.html'), 14 | popup: path.resolve('popup.html'), 15 | sidepanel: path.resolve('sidepanel.html'), 16 | }, 17 | output: { 18 | chunkFileNames: 'assets/chunk-[hash].js', 19 | }, 20 | }, 21 | }, 22 | plugins: [crx({ manifest })], 23 | legacy: { 24 | skipWebSocketTokenCheck: true, 25 | }, 26 | }) 27 | -------------------------------------------------------------------------------- /template-preact-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-preact-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-preact-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-preact-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-preact-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-preact-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-preact-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-preact-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-preact-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-preact-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-preact-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-preact-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-preact-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-preact-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-preact-js/src/devtools/DevTools.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #673ab8; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #673ab8; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-preact-js/src/devtools/DevTools.jsx: -------------------------------------------------------------------------------- 1 | import './DevTools.css' 2 | 3 | export const DevTools = () => { 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | return ( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
13 | ) 14 | } 15 | 16 | export default DevTools 17 | -------------------------------------------------------------------------------- /template-preact-js/src/devtools/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-js/src/devtools/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { DevTools } from './DevTools' 3 | import './index.css' 4 | 5 | render(, document.getElementById('app')) 6 | 7 | chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () { 8 | console.log('devtools panel create') 9 | }) 10 | -------------------------------------------------------------------------------- /template-preact-js/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #673ab8; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-preact-js/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-js/src/newtab/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { NewTab } from './NewTab' 3 | import './index.css' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-preact-js/src/options/Options.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #673ab8; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #673ab8; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-preact-js/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-js/src/options/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { Options } from './Options' 3 | import './index.css' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-preact-js/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-js/src/popup/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { Popup } from './Popup' 3 | import './index.css' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-preact-js/src/sidepanel/Sidepanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #673ab8; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #673ab8; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-preact-js/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-js/src/sidepanel/index.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { SidePanel } from './SidePanel' 3 | import './index.css' 4 | 5 | render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /template-preact-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-preact-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import preact from '@preact/preset-vite' 4 | import manifest from './src/manifest.js' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | return { 9 | build: { 10 | emptyOutDir: true, 11 | outDir: 'build', 12 | rollupOptions: { 13 | output: { 14 | chunkFileNames: 'assets/chunk-[hash].js', 15 | }, 16 | }, 17 | }, 18 | 19 | plugins: [crx({ manifest }), preact()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-preact-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-preact-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-preact-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-preact-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-preact-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-preact-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-preact-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-preact-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-preact-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-preact-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Preact + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-preact-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-preact-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-preact-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-preact-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-preact-ts/src/devtools/DevTools.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #673ab8; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #673ab8; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-preact-ts/src/devtools/DevTools.tsx: -------------------------------------------------------------------------------- 1 | import './DevTools.css' 2 | 3 | export const DevTools = () => { 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | return ( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
13 | ) 14 | } 15 | 16 | export default DevTools 17 | -------------------------------------------------------------------------------- /template-preact-ts/src/devtools/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-ts/src/devtools/index.ts: -------------------------------------------------------------------------------- 1 | import { createElement, render } from 'preact' 2 | import { DevTools } from './DevTools' 3 | import './index.css' 4 | 5 | render(createElement(DevTools, null), document.getElementById('app') as HTMLElement) 6 | 7 | chrome.devtools.panels.create('PreactCrx', '', '../../devtools.html', function () { 8 | console.log('devtools panel create') 9 | }) 10 | -------------------------------------------------------------------------------- /template-preact-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import JSX = preact.JSX 4 | -------------------------------------------------------------------------------- /template-preact-ts/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #673ab8; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-preact-ts/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-ts/src/newtab/index.ts: -------------------------------------------------------------------------------- 1 | import { createElement, render } from 'preact' 2 | import { NewTab } from './NewTab' 3 | import './index.css' 4 | 5 | render(createElement(NewTab, null), document.getElementById('app') as HTMLElement) 6 | -------------------------------------------------------------------------------- /template-preact-ts/src/options/Options.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #673ab8; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #673ab8; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-preact-ts/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-ts/src/options/index.ts: -------------------------------------------------------------------------------- 1 | import { createElement, render } from 'preact' 2 | import { Options } from './Options' 3 | import './index.css' 4 | 5 | render(createElement(Options, null), document.getElementById('app') as HTMLElement) 6 | -------------------------------------------------------------------------------- /template-preact-ts/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-ts/src/popup/index.ts: -------------------------------------------------------------------------------- 1 | import { createElement, render } from 'preact' 2 | import { Popup } from './Popup' 3 | import './index.css' 4 | 5 | render(createElement(Popup, null), document.getElementById('app') as HTMLElement) 6 | -------------------------------------------------------------------------------- /template-preact-ts/src/sidepanel/Sidepanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #673ab8; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #673ab8; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-preact-ts/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-preact-ts/src/sidepanel/index.ts: -------------------------------------------------------------------------------- 1 | import { createElement, render } from 'preact' 2 | import { SidePanel } from './Sidepanel' 3 | import './index.css' 4 | 5 | render(createElement(SidePanel, null), document.getElementById('app') as HTMLElement) 6 | -------------------------------------------------------------------------------- /template-preact-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-preact-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "preserve", 18 | "jsxFactory": "h", 19 | "jsxFragmentFactory": "Fragment" 20 | }, 21 | "include": ["src"], 22 | "references": [{ "path": "./tsconfig.node.json" }] 23 | } 24 | -------------------------------------------------------------------------------- /template-preact-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-preact-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import preact from '@preact/preset-vite' 4 | import manifest from './src/manifest' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | return { 9 | build: { 10 | emptyOutDir: true, 11 | outDir: 'build', 12 | rollupOptions: { 13 | output: { 14 | chunkFileNames: 'assets/chunk-[hash].js', 15 | }, 16 | }, 17 | }, 18 | plugins: [crx({ manifest }), preact()], 19 | legacy: { 20 | skipWebSocketTokenCheck: true, 21 | }, 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /template-react-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-react-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-react-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-react-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-react-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-react-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-react-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-react-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-react-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-react-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-react-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-react-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-react-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-react-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-react-js/src/devtools/DevTools.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #61dafb; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #61dafb; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-react-js/src/devtools/DevTools.jsx: -------------------------------------------------------------------------------- 1 | import './DevTools.css' 2 | 3 | export const DevTools = () => { 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | return ( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
13 | ) 14 | } 15 | 16 | export default DevTools 17 | -------------------------------------------------------------------------------- /template-react-js/src/devtools/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-js/src/devtools/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { DevTools } from './DevTools' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app')).render( 7 | 8 | 9 | , 10 | ) 11 | 12 | chrome.devtools.panels.create('ReactCrx', '', '../../devtools.html', function () { 13 | console.log('devtools panel create') 14 | }) 15 | -------------------------------------------------------------------------------- /template-react-js/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #61dafb; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-react-js/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-js/src/newtab/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { NewTab } from './NewTab' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-js/src/options/Options.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #61dafb; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #61dafb; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-react-js/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-js/src/options/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { Options } from './Options' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-js/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-js/src/popup/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { Popup } from './Popup' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-js/src/sidepanel/SidePanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #61dafb; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #61dafb; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-react-js/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-js/src/sidepanel/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { SidePanel } from './SidePanel' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-react-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import react from '@vitejs/plugin-react' 4 | import manifest from './src/manifest.js' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | return { 9 | build: { 10 | emptyOutDir: true, 11 | outDir: 'build', 12 | rollupOptions: { 13 | output: { 14 | chunkFileNames: 'assets/chunk-[hash].js', 15 | }, 16 | }, 17 | }, 18 | 19 | plugins: [crx({ manifest }), react()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-react-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-react-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-react-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-react-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-react-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-react-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-react-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-react-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-react-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-react-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + React + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-react-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-react-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-react-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-react-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-react-ts/src/devtools/DevTools.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #61dafb; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #61dafb; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-react-ts/src/devtools/DevTools.tsx: -------------------------------------------------------------------------------- 1 | import './DevTools.css' 2 | 3 | export const DevTools = () => { 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | return ( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
13 | ) 14 | } 15 | 16 | export default DevTools 17 | -------------------------------------------------------------------------------- /template-react-ts/src/devtools/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-ts/src/devtools/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { DevTools } from './DevTools' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | 12 | chrome.devtools.panels.create('ReactCrx', '', '../../devtools.html', function () { 13 | console.log('devtools panel create') 14 | }) 15 | -------------------------------------------------------------------------------- /template-react-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare const __APP_VERSION__: string 4 | -------------------------------------------------------------------------------- /template-react-ts/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #61dafb; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-react-ts/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-ts/src/newtab/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { NewTab } from './NewTab' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-ts/src/options/Options.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #61dafb; 4 | } 5 | } 6 | 7 | body { 8 | min-width: 20rem; 9 | } 10 | 11 | main { 12 | text-align: center; 13 | padding: 1em; 14 | margin: 0 auto; 15 | } 16 | 17 | h3 { 18 | color: #61dafb; 19 | text-transform: uppercase; 20 | font-size: 1.5rem; 21 | font-weight: 200; 22 | line-height: 1.2rem; 23 | margin: 2rem auto; 24 | } 25 | 26 | a { 27 | font-size: 0.5rem; 28 | margin: 0.5rem; 29 | color: #cccccc; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /template-react-ts/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-ts/src/options/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './Options' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-ts/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-ts/src/popup/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { Popup } from './Popup' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-ts/src/sidepanel/SidePanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #61dafb; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #61dafb; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-react-ts/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-react-ts/src/sidepanel/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { SidePanel } from './SidePanel' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /template-react-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-react-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /template-react-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-react-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import react from '@vitejs/plugin-react' 4 | 5 | import manifest from './src/manifest' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig(({ mode }) => { 9 | return { 10 | build: { 11 | emptyOutDir: true, 12 | outDir: 'build', 13 | rollupOptions: { 14 | output: { 15 | chunkFileNames: 'assets/chunk-[hash].js', 16 | }, 17 | }, 18 | }, 19 | plugins: [crx({ manifest }), react()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-solid-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-solid-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-solid-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-solid-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-solid-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-solid-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-solid-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-solid-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-solid-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-solid-js/src/devtools/DevTools.jsx: -------------------------------------------------------------------------------- 1 | import './DevTools.css' 2 | 3 | export const DevTools = () => { 4 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 5 | 6 | return ( 7 |
8 |

DevTools Page

9 | 10 | generated by create-chrome-ext 11 | 12 |
13 | ) 14 | } 15 | 16 | export default DevTools 17 | -------------------------------------------------------------------------------- /template-solid-js/src/devtools/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-js/src/devtools/index.jsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { DevTools } from './DevTools' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | 9 | chrome.devtools.panels.create('SolidCrx', '', '../../devtools.html', function () { 10 | console.log('devtools panel create') 11 | }) 12 | -------------------------------------------------------------------------------- /template-solid-js/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #142d61; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-solid-js/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-js/src/newtab/index.jsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { NewTab } from './NewTab' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-js/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-js/src/options/index.jsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { Options } from './Options' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-js/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-js/src/popup/index.jsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { Popup } from './Popup' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-js/src/sidepanel/Sidepanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #142d61; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #142d61; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-solid-js/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-js/src/sidepanel/index.jsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { Sidepanel } from './Sidepanel' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-solid-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import solidPlugin from 'vite-plugin-solid' 4 | import manifest from './src/manifest.js' 5 | 6 | export default defineConfig(({ mode }) => { 7 | return { 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | target: 'esnext', 12 | polyfillDynamicImport: false, 13 | rollupOptions: { 14 | output: { 15 | chunkFileNames: 'assets/chunk-[hash].js', 16 | }, 17 | }, 18 | }, 19 | plugins: [crx({ manifest }), solidPlugin()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-solid-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-solid-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-solid-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-solid-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-solid-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-solid-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Solid + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-solid-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-solid-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-solid-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-solid-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-solid-ts/src/devtools/DevTools.tsx: -------------------------------------------------------------------------------- 1 | import './DevTools.css' 2 | 3 | /** 4 | * DevTools 5 | */ 6 | export const DevTools = () => { 7 | const link = 'https://github.com/guocaoyi/create-chrome-ext' 8 | 9 | return ( 10 |
11 |

DevTools Page

12 | 13 | generated by create-chrome-ext 14 | 15 |
16 | ) 17 | } 18 | 19 | export default DevTools 20 | -------------------------------------------------------------------------------- /template-solid-ts/src/devtools/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-ts/src/devtools/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { DevTools } from './DevTools' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | 9 | chrome.devtools.panels.create('SolidCrx', '', '../../devtools.html', function () { 10 | console.log('devtools panel create') 11 | }) 12 | -------------------------------------------------------------------------------- /template-solid-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare const __APP_VERSION__: string 4 | -------------------------------------------------------------------------------- /template-solid-ts/src/newtab/NewTab.css: -------------------------------------------------------------------------------- 1 | section::before { 2 | content: ''; 3 | position: fixed; 4 | z-index: -1; 5 | width: 100vw; 6 | height: 100vh; 7 | background-image: url('https://source.unsplash.com/random'); 8 | background-size: cover; 9 | filter: blur(10px); 10 | } 11 | 12 | section { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | h1 { 23 | color: #142d61; 24 | text-transform: uppercase; 25 | font-size: 6rem; 26 | margin: 2rem auto; 27 | } 28 | 29 | a { 30 | font-size: 0.5rem; 31 | margin: 0.5rem; 32 | color: #cccccc; 33 | text-decoration: none; 34 | } 35 | -------------------------------------------------------------------------------- /template-solid-ts/src/newtab/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-ts/src/newtab/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { NewTab } from './NewTab' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-ts/src/options/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-ts/src/options/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { Options } from './Options' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-ts/src/popup/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-ts/src/popup/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { Popup } from './Popup' 6 | 7 | render(() => , document.getElementById('app') ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-ts/src/sidepanel/Sidepanel.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: light) { 2 | a:hover { 3 | color: #142d61; 4 | } 5 | } 6 | 7 | main { 8 | text-align: center; 9 | padding: 1em; 10 | margin: 0 auto; 11 | } 12 | 13 | h3 { 14 | color: #142d61; 15 | text-transform: uppercase; 16 | font-size: 1.5rem; 17 | font-weight: 200; 18 | line-height: 1.2rem; 19 | margin: 2rem auto; 20 | } 21 | 22 | a { 23 | font-size: 0.5rem; 24 | margin: 0.5rem; 25 | color: #cccccc; 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /template-solid-ts/src/sidepanel/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 3 | system-ui, 4 | -apple-system, 5 | BlinkMacSystemFont, 6 | 'Segoe UI', 7 | Roboto, 8 | Oxygen, 9 | Ubuntu, 10 | Cantarell, 11 | 'Open Sans', 12 | 'Helvetica Neue', 13 | sans-serif; 14 | 15 | color-scheme: light dark; 16 | background-color: #242424; 17 | } 18 | 19 | @media (prefers-color-scheme: light) { 20 | :root { 21 | background-color: #fafafa; 22 | } 23 | } 24 | 25 | body { 26 | min-width: 20rem; 27 | margin: 0; 28 | } 29 | -------------------------------------------------------------------------------- /template-solid-ts/src/sidepanel/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web' 3 | 4 | import './index.css' 5 | import { Sidepanel } from './Sidepanel' 6 | 7 | render(() => , (document.getElementById('app') as HTMLElement) ?? document.body) 8 | -------------------------------------------------------------------------------- /template-solid-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-solid-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "preserve", 18 | "jsxImportSource": "solid-js" 19 | }, 20 | "include": ["src"], 21 | "references": [{ "path": "./tsconfig.node.json" }] 22 | } 23 | -------------------------------------------------------------------------------- /template-solid-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-solid-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import solidPlugin from 'vite-plugin-solid' 4 | import manifest from './src/manifest.jsx' 5 | 6 | export default defineConfig(({ mode }) => { 7 | return { 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | target: 'esnext', 12 | polyfillDynamicImport: false, 13 | rollupOptions: { 14 | output: { 15 | chunkFileNames: 'assets/chunk-[hash].js', 16 | }, 17 | }, 18 | }, 19 | plugins: [crx({ manifest }), solidPlugin()], 20 | legacy: { 21 | skipWebSocketTokenCheck: true, 22 | }, 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /template-stencil-ts/src/assets/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-stencil-ts/src/assets/icons/logo.ico -------------------------------------------------------------------------------- /template-stencil-ts/src/assets/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-stencil-ts/src/assets/img/logo-128.png -------------------------------------------------------------------------------- /template-stencil-ts/src/assets/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-stencil-ts/src/assets/img/logo-16.png -------------------------------------------------------------------------------- /template-stencil-ts/src/assets/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-stencil-ts/src/assets/img/logo-32.png -------------------------------------------------------------------------------- /template-stencil-ts/src/assets/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-stencil-ts/src/assets/img/logo-48.png -------------------------------------------------------------------------------- /template-stencil-ts/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-stencil-ts/src/components/devtools-root/devtools-root.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core' 2 | 3 | chrome.devtools.panels.create('StencilCrx', '', '../../devtools.html', function () { 4 | console.log('devtools panel create') 5 | }) 6 | 7 | @Component({ 8 | tag: 'devtools-root', 9 | styleUrl: 'devtools-root.css', 10 | shadow: false, 11 | }) 12 | export class DevToolsRoot { 13 | private link = 'https://github.com/guocaoyi/create-chrome-ext' 14 | 15 | render() { 16 | return ( 17 |
18 |

DevTools Page

19 | 20 | generated by create-chrome-ext 21 | 22 |
23 | ) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /template-stencil-ts/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-stencil-ts/src/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chrome Extension + Stencil + TS + Vite 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /template-stencil-ts/src/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chrome Extension + Stencil + TS + Vite 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /template-stencil-ts/src/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chrome Extension + Stencil + TS + Vite 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /template-stencil-ts/src/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chrome Extension + Stencil + TS + Vite 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /template-stencil-ts/src/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chrome Extension + Stencil + TS + Vite 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /template-stencil-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-stencil-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": ["dom", "es2015"], 8 | "moduleResolution": "node", 9 | "module": "esnext", 10 | "target": "es2017", 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "jsx": "react", 14 | "jsxFactory": "h", 15 | "isolatedModules": true 16 | }, 17 | "include": ["src"], 18 | "exclude": ["node_modules"] 19 | } 20 | -------------------------------------------------------------------------------- /template-svelte-js/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /template-svelte-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-svelte-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-svelte-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-svelte-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-svelte-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-svelte-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-svelte-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-svelte-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-svelte-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-svelte-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-svelte-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-svelte-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-svelte-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-svelte-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-svelte-js/src/devtools/index.js: -------------------------------------------------------------------------------- 1 | import App from './DevTools.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app'), 5 | }) 6 | 7 | chrome.devtools.panels.create('SvelteCrx', '', '../../devtools.html', function () { 8 | console.log('devtools panel create') 9 | }) 10 | 11 | export default app 12 | -------------------------------------------------------------------------------- /template-svelte-js/src/newtab/index.js: -------------------------------------------------------------------------------- 1 | import App from './NewTab.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app'), 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-js/src/options/index.js: -------------------------------------------------------------------------------- 1 | import App from './Options.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app'), 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-js/src/popup/index.js: -------------------------------------------------------------------------------- 1 | import App from './Popup.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app'), 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-js/src/sidepanel/index.js: -------------------------------------------------------------------------------- 1 | import App from './Sidepanel.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app'), 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-svelte-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /template-svelte-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-svelte-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-svelte-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-svelte-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-svelte-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-svelte-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-svelte-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-svelte-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-svelte-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-svelte-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Svelte + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-svelte-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-svelte-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-svelte-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-svelte-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-svelte-ts/src/devtools/index.ts: -------------------------------------------------------------------------------- 1 | import App from './DevTools.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | chrome.devtools.panels.create('SvelteCrx', '', '../../devtools.html', function () { 8 | console.log('devtools panel create') 9 | }) 10 | 11 | export default app 12 | -------------------------------------------------------------------------------- /template-svelte-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | declare const __APP_VERSION__: string 5 | -------------------------------------------------------------------------------- /template-svelte-ts/src/newtab/index.ts: -------------------------------------------------------------------------------- 1 | import App from './NewTab.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-ts/src/options/index.ts: -------------------------------------------------------------------------------- 1 | import App from './Options.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-ts/src/popup/index.ts: -------------------------------------------------------------------------------- 1 | import App from './Popup.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-ts/src/sidepanel/index.ts: -------------------------------------------------------------------------------- 1 | import App from './Sidepanel.svelte' 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /template-svelte-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-svelte-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /template-svelte-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-vanilla-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-vanilla-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-vanilla-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-vanilla-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-vanilla-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-vanilla-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-vanilla-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + JS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-vanilla-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-vanilla-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-vanilla-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-vanilla-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import manifest from './src/manifest.js' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig(({ mode }) => { 7 | return { 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | rollupOptions: { 12 | output: { 13 | chunkFileNames: 'assets/chunk-[hash].js', 14 | }, 15 | }, 16 | }, 17 | 18 | plugins: [crx({ manifest })], 19 | legacy: { 20 | skipWebSocketTokenCheck: true, 21 | }, 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /template-vanilla-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-vanilla-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-vanilla-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-vanilla-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-vanilla-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-vanilla-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vanilla + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vanilla-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-vanilla-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-vanilla-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /template-vanilla-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-vanilla-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import manifest from './src/manifest' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig(({ mode }) => { 7 | return { 8 | build: { 9 | emptyOutDir: true, 10 | outDir: 'build', 11 | rollupOptions: { 12 | output: { 13 | chunkFileNames: 'assets/chunk-[hash].js', 14 | }, 15 | }, 16 | }, 17 | 18 | plugins: [crx({ manifest })], 19 | legacy: { 20 | skipWebSocketTokenCheck: true, 21 | }, 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /template-vue-js/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /template-vue-js/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-vue-js/jsconfig.json: -------------------------------------------------------------------------------- 1 | { "typeAcquisition": { "include": ["chrome"] } } 2 | -------------------------------------------------------------------------------- /template-vue-js/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + JS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-vue-js/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vue-js/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vue-js/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-js/public/icons/logo.ico -------------------------------------------------------------------------------- /template-vue-js/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-js/public/img/logo-128.png -------------------------------------------------------------------------------- /template-vue-js/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-js/public/img/logo-16.png -------------------------------------------------------------------------------- /template-vue-js/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-js/public/img/logo-32.png -------------------------------------------------------------------------------- /template-vue-js/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-js/public/img/logo-48.png -------------------------------------------------------------------------------- /template-vue-js/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + JS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vue-js/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-js/src/assets/logo.png -------------------------------------------------------------------------------- /template-vue-js/src/background/index.js: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-vue-js/src/contentScript/index.js: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-vue-js/src/devtools/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './DevTools.vue' 3 | 4 | chrome.devtools.panels.create('VueCrx', '', '../../devtools.html', function () { 5 | console.log('devtools panel create') 6 | }) 7 | 8 | createApp(App).mount('#app') 9 | -------------------------------------------------------------------------------- /template-vue-js/src/newtab/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './NewTab.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /template-vue-js/src/options/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import App from './Options.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /template-vue-js/src/popup/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import Popup from './Popup.vue' 4 | 5 | createApp(Popup).mount('#app') 6 | -------------------------------------------------------------------------------- /template-vue-js/src/sidepanel/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import SidePanel from './SidePanel.vue' 4 | 5 | createApp(SidePanel).mount('#app') 6 | -------------------------------------------------------------------------------- /template-vue-js/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-vue-js/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import vue from '@vitejs/plugin-vue' 4 | import manifest from './src/manifest.js' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | const production = mode === 'production' 9 | 10 | return { 11 | build: { 12 | emptyOutDir: true, 13 | outDir: 'build', 14 | rollupOptions: { 15 | output: { 16 | chunkFileNames: 'assets/chunk-[hash].js', 17 | }, 18 | }, 19 | }, 20 | plugins: [crx({ manifest }), vue()], 21 | legacy: { 22 | skipWebSocketTokenCheck: true, 23 | }, 24 | } 25 | }) 26 | -------------------------------------------------------------------------------- /template-vue-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /template-vue-ts/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-vue-ts/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + TS + Vite 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-vue-ts/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vue-ts/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vue-ts/public/icons/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-ts/public/icons/logo.ico -------------------------------------------------------------------------------- /template-vue-ts/public/img/logo-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-ts/public/img/logo-128.png -------------------------------------------------------------------------------- /template-vue-ts/public/img/logo-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-ts/public/img/logo-16.png -------------------------------------------------------------------------------- /template-vue-ts/public/img/logo-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-ts/public/img/logo-32.png -------------------------------------------------------------------------------- /template-vue-ts/public/img/logo-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-ts/public/img/logo-48.png -------------------------------------------------------------------------------- /template-vue-ts/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chrome Extension + Vue + TS + Vite 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-vue-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guocaoyi/create-chrome-ext/591db75506e24f13add695dcea24428b4bf78b82/template-vue-ts/src/assets/logo.png -------------------------------------------------------------------------------- /template-vue-ts/src/background/index.ts: -------------------------------------------------------------------------------- 1 | console.log('background is running') 2 | 3 | chrome.runtime.onMessage.addListener((request) => { 4 | if (request.type === 'COUNT') { 5 | console.log('background has received a message from popup, and count is ', request?.count) 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /template-vue-ts/src/contentScript/index.ts: -------------------------------------------------------------------------------- 1 | console.info('contentScript is running') 2 | -------------------------------------------------------------------------------- /template-vue-ts/src/devtools/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './DevTools.vue' 3 | 4 | chrome.devtools.panels.create('VueCrx', '', '../../devtools.html', function () { 5 | console.log('devtools panel create') 6 | }) 7 | 8 | createApp(App).mount('#app') 9 | -------------------------------------------------------------------------------- /template-vue-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /template-vue-ts/src/newtab/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './NewTab.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /template-vue-ts/src/options/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import App from './Options.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /template-vue-ts/src/popup/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import Popup from './Popup.vue' 4 | 5 | createApp(Popup).mount('#app') 6 | -------------------------------------------------------------------------------- /template-vue-ts/src/sidepanel/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import SidePanel from './SidePanel.vue' 4 | 5 | createApp(SidePanel).mount('#app') 6 | -------------------------------------------------------------------------------- /template-vue-ts/src/zip.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import zip from 'gulp-zip' 3 | import { createRequire } from 'module' 4 | const require = createRequire(import.meta.url) 5 | const manifest = require('../build/manifest.json') 6 | 7 | gulp 8 | .src('build/**', { encoding: false }) 9 | .pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`)) 10 | .pipe(gulp.dest('package')) 11 | -------------------------------------------------------------------------------- /template-vue-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /template-vue-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /template-vue-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { crx } from '@crxjs/vite-plugin' 3 | import vue from '@vitejs/plugin-vue' 4 | import manifest from './src/manifest' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => { 8 | const production = mode === 'production' 9 | 10 | return { 11 | build: { 12 | cssCodeSplit: true, 13 | emptyOutDir: true, 14 | outDir: 'build', 15 | rollupOptions: { 16 | output: { 17 | chunkFileNames: 'assets/chunk-[hash].js', 18 | }, 19 | }, 20 | }, 21 | plugins: [crx({ manifest }), vue()], 22 | legacy: { 23 | skipWebSocketTokenCheck: true, 24 | }, 25 | } 26 | }) 27 | --------------------------------------------------------------------------------