diff --git a/examples/devcontainers/.devcontainer/devcontainer.json b/examples/devcontainers/.devcontainer/devcontainer.json new file mode 100644 index 0000000..227e4ef --- /dev/null +++ b/examples/devcontainers/.devcontainer/devcontainer.json @@ -0,0 +1,36 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node +{ + "name": "WXT Dev Container", + "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm", + "features": { + "ghcr.io/devcontainers/features/desktop-lite:1": {} + }, + "containerEnv": { + "VNC_RESOLUTION": "1920x1080x32" + }, + "forwardPorts": [3000, 6080], + "portsAttributes": { + "3000": { "label": "WXT Dev Server" }, + "6080": { "label": "Desktop (noVNC)" } + }, + "postCreateCommand": "pnpm install", + "customizations": { + "vscode": { + "settings": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "eslint.validate": ["javascript", "typescript"] + }, + "extensions": [ + "EditorConfig.EditorConfig", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "ms-playwright.playwright" + ] + } + } +} diff --git a/examples/devcontainers/.gitignore b/examples/devcontainers/.gitignore new file mode 100644 index 0000000..a256953 --- /dev/null +++ b/examples/devcontainers/.gitignore @@ -0,0 +1,26 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.output +stats.html +stats-*.json +.wxt +web-ext.config.ts + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/devcontainers/README.md b/examples/devcontainers/README.md new file mode 100644 index 0000000..c01037e --- /dev/null +++ b/examples/devcontainers/README.md @@ -0,0 +1,12 @@ +--- +name: Devcontainers +description: WXT browser extension using Dev Containers. +--- + +```sh +pnpm i +export CHROME_PATH=$(pnpm dlx @puppeteer/browsers install chrome@stable | awk '{print $2}') +CHROME_EXTRA_FLAGS='--no-sandbox' pnpm dev +``` + +Open your local browser and navigate to `http://localhost:6080`. You should see a desktop environment. The browser launched by WXT will be visible here. diff --git a/examples/devcontainers/assets/typescript.svg b/examples/devcontainers/assets/typescript.svg new file mode 100644 index 0000000..221f936 --- /dev/null +++ b/examples/devcontainers/assets/typescript.svg @@ -0,0 +1 @@ + diff --git a/examples/devcontainers/components/counter.ts b/examples/devcontainers/components/counter.ts new file mode 100644 index 0000000..da18bde --- /dev/null +++ b/examples/devcontainers/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/examples/devcontainers/entrypoints/background.ts b/examples/devcontainers/entrypoints/background.ts new file mode 100644 index 0000000..f96fa48 --- /dev/null +++ b/examples/devcontainers/entrypoints/background.ts @@ -0,0 +1,3 @@ +export default defineBackground(() => { + console.log('Hello background!', { id: browser.runtime.id }); +}); diff --git a/examples/devcontainers/entrypoints/content.ts b/examples/devcontainers/entrypoints/content.ts new file mode 100644 index 0000000..67a0454 --- /dev/null +++ b/examples/devcontainers/entrypoints/content.ts @@ -0,0 +1,6 @@ +export default defineContentScript({ + matches: ["*://*.google.com/*"], + main() { + console.log("Hello content."); + }, +}); diff --git a/examples/devcontainers/entrypoints/popup/index.html b/examples/devcontainers/entrypoints/popup/index.html new file mode 100644 index 0000000..5a2184e --- /dev/null +++ b/examples/devcontainers/entrypoints/popup/index.html @@ -0,0 +1,13 @@ + + + + + + Default Popup Title + + + +
+ + + diff --git a/examples/devcontainers/entrypoints/popup/main.ts b/examples/devcontainers/entrypoints/popup/main.ts new file mode 100644 index 0000000..5a2cc1a --- /dev/null +++ b/examples/devcontainers/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/examples/devcontainers/entrypoints/popup/style.css b/examples/devcontainers/entrypoints/popup/style.css new file mode 100644 index 0000000..e3160a8 --- /dev/null +++ b/examples/devcontainers/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 #54bc4ae0); +} +.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/examples/devcontainers/package.json b/examples/devcontainers/package.json new file mode 100644 index 0000000..b4bc89f --- /dev/null +++ b/examples/devcontainers/package.json @@ -0,0 +1,21 @@ +{ + "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", + "zip": "wxt zip", + "zip:firefox": "wxt zip -b firefox", + "compile": "tsc --noEmit", + "postinstall": "wxt prepare" + }, + "devDependencies": { + "typescript": "^5.8.2", + "wxt": "^0.20.5" + } +} diff --git a/examples/devcontainers/public/icon/128.png b/examples/devcontainers/public/icon/128.png new file mode 100644 index 0000000..9e35d13 Binary files /dev/null and b/examples/devcontainers/public/icon/128.png differ diff --git a/examples/devcontainers/public/icon/16.png b/examples/devcontainers/public/icon/16.png new file mode 100644 index 0000000..cd09f8c Binary files /dev/null and b/examples/devcontainers/public/icon/16.png differ diff --git a/examples/devcontainers/public/icon/32.png b/examples/devcontainers/public/icon/32.png new file mode 100644 index 0000000..f51ce1b Binary files /dev/null and b/examples/devcontainers/public/icon/32.png differ diff --git a/examples/devcontainers/public/icon/48.png b/examples/devcontainers/public/icon/48.png new file mode 100644 index 0000000..cb7a449 Binary files /dev/null and b/examples/devcontainers/public/icon/48.png differ diff --git a/examples/devcontainers/public/icon/96.png b/examples/devcontainers/public/icon/96.png new file mode 100644 index 0000000..c28ad52 Binary files /dev/null and b/examples/devcontainers/public/icon/96.png differ diff --git a/examples/devcontainers/public/wxt.svg b/examples/devcontainers/public/wxt.svg new file mode 100644 index 0000000..0e76320 --- /dev/null +++ b/examples/devcontainers/public/wxt.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/examples/devcontainers/tsconfig.json b/examples/devcontainers/tsconfig.json new file mode 100644 index 0000000..008bc3c --- /dev/null +++ b/examples/devcontainers/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.wxt/tsconfig.json" +} diff --git a/examples/devcontainers/wxt.config.ts b/examples/devcontainers/wxt.config.ts new file mode 100644 index 0000000..1e2f53d --- /dev/null +++ b/examples/devcontainers/wxt.config.ts @@ -0,0 +1,4 @@ +import { defineConfig } from 'wxt'; + +// See https://wxt.dev/api/config.html +export default defineConfig({}); diff --git a/metadata.json b/metadata.json index c498a18..51ba7b4 100644 --- a/metadata.json +++ b/metadata.json @@ -98,6 +98,18 @@ "storage" ] }, + { + "name": "Devcontainers", + "description": "WXT browser extension using Dev Containers.", + "searchText": "Devcontainers|WXT browser extension using Dev Containers.|browser.runtime.id|browser.runtime.getURL", + "url": "https://github.com/wxt-dev/examples/tree/main/examples/devcontainers", + "apis": [ + "browser.runtime.id", + "browser.runtime.getURL" + ], + "packages": [], + "permissions": [] + }, { "name": "Devtools Extension", "description": "Create an extension that adds to the browser's devtools.", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94c95d0..fb46ea4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -112,6 +112,15 @@ importers: specifier: ^0.20.5 version: 0.20.5(@types/node@22.7.3)(jiti@2.4.2)(lightningcss@1.29.2)(rollup@4.40.1)(sugarss@4.0.1(postcss@8.5.3))(tsx@4.15.4)(yaml@2.4.5) + examples/devcontainers: + devDependencies: + typescript: + specifier: ^5.8.2 + version: 5.8.2 + wxt: + specifier: ^0.20.5 + version: 0.20.5(@types/node@22.7.3)(jiti@2.4.2)(lightningcss@1.29.2)(rollup@4.40.1)(sugarss@4.0.1(postcss@8.5.3))(tsx@4.15.4)(yaml@2.4.5) + examples/devtools-extension: devDependencies: typescript: