From 2daa4d69009d9669b2b19288bb422268a66a7702 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 13 Jul 2023 18:50:07 -0500 Subject: [PATCH] chore: React and Vue starter templates (#33) --- .gitignore | 3 + docs/get-started/configuration.md | 38 +++++++- docs/get-started/installation.md | 32 ++++-- templates/README.md | 5 + templates/react/README.md | 7 ++ templates/react/_gitignore | 23 +++++ templates/react/assets/react.svg | 1 + templates/react/entrypoints/background.ts | 3 + templates/react/entrypoints/popup/App.css | 42 ++++++++ templates/react/entrypoints/popup/App.tsx | 35 +++++++ templates/react/entrypoints/popup/index.css | 69 +++++++++++++ templates/react/entrypoints/popup/index.html | 13 +++ templates/react/entrypoints/popup/main.tsx | 10 ++ templates/react/package.json | 26 +++++ templates/react/public/wxt.svg | 1 + templates/react/tsconfig.json | 7 ++ templates/react/wxt.config.ts | 9 ++ templates/vanilla/_gitignore | 23 +++++ templates/vanilla/assets/typescript.svg | 1 + templates/vanilla/components/counter.ts | 9 ++ templates/vanilla/entrypoints/background.ts | 3 + .../vanilla/entrypoints/popup/index.html | 13 +++ templates/vanilla/entrypoints/popup/main.ts | 24 +++++ templates/vanilla/entrypoints/popup/style.css | 97 +++++++++++++++++++ templates/vanilla/package.json | 19 ++++ templates/vanilla/public/wxt.svg | 1 + templates/vanilla/tsconfig.json | 3 + templates/vue/.vscode/extensions.json | 3 + templates/vue/README.md | 7 ++ templates/vue/_gitignore | 23 +++++ templates/vue/assets/vue.svg | 1 + templates/vue/components/HelloWorld.vue | 34 +++++++ templates/vue/entrypoints/background.ts | 3 + templates/vue/entrypoints/popup/App.vue | 30 ++++++ templates/vue/entrypoints/popup/index.html | 13 +++ templates/vue/entrypoints/popup/main.ts | 5 + templates/vue/entrypoints/popup/style.css | 89 +++++++++++++++++ templates/vue/package.json | 24 +++++ templates/vue/public/wxt.svg | 1 + templates/vue/tsconfig.json | 3 + templates/vue/wxt.config.ts | 9 ++ tsconfig.json | 2 +- 42 files changed, 750 insertions(+), 14 deletions(-) create mode 100644 templates/README.md create mode 100644 templates/react/README.md create mode 100644 templates/react/_gitignore create mode 100644 templates/react/assets/react.svg create mode 100644 templates/react/entrypoints/background.ts create mode 100644 templates/react/entrypoints/popup/App.css create mode 100644 templates/react/entrypoints/popup/App.tsx create mode 100644 templates/react/entrypoints/popup/index.css create mode 100644 templates/react/entrypoints/popup/index.html create mode 100644 templates/react/entrypoints/popup/main.tsx create mode 100644 templates/react/package.json create mode 100644 templates/react/public/wxt.svg create mode 100644 templates/react/tsconfig.json create mode 100644 templates/react/wxt.config.ts create mode 100644 templates/vanilla/_gitignore create mode 100644 templates/vanilla/assets/typescript.svg create mode 100644 templates/vanilla/components/counter.ts create mode 100644 templates/vanilla/entrypoints/background.ts create mode 100644 templates/vanilla/entrypoints/popup/index.html create mode 100644 templates/vanilla/entrypoints/popup/main.ts create mode 100644 templates/vanilla/entrypoints/popup/style.css create mode 100644 templates/vanilla/package.json create mode 100644 templates/vanilla/public/wxt.svg create mode 100644 templates/vanilla/tsconfig.json create mode 100644 templates/vue/.vscode/extensions.json create mode 100644 templates/vue/README.md create mode 100644 templates/vue/_gitignore create mode 100644 templates/vue/assets/vue.svg create mode 100644 templates/vue/components/HelloWorld.vue create mode 100644 templates/vue/entrypoints/background.ts create mode 100644 templates/vue/entrypoints/popup/App.vue create mode 100644 templates/vue/entrypoints/popup/index.html create mode 100644 templates/vue/entrypoints/popup/main.ts create mode 100644 templates/vue/entrypoints/popup/style.css create mode 100644 templates/vue/package.json create mode 100644 templates/vue/public/wxt.svg create mode 100644 templates/vue/tsconfig.json create mode 100644 templates/vue/wxt.config.ts diff --git a/.gitignore b/.gitignore index ceed6706..d5390b03 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,6 @@ node_modules TODOs.md web-ext.config.js web-ext.config.ts +templates/*/pnpm-lock.yaml +templates/*/yarn.lock +templates/*/package-lock.json diff --git a/docs/get-started/configuration.md b/docs/get-started/configuration.md index 52e5a2c4..f7c52e98 100644 --- a/docs/get-started/configuration.md +++ b/docs/get-started/configuration.md @@ -44,13 +44,19 @@ export default defineConfig({ ## Vite Config -Vite is the bundler used to build each part of an extension. Vite can be configured via the `vite` option. +[Vite](https://vitejs.dev/) is the bundler used to build each entrypoint of your extension. Vite can be configured via the `vite` option. -### Example +See [Vite's documentation](https://vitejs.dev/config/) for configuring the bundler. -A common reason to configure Vite is to add plugins: +## Frontend Frameworks -```ts +Adding a framework like Vue, React, or Svelte is easy! + +In the `wxt.config.ts` file, install and add the framework's Vite plugin to the config. + +:::code-group + +```ts [Vue] import { defineConfig } from 'wxt'; import vue from '@vitejs/plugin-vue'; @@ -60,3 +66,27 @@ export default defineConfig({ }, }); ``` + +```ts [React] +import { defineConfig } from 'wxt'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + vite: { + plugins: [react()], + }, +}); +``` + +```ts [Svelte] +import { defineConfig } from 'wxt'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; + +export default defineConfig({ + vite: { + plugins: [svelte()], + }, +}); +``` + +::: diff --git a/docs/get-started/installation.md b/docs/get-started/installation.md index f277a6a6..53cd29cd 100644 --- a/docs/get-started/installation.md +++ b/docs/get-started/installation.md @@ -4,9 +4,12 @@ Bootstrap a new project or start from scratch. ## Bootstrap Project -:::warning 🚧 This feature is not implemented yet! +:::warning 🚧 The `wxt init` command is not implemented yet. -See [From Scratch](#from-scratch) instead. +See [From Scratch](#from-scratch) or reference one of the templates on GitHub: + +- [Vue](https://github.com/aklinker1/wxt/tree/main/templates/vue) +- [React](https://github.com/aklinker1/wxt/tree/main/templates/react) ::: @@ -64,22 +67,33 @@ yarn add wxt ::: -Finally, add `package.json` scripts: +Add your first entrypoint: + +```ts +// entrypoints/background.ts +export default defineBackgroundScript(() => { + console.log(`Hello from ${browser.runtime.id}!`); +}); +``` + +Finally, add scripts to your `package.json`: ```json { "scripts": { - "dev": "wxt", - "dev:firefox": "wxt --browser firefox", - "build": "wxt build", - "build:firefox": "wxt build --browser firefox" + "dev": "wxt", // [!code ++] + "dev:firefox": "wxt --browser firefox", // [!code ++] + "build": "wxt build", // [!code ++] + "build:firefox": "wxt build --browser firefox" // [!code ++] } } ``` +> You can skip `*:firefox` scripts if you don't want to support Firefox + ## Development -Once you've installed WXT, you can start the development server using the `dev` command: +Once you've installed WXT, you can start the development server using the `dev` script. ```sh pnpm dev @@ -92,7 +106,7 @@ The dev command will build the extension for development, open the browser, and ## Next Steps -Now that your WXT project is setup, you're ready to build a out your web extension! +You're ready to build a out your web extension! - Learn how to [add entrypoints](./entrypoints.md) like the popup, background, or content scripts - [Configure WXT](./configuration.md) by creating a `wxt.config.ts` file diff --git a/templates/README.md b/templates/README.md new file mode 100644 index 00000000..870d15d4 --- /dev/null +++ b/templates/README.md @@ -0,0 +1,5 @@ +# WXT Templates + +To add or change a template, open the template's folder (`template/`) in your editor directly. Then, it's a normal NPM project. + +Note that you should use `npm` instead of `pnpm` in the template directories so that it doesn't complict with the repo's PNPM workspace. Templates are standalone and should not depend on the local state of `wxt`. diff --git a/templates/react/README.md b/templates/react/README.md new file mode 100644 index 00000000..8e0cb6a1 --- /dev/null +++ b/templates/react/README.md @@ -0,0 +1,7 @@ +# WXT + Vue 3 + +This template should help get you started developing with Vue 3 in WXT. + +## Recommended IDE Setup + +- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). diff --git a/templates/react/_gitignore b/templates/react/_gitignore new file mode 100644 index 00000000..b694a278 --- /dev/null +++ b/templates/react/_gitignore @@ -0,0 +1,23 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.output +artifacts + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/templates/react/assets/react.svg b/templates/react/assets/react.svg new file mode 100644 index 00000000..8e0e0f15 --- /dev/null +++ b/templates/react/assets/react.svg @@ -0,0 +1 @@ + diff --git a/templates/react/entrypoints/background.ts b/templates/react/entrypoints/background.ts new file mode 100644 index 00000000..51d3f08f --- /dev/null +++ b/templates/react/entrypoints/background.ts @@ -0,0 +1,3 @@ +export default defineBackgroundScript(() => { + console.log('Hello background!', { id: browser.runtime.id }); +}); diff --git a/templates/react/entrypoints/popup/App.css b/templates/react/entrypoints/popup/App.css new file mode 100644 index 00000000..b9d355df --- /dev/null +++ b/templates/react/entrypoints/popup/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/templates/react/entrypoints/popup/App.tsx b/templates/react/entrypoints/popup/App.tsx new file mode 100644 index 00000000..dd134849 --- /dev/null +++ b/templates/react/entrypoints/popup/App.tsx @@ -0,0 +1,35 @@ +import { useState } from 'react'; +import reactLogo from '../../assets/react.svg'; +import wxtLogo from '/wxt.svg'; +import './App.css'; + +function App() { + const [count, setCount] = useState(0); + + return ( + <> +
+ + WXT logo + + + React logo + +
+

WXT + React

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the WXT and React logos to learn more +

+ + ); +} + +export default App; diff --git a/templates/react/entrypoints/popup/index.css b/templates/react/entrypoints/popup/index.css new file mode 100644 index 00000000..2c3fac68 --- /dev/null +++ b/templates/react/entrypoints/popup/index.css @@ -0,0 +1,69 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/templates/react/entrypoints/popup/index.html b/templates/react/entrypoints/popup/index.html new file mode 100644 index 00000000..fc624929 --- /dev/null +++ b/templates/react/entrypoints/popup/index.html @@ -0,0 +1,13 @@ + + + + + + Default Popup Title + + + +
+ + + diff --git a/templates/react/entrypoints/popup/main.tsx b/templates/react/entrypoints/popup/main.tsx new file mode 100644 index 00000000..9bb419d3 --- /dev/null +++ b/templates/react/entrypoints/popup/main.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/templates/react/package.json b/templates/react/package.json new file mode 100644 index 00000000..5641057e --- /dev/null +++ b/templates/react/package.json @@ -0,0 +1,26 @@ +{ + "name": "wxt-starter", + "description": "manifest.json description", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "wxt", + "dev:firefox": "wxt -b firefox", + "build": "wxt build", + "build:firefox": "wxt build -b firefox", + "compile": "tsc --noEmit", + "prepare": "wxt prepare" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.14", + "@types/react-dom": "^18.2.6", + "@vitejs/plugin-react": "^4.0.3", + "typescript": "^5.1.6", + "wxt": "^0.1.3" + } +} diff --git a/templates/react/public/wxt.svg b/templates/react/public/wxt.svg new file mode 100644 index 00000000..ee9fadaf --- /dev/null +++ b/templates/react/public/wxt.svg @@ -0,0 +1 @@ + diff --git a/templates/react/tsconfig.json b/templates/react/tsconfig.json new file mode 100644 index 00000000..9b364da1 --- /dev/null +++ b/templates/react/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "./.wxt/tsconfig.json", + "compilerOptions": { + "allowImportingTsExtensions": true, + "jsx": "react-jsx" + } +} diff --git a/templates/react/wxt.config.ts b/templates/react/wxt.config.ts new file mode 100644 index 00000000..7e57b6b3 --- /dev/null +++ b/templates/react/wxt.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from 'wxt'; +import react from '@vitejs/plugin-react'; + +// See https://wxt.dev/config.html +export default defineConfig({ + vite: { + plugins: [react()], + }, +}); diff --git a/templates/vanilla/_gitignore b/templates/vanilla/_gitignore new file mode 100644 index 00000000..b694a278 --- /dev/null +++ b/templates/vanilla/_gitignore @@ -0,0 +1,23 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.output +artifacts + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/templates/vanilla/assets/typescript.svg b/templates/vanilla/assets/typescript.svg new file mode 100644 index 00000000..221f936e --- /dev/null +++ b/templates/vanilla/assets/typescript.svg @@ -0,0 +1 @@ + diff --git a/templates/vanilla/components/counter.ts b/templates/vanilla/components/counter.ts new file mode 100644 index 00000000..da18bdef --- /dev/null +++ b/templates/vanilla/components/counter.ts @@ -0,0 +1,9 @@ +export function setupCounter(element: HTMLButtonElement) { + let counter = 0; + const setCounter = (count: number) => { + counter = count; + element.innerHTML = `count is ${counter}`; + }; + element.addEventListener('click', () => setCounter(counter + 1)); + setCounter(0); +} diff --git a/templates/vanilla/entrypoints/background.ts b/templates/vanilla/entrypoints/background.ts new file mode 100644 index 00000000..51d3f08f --- /dev/null +++ b/templates/vanilla/entrypoints/background.ts @@ -0,0 +1,3 @@ +export default defineBackgroundScript(() => { + console.log('Hello background!', { id: browser.runtime.id }); +}); diff --git a/templates/vanilla/entrypoints/popup/index.html b/templates/vanilla/entrypoints/popup/index.html new file mode 100644 index 00000000..c4d9a3c0 --- /dev/null +++ b/templates/vanilla/entrypoints/popup/index.html @@ -0,0 +1,13 @@ + + + + + + Default Popup Title + + + +
+ + + diff --git a/templates/vanilla/entrypoints/popup/main.ts b/templates/vanilla/entrypoints/popup/main.ts new file mode 100644 index 00000000..569150bd --- /dev/null +++ b/templates/vanilla/entrypoints/popup/main.ts @@ -0,0 +1,24 @@ +import './style.css'; +import typescriptLogo from '../../assets/typescript.svg'; +import viteLogo from '/wxt.svg'; +import { setupCounter } from '../../components/counter'; + +document.querySelector('#app')!.innerHTML = ` +
+ + + + + + +

WXT + TypeScript

+
+ +
+

+ Click on the WXT and TypeScript logos to learn more +

+
+`; + +setupCounter(document.querySelector('#counter')!); diff --git a/templates/vanilla/entrypoints/popup/style.css b/templates/vanilla/entrypoints/popup/style.css new file mode 100644 index 00000000..b528b6cc --- /dev/null +++ b/templates/vanilla/entrypoints/popup/style.css @@ -0,0 +1,97 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.vanilla:hover { + filter: drop-shadow(0 0 2em #3178c6aa); +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/templates/vanilla/package.json b/templates/vanilla/package.json new file mode 100644 index 00000000..d28222ce --- /dev/null +++ b/templates/vanilla/package.json @@ -0,0 +1,19 @@ +{ + "name": "wxt-starter", + "description": "manifest.json description", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "wxt", + "dev:firefox": "wxt -b firefox", + "build": "wxt build", + "build:firefox": "wxt build -b firefox", + "compile": "tsc --noEmit", + "prepare": "wxt prepare" + }, + "devDependencies": { + "typescript": "^5.1.6", + "wxt": "^0.1.3" + } +} diff --git a/templates/vanilla/public/wxt.svg b/templates/vanilla/public/wxt.svg new file mode 100644 index 00000000..ee9fadaf --- /dev/null +++ b/templates/vanilla/public/wxt.svg @@ -0,0 +1 @@ + diff --git a/templates/vanilla/tsconfig.json b/templates/vanilla/tsconfig.json new file mode 100644 index 00000000..008bc3c7 --- /dev/null +++ b/templates/vanilla/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.wxt/tsconfig.json" +} diff --git a/templates/vue/.vscode/extensions.json b/templates/vue/.vscode/extensions.json new file mode 100644 index 00000000..c0a6e5a4 --- /dev/null +++ b/templates/vue/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/templates/vue/README.md b/templates/vue/README.md new file mode 100644 index 00000000..8e0cb6a1 --- /dev/null +++ b/templates/vue/README.md @@ -0,0 +1,7 @@ +# WXT + Vue 3 + +This template should help get you started developing with Vue 3 in WXT. + +## Recommended IDE Setup + +- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). diff --git a/templates/vue/_gitignore b/templates/vue/_gitignore new file mode 100644 index 00000000..b694a278 --- /dev/null +++ b/templates/vue/_gitignore @@ -0,0 +1,23 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.output +artifacts + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/templates/vue/assets/vue.svg b/templates/vue/assets/vue.svg new file mode 100644 index 00000000..ca8129c2 --- /dev/null +++ b/templates/vue/assets/vue.svg @@ -0,0 +1 @@ + diff --git a/templates/vue/components/HelloWorld.vue b/templates/vue/components/HelloWorld.vue new file mode 100644 index 00000000..dd0fde26 --- /dev/null +++ b/templates/vue/components/HelloWorld.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/templates/vue/entrypoints/background.ts b/templates/vue/entrypoints/background.ts new file mode 100644 index 00000000..51d3f08f --- /dev/null +++ b/templates/vue/entrypoints/background.ts @@ -0,0 +1,3 @@ +export default defineBackgroundScript(() => { + console.log('Hello background!', { id: browser.runtime.id }); +}); diff --git a/templates/vue/entrypoints/popup/App.vue b/templates/vue/entrypoints/popup/App.vue new file mode 100644 index 00000000..58d320ae --- /dev/null +++ b/templates/vue/entrypoints/popup/App.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/templates/vue/entrypoints/popup/index.html b/templates/vue/entrypoints/popup/index.html new file mode 100644 index 00000000..c4d9a3c0 --- /dev/null +++ b/templates/vue/entrypoints/popup/index.html @@ -0,0 +1,13 @@ + + + + + + Default Popup Title + + + +
+ + + diff --git a/templates/vue/entrypoints/popup/main.ts b/templates/vue/entrypoints/popup/main.ts new file mode 100644 index 00000000..f8c23e47 --- /dev/null +++ b/templates/vue/entrypoints/popup/main.ts @@ -0,0 +1,5 @@ +import { createApp } from 'vue'; +import './style.css'; +import App from './App.vue'; + +createApp(App).mount('#app'); diff --git a/templates/vue/entrypoints/popup/style.css b/templates/vue/entrypoints/popup/style.css new file mode 100644 index 00000000..84a00507 --- /dev/null +++ b/templates/vue/entrypoints/popup/style.css @@ -0,0 +1,89 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/templates/vue/package.json b/templates/vue/package.json new file mode 100644 index 00000000..69cc4d3b --- /dev/null +++ b/templates/vue/package.json @@ -0,0 +1,24 @@ +{ + "name": "wxt-starter", + "description": "manifest.json description", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "wxt", + "dev:firefox": "wxt -b firefox", + "build": "wxt build", + "build:firefox": "wxt build -b firefox", + "compile": "vue-tsc --noEmit", + "prepare": "wxt prepare" + }, + "dependencies": { + "vue": "^3.3.4" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.2.3", + "typescript": "^5.1.6", + "vue-tsc": "^1.8.4", + "wxt": "^0.1.3" + } +} diff --git a/templates/vue/public/wxt.svg b/templates/vue/public/wxt.svg new file mode 100644 index 00000000..ee9fadaf --- /dev/null +++ b/templates/vue/public/wxt.svg @@ -0,0 +1 @@ + diff --git a/templates/vue/tsconfig.json b/templates/vue/tsconfig.json new file mode 100644 index 00000000..008bc3c7 --- /dev/null +++ b/templates/vue/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.wxt/tsconfig.json" +} diff --git a/templates/vue/wxt.config.ts b/templates/vue/wxt.config.ts new file mode 100644 index 00000000..cf3bd505 --- /dev/null +++ b/templates/vue/wxt.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from 'wxt'; +import vue from '@vitejs/plugin-vue'; + +// See https://wxt.dev/config.html +export default defineConfig({ + vite: { + plugins: [vue()], + }, +}); diff --git a/tsconfig.json b/tsconfig.json index adc39498..9e443562 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "./tsconfig.base.json", - "exclude": ["dist", "demo", "e2e/project"] + "exclude": ["dist", "demo", "e2e/project", "templates"] }