Skip to content

Commit cabf955

Browse files
Madh93Madh93
authored
Add devcontainer example (#26)
1 parent c19d64a commit cabf955

File tree

21 files changed

+291
-0
lines changed

21 files changed

+291
-0
lines changed

‎examples/devcontainers/.devcontainer/devcontainer.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
2+
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
3+
{
4+
"name": "WXT Dev Container",
5+
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
6+
"features": {
7+
"ghcr.io/devcontainers/features/desktop-lite:1": {}
8+
},
9+
"containerEnv": {
10+
"VNC_RESOLUTION": "1920x1080x32"
11+
},
12+
"forwardPorts": [3000, 6080],
13+
"portsAttributes": {
14+
"3000": { "label": "WXT Dev Server" },
15+
"6080": { "label": "Desktop (noVNC)" }
16+
},
17+
"postCreateCommand": "pnpm install",
18+
"customizations": {
19+
"vscode": {
20+
"settings": {
21+
"editor.formatOnSave": true,
22+
"editor.defaultFormatter": "esbenp.prettier-vscode",
23+
"[typescript]": {
24+
"editor.defaultFormatter": "esbenp.prettier-vscode"
25+
},
26+
"eslint.validate": ["javascript", "typescript"]
27+
},
28+
"extensions": [
29+
"EditorConfig.EditorConfig",
30+
"dbaeumer.vscode-eslint",
31+
"esbenp.prettier-vscode",
32+
"ms-playwright.playwright"
33+
]
34+
}
35+
}
36+
}

‎examples/devcontainers/.gitignore

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.output
12+
stats.html
13+
stats-*.json
14+
.wxt
15+
web-ext.config.ts
16+
17+
# Editor directories and files
18+
.vscode/*
19+
!.vscode/extensions.json
20+
.idea
21+
.DS_Store
22+
*.suo
23+
*.ntvs*
24+
*.njsproj
25+
*.sln
26+
*.sw?

‎examples/devcontainers/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Devcontainers
3+
description: WXT browser extension using Dev Containers.
4+
---
5+
6+
```sh
7+
pnpm i
8+
export CHROME_PATH=$(pnpm dlx @puppeteer/browsers install chrome@stable | awk '{print $2}')
9+
CHROME_EXTRA_FLAGS='--no-sandbox' pnpm dev
10+
```
11+
12+
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.

‎examples/devcontainers/assets/typescript.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/devcontainers/components/counter.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function setupCounter(element: HTMLButtonElement) {
2+
let counter = 0;
3+
const setCounter = (count: number) => {
4+
counter = count;
5+
element.innerHTML = `count is ${counter}`;
6+
};
7+
element.addEventListener('click', () => setCounter(counter + 1));
8+
setCounter(0);
9+
}

‎examples/devcontainers/entrypoints/background.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default defineBackground(() => {
2+
console.log('Hello background!', { id: browser.runtime.id });
3+
});

‎examples/devcontainers/entrypoints/content.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default defineContentScript({
2+
matches: ["*://*.google.com/*"],
3+
main() {
4+
console.log("Hello content.");
5+
},
6+
});

‎examples/devcontainers/entrypoints/popup/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Default Popup Title</title>
7+
<meta name="manifest.type" content="browser_action" />
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="./main.ts"></script>
12+
</body>
13+
</html>

‎examples/devcontainers/entrypoints/popup/main.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import './style.css';
2+
import typescriptLogo from '@/assets/typescript.svg';
3+
import viteLogo from '/wxt.svg';
4+
import { setupCounter } from '@/components/counter';
5+
6+
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
7+
<div>
8+
<a href="https://wxt.dev" target="_blank">
9+
<img src="${viteLogo}" class="logo" alt="WXT logo" />
10+
</a>
11+
<a href="https://www.typescriptlang.org/" target="_blank">
12+
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
13+
</a>
14+
<h1>WXT + TypeScript</h1>
15+
<div class="card">
16+
<button id="counter" type="button"></button>
17+
</div>
18+
<p class="read-the-docs">
19+
Click on the WXT and TypeScript logos to learn more
20+
</p>
21+
</div>
22+
`;
23+
24+
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!);

‎examples/devcontainers/entrypoints/popup/style.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
-webkit-text-size-adjust: 100%;
15+
}
16+
17+
a {
18+
font-weight: 500;
19+
color: #646cff;
20+
text-decoration: inherit;
21+
}
22+
a:hover {
23+
color: #535bf2;
24+
}
25+
26+
body {
27+
margin: 0;
28+
display: flex;
29+
place-items: center;
30+
min-width: 320px;
31+
min-height: 100vh;
32+
}
33+
34+
h1 {
35+
font-size: 3.2em;
36+
line-height: 1.1;
37+
}
38+
39+
#app {
40+
max-width: 1280px;
41+
margin: 0 auto;
42+
padding: 2rem;
43+
text-align: center;
44+
}
45+
46+
.logo {
47+
height: 6em;
48+
padding: 1.5em;
49+
will-change: filter;
50+
transition: filter 300ms;
51+
}
52+
.logo:hover {
53+
filter: drop-shadow(0 0 2em #54bc4ae0);
54+
}
55+
.logo.vanilla:hover {
56+
filter: drop-shadow(0 0 2em #3178c6aa);
57+
}
58+
59+
.card {
60+
padding: 2em;
61+
}
62+
63+
.read-the-docs {
64+
color: #888;
65+
}
66+
67+
button {
68+
border-radius: 8px;
69+
border: 1px solid transparent;
70+
padding: 0.6em 1.2em;
71+
font-size: 1em;
72+
font-weight: 500;
73+
font-family: inherit;
74+
background-color: #1a1a1a;
75+
cursor: pointer;
76+
transition: border-color 0.25s;
77+
}
78+
button:hover {
79+
border-color: #646cff;
80+
}
81+
button:focus,
82+
button:focus-visible {
83+
outline: 4px auto -webkit-focus-ring-color;
84+
}
85+
86+
@media (prefers-color-scheme: light) {
87+
:root {
88+
color: #213547;
89+
background-color: #ffffff;
90+
}
91+
a:hover {
92+
color: #747bff;
93+
}
94+
button {
95+
background-color: #f9f9f9;
96+
}
97+
}

‎examples/devcontainers/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "wxt-starter",
3+
"description": "manifest.json description",
4+
"private": true,
5+
"version": "0.0.0",
6+
"type": "module",
7+
"scripts": {
8+
"dev": "wxt",
9+
"dev:firefox": "wxt -b firefox",
10+
"build": "wxt build",
11+
"build:firefox": "wxt build -b firefox",
12+
"zip": "wxt zip",
13+
"zip:firefox": "wxt zip -b firefox",
14+
"compile": "tsc --noEmit",
15+
"postinstall": "wxt prepare"
16+
},
17+
"devDependencies": {
18+
"typescript": "^5.8.2",
19+
"wxt": "^0.20.5"
20+
}
21+
}

‎examples/devcontainers/public/icon/128.png

3 KB
Loading

‎examples/devcontainers/public/icon/16.png

559 Bytes
Loading

‎examples/devcontainers/public/icon/32.png

916 Bytes
Loading

‎examples/devcontainers/public/icon/48.png

1.3 KB
Loading

‎examples/devcontainers/public/icon/96.png

2.31 KB
Loading

‎examples/devcontainers/public/wxt.svg

Lines changed: 15 additions & 0 deletions
Loading

‎examples/devcontainers/tsconfig.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "./.wxt/tsconfig.json"
3+
}

‎examples/devcontainers/wxt.config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { defineConfig } from 'wxt';
2+
3+
// See https://wxt.dev/api/config.html
4+
export default defineConfig({});

‎metadata.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,18 @@
9898
"storage"
9999
]
100100
},
101+
{
102+
"name": "Devcontainers",
103+
"description": "WXT browser extension using Dev Containers.",
104+
"searchText": "Devcontainers|WXT browser extension using Dev Containers.|browser.runtime.id|browser.runtime.getURL",
105+
"url": "https://github.com/wxt-dev/examples/tree/main/examples/devcontainers",
106+
"apis": [
107+
"browser.runtime.id",
108+
"browser.runtime.getURL"
109+
],
110+
"packages": [],
111+
"permissions": []
112+
},
101113
{
102114
"name": "Devtools Extension",
103115
"description": "Create an extension that adds to the browser's devtools.",

‎pnpm-lock.yaml

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)