├── .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 
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 |
--------------------------------------------------------------------------------