Tools for Deno-Powered Web Extensions
feat: barebones builds (#10)
- only copy static dir if existing
- only copy existing source files
- allow for using any combination of js/ts/jsx/tsx
- add barebones example
- adjust preact meta to distinguish from barebones
authored by
Ben Pevsner
and committed by
GitHub
53fe34a8
ad13d104
+106
-33
+7
-4
deno.json
+7
-4
deno.json
···
26
26
"exclude": ["dist", "examples"]
27
27
},
28
28
"tasks": {
29
-
"build": "(cd examples/preact && deno run -A ../../source/main.ts build)",
29
+
"build": "deno task build:preact && deno task build:barebones",
30
+
"build:barebones": "(cd examples/barebones && deno run -A ../../source/main.ts internal-dev-only-build)",
31
+
"build:preact": "(cd examples/preact && deno run -A ../../source/main.ts internal-dev-only-build)",
30
32
"check": "deno check source/main.ts && deno check source/mod.ts",
31
-
"dev": "(cd examples/preact && deno run -A ../../source/main.ts build -w)",
32
-
"test": "deno task test:source && deno task build && deno task test:examples && deno publish --dry-run --allow-dirty",
33
-
"test:examples": "(cd examples/preact && deno task test)",
33
+
"dev:barebones": "(cd examples/barebones && deno run -A ../../source/main.ts internal-dev-only-build -w)",
34
+
"dev:preact": "(cd examples/preact && deno run -A ../../source/main.ts internal-dev-only-build -w)",
35
+
"test": "deno task test:source && deno task build && deno task test:preact && deno publish --dry-run --allow-dirty",
36
+
"test:preact": "(cd examples/preact && deno task test)",
34
37
"test:source": "deno fmt && deno lint && deno task check && deno test source"
35
38
},
36
39
"test": {
+8
examples/barebones/.gitignore
+8
examples/barebones/.gitignore
+6
examples/barebones/README.md
+6
examples/barebones/README.md
+9
examples/barebones/deno.json
+9
examples/barebones/deno.json
+1
examples/barebones/source/content_script.js
+1
examples/barebones/source/content_script.js
···
1
+
globalThis.alert('Running Barebones Browser Extension')
+23
examples/barebones/source/manifest.json
+23
examples/barebones/source/manifest.json
···
1
+
{
2
+
"manifest_version": 3,
3
+
"name": "Barebones Browser Extension",
4
+
"description": "A browser Extension",
5
+
"version": "0.0.1",
6
+
"content_scripts": [
7
+
{
8
+
"matches": [
9
+
"*://*/*"
10
+
],
11
+
"js": [
12
+
"content_script.js"
13
+
],
14
+
"run_at": "document_end"
15
+
}
16
+
],
17
+
"permissions": [],
18
+
"applications": {
19
+
"gecko": {
20
+
"id": "browser-extension@my-extension-id-email.com"
21
+
}
22
+
}
23
+
}
+2
examples/preact/README.md
+2
examples/preact/README.md
···
2
2
3
3
A Preact-Rendered Chrome/Firefox extension built with Bext.
4
4
5
+
Note: Since is also used for internal dev. In your own app, the `browser` dependency should point to `jsr:@bpev/bext`. Also, the `internal-dev-only` tasks can be removed.
6
+
5
7
Uses:
6
8
7
9
- `background.ts` logs url to extension console for each new tab update
+8
-6
examples/preact/deno.json
+8
-6
examples/preact/deno.json
···
29
29
},
30
30
31
31
"tasks": {
32
-
"install": "deno install --name=bext-internal -Agf ../../source/main.ts",
33
-
"dev": "bext-internal --watch",
34
-
"build": "bext-internal",
35
-
"build:chrome": "bext-internal chrome",
36
-
"build:firefox": "bext-internal firefox",
32
+
"dev": "bext --watch",
33
+
"build": "bext",
34
+
"build:chrome": "bext chrome",
35
+
"build:firefox": "bext firefox",
37
36
"test": "deno task check && deno task test:unit && deno lint",
38
37
"test:unit": "deno test -A source",
39
38
"test:unit:update": "deno test -A -- --update source",
···
41
40
"check:background": "deno check source/background.ts",
42
41
"check:content_script": "deno check source/content_script.ts",
43
42
"check:options": "deno check source/options.tsx",
44
-
"check:popup": "deno check source/popup.tsx"
43
+
"check:popup": "deno check source/popup.tsx",
44
+
"bext-internal-dev-only-install": "deno install --name=bext-internal -Agf ../../source/main.ts",
45
+
"bext-internal-dev-only-dev": "bext-internal --watch",
46
+
"bext-internal-dev-only-build": "bext-internal"
45
47
}
46
48
}
+1
-1
examples/preact/source/content_script.ts
+1
-1
examples/preact/source/content_script.ts
+1
-1
examples/preact/source/manifest.json
+1
-1
examples/preact/source/manifest.json
examples/preact/static/icons/128.png
examples/preact/static/icons/128.png
This is a binary file and will not be displayed.
examples/preact/static/icons/256.png
examples/preact/static/icons/256.png
This is a binary file and will not be displayed.
examples/preact/static/icons/32.png
examples/preact/static/icons/32.png
This is a binary file and will not be displayed.
examples/preact/static/icons/48.png
examples/preact/static/icons/48.png
This is a binary file and will not be displayed.
examples/preact/static/icons/64.png
examples/preact/static/icons/64.png
This is a binary file and will not be displayed.
+3
-3
examples/preact/static/options.html
+3
-3
examples/preact/static/options.html
···
1
1
<!DOCTYPE html>
2
2
<html lang="en">
3
3
<head>
4
-
<title>Options</title>
5
-
<meta charset="utf-8" />
6
-
<link rel="stylesheet" href="styles/options.css" />
4
+
<title>Options</title>
5
+
<meta charset="utf-8" />
6
+
<link rel="stylesheet" href="styles/options.css" />
7
7
</head>
8
8
9
9
<body>
+3
-3
examples/preact/static/popup.html
+3
-3
examples/preact/static/popup.html
+1
-1
examples/preact/static/styles/options.css
+1
-1
examples/preact/static/styles/options.css
+1
examples/preact/static/styles/popup.css
+1
examples/preact/static/styles/popup.css
···
1
+
+32
-14
source/main.ts
+32
-14
source/main.ts
···
22
22
import * as esbuild from 'npm:esbuild@^0.23.0'
23
23
import { denoPlugins } from 'jsr:@luca/esbuild-deno-loader@^0.10.3'
24
24
import { parseArgs } from 'jsr:@std/cli@^1.0.0'
25
-
import { copySync, ensureDir } from 'jsr:@std/fs@^0.229.3'
26
-
import { resolve } from 'jsr:@std/path@^1.0.1'
25
+
import { copy, ensureDir, exists } from 'jsr:@std/fs@^0.229.3'
26
+
import { join, resolve } from 'jsr:@std/path@^1.0.1'
27
27
28
28
interface BrowserManifestSettings {
29
29
color: string
···
74
74
if (args._[0] === 'chrome') delete browsers.firefox
75
75
if (args._[0] === 'firefox') delete browsers.chrome
76
76
77
-
const entryPoints = [
78
-
'options.tsx',
79
-
'content_script.ts',
80
-
'background.ts',
81
-
'popup.tsx',
82
-
].map((file) => `${args.source}/${file}`)
77
+
const entryNames = [
78
+
'options',
79
+
'content_script',
80
+
'contentScript',
81
+
'background',
82
+
'popup',
83
+
]
84
+
const entryPoints: string[] = []
85
+
86
+
await Promise.all(entryNames.map(async (name) => {
87
+
const jsPath = `${args.source}/${name}.js`
88
+
const jsxPath = `${args.source}/${name}.jsx`
89
+
const tsPath = `${args.source}/${name}.ts`
90
+
const tsxPath = `${args.source}/${name}.tsx`
91
+
if (await exists(jsPath)) entryPoints.push(jsPath)
92
+
else if (await exists(jsxPath)) entryPoints.push(jsxPath)
93
+
else if (await exists(tsPath)) entryPoints.push(tsPath)
94
+
else if (await exists(tsxPath)) entryPoints.push(tsxPath)
95
+
}))
83
96
84
97
console.log('\x1b[37mPackager\n========\x1b[0m')
85
98
console.log(`Using paths:
86
-
Source: "${resolve(args.source)}"
87
-
Static: "${resolve(args.static)}"
99
+
source: "${resolve(args.source)}"
100
+
static: "${resolve(args.static)}"
88
101
output: "${resolve(args.output)}"
89
102
`)
90
103
104
+
await ensureDir(resolve(args.output))
105
+
91
106
const builds = Object.keys(browsers).map(async (browserId) => {
92
107
/** Browser-Specific Build Path */
93
-
const outdir = `${args.output}/${browserId}`
108
+
const outdir = join(args.output, browserId)
109
+
await ensureDir(resolve(outdir))
94
110
95
111
// Copy JS/HTML/CSS/ICONS
96
-
ensureDir(`${outdir}/static`)
112
+
if (await exists(args.static)) {
113
+
await ensureDir(join(outdir, 'static'))
97
114
98
-
const options = { overwrite: true }
99
-
copySync(args.static, outdir, options)
115
+
const options = { overwrite: true }
116
+
await copy(args.static, outdir, options)
117
+
}
100
118
101
119
const browserManifestSettings = browsers[browserId]
102
120