wxt-dev · aklinker1 · Jun 14, 2025 · Jun 1, 2025
diff --git a/examples/devcontainers/.devcontainer/devcontainer.json 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
@@ -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
@@ -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
diff --git a/examples/devcontainers/components/counter.ts 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
@@ -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
@@ -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
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/examples/devcontainers/entrypoints/popup/main.ts 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<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <a href="https://wxt.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="WXT logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>WXT + TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the WXT and TypeScript logos to learn more
+    </p>
+  </div>
+`;
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!);
diff --git a/examples/devcontainers/entrypoints/popup/style.css 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
@@ -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
diff --git a/examples/devcontainers/public/icon/16.png b/examples/devcontainers/public/icon/16.png
diff --git a/examples/devcontainers/public/icon/32.png b/examples/devcontainers/public/icon/32.png
diff --git a/examples/devcontainers/public/icon/48.png b/examples/devcontainers/public/icon/48.png
diff --git a/examples/devcontainers/public/icon/96.png b/examples/devcontainers/public/icon/96.png
diff --git a/examples/devcontainers/public/wxt.svg b/examples/devcontainers/public/wxt.svg
diff --git a/examples/devcontainers/tsconfig.json 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
@@ -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
@@ -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