extension 2.0.0-rc.27 → 2.0.0-rc.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -77
- package/dist/cli.js +14 -11
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,126 +1,81 @@
|
|
|
1
|
-
[action-image]: https://github.com/extension-js/extension.js/actions/workflows/ci.yml/badge.svg?branch=main
|
|
2
|
-
[action-url]: https://github.com/extension-js/extension.js/actions
|
|
3
|
-
[npm-image]: https://img.shields.io/npm/v/extension.svg
|
|
4
|
-
[npm-url]: https://npmjs.org/package/extension
|
|
5
|
-
[downloads-image]: https://img.shields.io/npm/dm/extension.svg
|
|
6
|
-
[downloads-url]: https://npmjs.org/package/extension
|
|
7
|
-
[node]: https://img.shields.io/node/v/extension.svg
|
|
8
|
-
[node-url]: https://nodejs.org
|
|
9
|
-
[prs]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
|
|
10
|
-
[prs-url]: https://github.com/extension-js/extension/blob/main/CONTRIBUTING.md
|
|
11
|
-
[snyk-image]: https://snyk.io/test/github/extension-js/extension/badge.svg
|
|
12
|
-
[snyk-url]: https://snyk.io/test/github/extension-js/extension
|
|
13
1
|
[npm-version-image]: https://img.shields.io/npm/v/extension.svg?color=0971fe
|
|
14
2
|
[npm-version-url]: https://www.npmjs.com/package/extension
|
|
3
|
+
[downloads-image]: https://img.shields.io/npm/dm/extension.svg
|
|
4
|
+
[downloads-url]: https://npmjs.org/package/extension
|
|
5
|
+
[action-image]: https://github.com/extension-js/extension.js/actions/workflows/ci.yml/badge.svg?branch=main
|
|
6
|
+
[action-url]: https://github.com/extension-js/extension.js/actions
|
|
15
7
|
[discord-image]: https://img.shields.io/discord/1253608412890271755?label=Discord&logo=discord&style=flat
|
|
16
8
|
[discord-url]: https://discord.gg/v9h2RgeTSN
|
|
9
|
+
[snyk-image]: https://snyk.io/test/github/extension-js/extension/badge.svg
|
|
10
|
+
[snyk-url]: https://snyk.io/test/github/extension-js/extension
|
|
17
11
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
> The cross-browser extension framework.
|
|
12
|
+
> The cross-browser extension framework
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
# Extension.js [![Version][npm-version-image]][npm-version-url] [![Downloads][downloads-image]][downloads-url] [![workflow][action-image]][action-url] [![discord][discord-image]][discord-url]
|
|
23
15
|
|
|
24
|
-
<img alt="Logo" align="right" src="https://
|
|
16
|
+
<img alt="Logo" align="right" src="https://github.com/user-attachments/assets/698a3b2e-c77a-4857-bd2a-1d2eb180120b" width="20%" />
|
|
25
17
|
|
|
26
18
|
- [Create A New Extension](#create-a-new-extension) — How to create a new extension.
|
|
27
19
|
- [Get Started Immediately](#get-started-immediately) — Get work done in no time.
|
|
28
|
-
- [Start From
|
|
20
|
+
- [Start From An Example](https://github.com/extension-js/extension.js/tree/main/examples) — Start with your favorite tool.
|
|
29
21
|
- [I have An Extension](#i-have-an-extension) — Use only specific parts of Extension.js.
|
|
30
22
|
|
|
31
|
-
Extension.js makes it very easy to develop cross-browser extensions.<br />Developers
|
|
23
|
+
Extension.js makes it very easy to develop cross-browser extensions.<br />Developers prefer it for its fast builds, unified interface, and zero configuration setup.
|
|
32
24
|
|
|
33
25
|
## Create A New Extension
|
|
34
26
|
|
|
27
|
+
Use the `create` command to generate a new extension. Also works with pnpm, yarn, and bun.
|
|
28
|
+
|
|
35
29
|
```bash
|
|
36
|
-
npx extension create my-extension
|
|
30
|
+
npx extension@latest create my-extension
|
|
37
31
|
cd my-extension
|
|
38
32
|
npm run dev
|
|
39
33
|
```
|
|
40
34
|
|
|
35
|
+
### Watch Demo
|
|
36
|
+
|
|
41
37
|
https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586
|
|
42
38
|
|
|
43
39
|
## Web Standards and Framework Support
|
|
44
40
|
|
|
45
|
-
For a preview of extensions running these technologies, see the [templates](https://extension.land
|
|
41
|
+
<!-- For a preview of extensions running these technologies, see the [templates](https://templates.extension.land) website. -->
|
|
46
42
|
|
|
47
|
-
| <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/
|
|
43
|
+
| <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/de1082fd-7cf6-4202-8c12-a5c3cd3e5b42" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/78e5fe3d-dc79-4aa2-954e-1a5973d1d9db" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/c5f8a127-3c2a-4ceb-bb46-948cf2c8bd89" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2" width="70"> |
|
|
48
44
|
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |
|
|
49
|
-
| ESNext<br>latest | TypeScript<br>latest | WASM<br>latest | React<br>18+ | Vue<br>3+ |
|
|
45
|
+
| ESNext<br>latest | TypeScript<br>latest | WASM<br>latest | React<br>18+ | Vue<br>3+ | Svelte<br>5+ | Preact<br>10+ | Angular<br>👋 | Solid<br>👋 |
|
|
50
46
|
|
|
51
47
|
👋 = PR Welcome!
|
|
52
48
|
|
|
53
49
|
## Get Started Immediately
|
|
54
50
|
|
|
55
|
-
|
|
51
|
+
Start developing an extension using a sample from Chrome Extension Samples
|
|
56
52
|
|
|
57
|
-
|
|
53
|
+
See the example below where we request the sample [page-redder](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder) from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
|
|
58
54
|
|
|
59
|
-
|
|
60
|
-
npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge
|
|
61
|
-
```
|
|
55
|
+
### Watch Demo
|
|
62
56
|
|
|
63
57
|
https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1
|
|
64
58
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<!--
|
|
68
|
-
<details>
|
|
69
|
-
<summary>
|
|
70
|
-
🔥 Use Edge to start developing an extension from Chrome Extension Samples
|
|
71
|
-
</summary>
|
|
72
|
-
|
|
73
|
-
> See the example below where we request the sample [magic8ball](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball) from from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples) with Edge as the runtime browser.
|
|
59
|
+
### Try Yourself
|
|
74
60
|
|
|
75
61
|
```bash
|
|
76
|
-
npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/
|
|
62
|
+
npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge
|
|
77
63
|
```
|
|
78
64
|
|
|
79
|
-
https://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa
|
|
80
|
-
|
|
81
65
|
</details>
|
|
82
66
|
|
|
83
|
-
|
|
84
|
-
<summary>
|
|
85
|
-
🔥🔥 Use Edge to start developing a Mozilla Add-On from MDN WebExtensions Examples
|
|
86
|
-
</summary>
|
|
87
|
-
|
|
88
|
-
> See the example below where we request the sample [Apply CSS](https://github.com/mdn/webextensions-examples/tree/main/apply-css) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples) using Edge as the runtime browser.
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00
|
|
95
|
-
|
|
96
|
-
</details>
|
|
97
|
-
|
|
98
|
-
<details>
|
|
99
|
-
<summary>
|
|
100
|
-
🔥🔥🔥 Use Chrome and Firefox to start developing a Mozilla Add-On from MDN WebExtensions Examples
|
|
101
|
-
</summary>
|
|
102
|
-
|
|
103
|
-
> See the example below where we request the sample [firefox-code-search](https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples) using Chrome and Firefox as the runtime browsers.
|
|
104
|
-
|
|
105
|
-
```bash
|
|
106
|
-
npx extension dev https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search --browser=chrome,firefox --polyfill=true
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
https://github.com/cezaraugusto/extension.js/assets/4672033/ac94b608-c936-40df-bce7-63ffd7fe31c5
|
|
67
|
+
## I have An Extension
|
|
110
68
|
|
|
111
|
-
|
|
112
|
-
-->
|
|
69
|
+
If you have an existing extension which is using a package manager, you can install the Extension.js package and manually create the scripts used to run your extension.
|
|
113
70
|
|
|
114
|
-
|
|
71
|
+
### See How It Works
|
|
115
72
|
|
|
116
73
|
https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c
|
|
117
74
|
|
|
118
|
-
If you have an existing extension which is using a package manager, you can install the Extension.js package and manually create the scripts used to run your extension.
|
|
119
|
-
|
|
120
75
|
**Step 1 - Install extension as a `devDependency`**
|
|
121
76
|
|
|
122
77
|
```bash
|
|
123
|
-
npm install extension --save-dev
|
|
78
|
+
npm install extension@latest --save-dev
|
|
124
79
|
```
|
|
125
80
|
|
|
126
81
|
**Step 2 - Link your npm scripts with the executable Extension.js commands**
|
|
@@ -149,9 +104,9 @@ Done. You are all set!
|
|
|
149
104
|
|
|
150
105
|
### Desktop Browsers
|
|
151
106
|
|
|
152
|
-
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/
|
|
153
|
-
| :-----------------------------------------------------------------------------------------------------: |
|
|
154
|
-
| Chrome<br>✅ |
|
|
107
|
+
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge.svg" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera.svg" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari.svg" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium.svg" width="70"> |
|
|
108
|
+
| :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: |
|
|
109
|
+
| Chrome<br>✅ | Edge<br>✅ | Firefox<br>✅ | Opera<br>☑️ | Safari<br>⛔️ | Chromium<br>☑️ |
|
|
155
110
|
|
|
156
111
|
The browsers listed above represent those with official extension stores. Note that Chromium-based browsers (like Arc, Brave, Vivaldi, and many others) are theoretically supported through the Chrome/Chromium compatibility layer.
|
|
157
112
|
|
|
@@ -163,4 +118,4 @@ The browsers listed above represent those with official extension stores. Note t
|
|
|
163
118
|
|
|
164
119
|
## License
|
|
165
120
|
|
|
166
|
-
MIT (c) Cezar Augusto and the Extension.js
|
|
121
|
+
MIT (c) Cezar Augusto and the Extension.js Authors.
|
package/dist/cli.js
CHANGED
|
@@ -86,7 +86,7 @@ async function check_updates_checkUpdates(packageJson) {
|
|
|
86
86
|
}
|
|
87
87
|
if (update && isStableVersion(update.latest)) console.log(checkUpdates(packageJson, update));
|
|
88
88
|
}
|
|
89
|
-
var package_namespaceObject = JSON.parse('{"license":"MIT","repository":{"type":"git","url":"https://github.com/cezaraugusto/extension.git","directory":"programs/cli"},"engines":{"node":">=18"},"exports":{".":{"types":"./dist/cli.d.ts","import":"./dist/cli.js","require":"./dist/cli.js"}},"main":"./dist/cli.js","types":"./dist/cli.d.ts","files":["dist"],"bin":{"extension":"./dist/cli.js"},"name":"extension","version":"2.0.0-rc.
|
|
89
|
+
var package_namespaceObject = JSON.parse('{"license":"MIT","repository":{"type":"git","url":"https://github.com/cezaraugusto/extension.git","directory":"programs/cli"},"engines":{"node":">=18"},"exports":{".":{"types":"./dist/cli.d.ts","import":"./dist/cli.js","require":"./dist/cli.js"}},"main":"./dist/cli.js","types":"./dist/cli.d.ts","files":["dist"],"bin":{"extension":"./dist/cli.js"},"name":"extension","version":"2.0.0-rc.29","description":"Create cross-browser extensions with no build configuration.","author":{"name":"Cezar Augusto","email":"boss@cezaraugusto.net","url":"https://cezaraugusto.com"},"scripts":{"watch":"rslib build --watch","compile:types":"bash install_scripts.sh","compile:readme-files":"node ./scripts/copyMarkdownFilesToCli.js","compile:cli":"rslib build","compile":"pnpm compile:readme-files && pnpm compile:cli && pnpm compile:types","clean":"rm -rf dist","test":"echo \\"Note: no test specified\\" && exit 0","test:cli":"vitest run"},"keywords":["zero-config","build","develop","browser","extension","chrome extension","edge extension","firefox extension","safari extension","web","react","typescript"],"dependencies":{"chalk":"^5.3.0","@types/chrome":"^0.0.287","@types/firefox-webext-browser":"^120.0.4","@types/node":"^22.10.1","@types/react":"^19.0.1","@types/react-dom":"^19.0.1","commander":"^12.1.0","extension-create":"workspace:*","extension-develop":"workspace:*","semver":"^7.6.3","update-check":"^1.5.4","webextension-polyfill":"^0.12.0"},"devDependencies":{"@rslib/core":"^0.6.9","@types/mock-fs":"^4.13.4","@types/semver":"^7.5.8","mock-fs":"^5.4.1","tsconfig":"*","typescript":"5.7.2"}}');
|
|
90
90
|
check_updates_checkUpdates(package_namespaceObject);
|
|
91
91
|
const extensionJs = external_commander_namespaceObject.program;
|
|
92
92
|
const vendors = (browser)=>'all' === browser ? 'chrome,edge,firefox'.split(',') : browser.split(',');
|
|
@@ -99,16 +99,19 @@ extensionJs.command('create').arguments('<project-name|project-path>').usage('cr
|
|
|
99
99
|
});
|
|
100
100
|
});
|
|
101
101
|
extensionJs.command('dev').arguments('[project-path|remote-url]').usage('dev [project-path|remote-url] [options]').description('Starts the development server (development mode)').option('--profile <path-to-file | boolean>', 'what path to use for the browser profile. A boolean value of false sets the profile to the default user profile. Defaults to a fresh profile').option('--browser <chrome | edge | firefox>', 'specify a browser to preview your extension in production mode. Defaults to `chrome`').option('--chromium-binary <path-to-binary>', 'specify a path to the Chromium binary. This option overrides the --browser setting. Defaults to the system default').option('--gecko-binary <path-to-binary>', 'specify a path to the Gecko binary. This option overrides the --browser setting. Defaults to the system default').option('--polyfill [boolean]', 'whether or not to apply the cross-browser polyfill. Defaults to `false`').option('--open [boolean]', 'whether or not to open the browser automatically. Defaults to `true`').option('--starting-url <url>', 'specify the starting URL for the browser. Defaults to `undefined`').option('--port <port>', 'specify the port to use for the development server. Defaults to `8080`').action(async function(pathOrRemoteUrl, { browser = 'chrome', ...devOptions }) {
|
|
102
|
-
for (const vendor of vendors(browser))
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
102
|
+
for (const vendor of vendors(browser)){
|
|
103
|
+
var _devOptions_polyfill;
|
|
104
|
+
await (0, external_extension_develop_namespaceObject.extensionDev)(pathOrRemoteUrl, {
|
|
105
|
+
...devOptions,
|
|
106
|
+
profile: devOptions.profile,
|
|
107
|
+
browser: vendor,
|
|
108
|
+
chromiumBinary: devOptions.chromiumBinary,
|
|
109
|
+
geckoBinary: devOptions.geckoBinary,
|
|
110
|
+
polyfill: (null == (_devOptions_polyfill = devOptions.polyfill) ? void 0 : _devOptions_polyfill.toString()) !== 'false',
|
|
111
|
+
open: devOptions.open,
|
|
112
|
+
startingUrl: devOptions.startingUrl
|
|
113
|
+
});
|
|
114
|
+
}
|
|
112
115
|
});
|
|
113
116
|
extensionJs.command('start').arguments('[project-path|remote-url]').usage('start [project-path|remote-url] [options]').description('Starts the development server (production mode)').option('--profile <path-to-file | boolean>', 'what path to use for the browser profile. A boolean value of false sets the profile to the default user profile. Defaults to a fresh profile').option('--browser <chrome | edge | firefox>', 'specify a browser to preview your extension in production mode. Defaults to `chrome`').option('--polyfill [boolean]', 'whether or not to apply the cross-browser polyfill. Defaults to `true`').option('--chromium-binary <path-to-binary>', 'specify a path to the Chromium binary. This option overrides the --browser setting. Defaults to the system default').option('--gecko-binary <path-to-binary>', 'specify a path to the Gecko binary. This option overrides the --browser setting. Defaults to the system default').option('--starting-url <url>', 'specify the starting URL for the browser. Defaults to `undefined`').option('--port <port>', 'specify the port to use for the development server. Defaults to `8080`').action(async function(pathOrRemoteUrl, { browser = 'chrome', ...startOptions }) {
|
|
114
117
|
for (const vendor of vendors(browser))await (0, external_extension_develop_namespaceObject.extensionStart)(pathOrRemoteUrl, {
|
package/package.json
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"extension": "./dist/cli.js"
|
|
25
25
|
},
|
|
26
26
|
"name": "extension",
|
|
27
|
-
"version": "2.0.0-rc.
|
|
27
|
+
"version": "2.0.0-rc.29",
|
|
28
28
|
"description": "Create cross-browser extensions with no build configuration.",
|
|
29
29
|
"author": {
|
|
30
30
|
"name": "Cezar Augusto",
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
"semver": "^7.6.3",
|
|
57
57
|
"update-check": "^1.5.4",
|
|
58
58
|
"webextension-polyfill": "^0.12.0",
|
|
59
|
-
"extension-develop": "2.0.0-rc.
|
|
60
|
-
"extension-create": "2.0.0-rc.
|
|
59
|
+
"extension-develop": "2.0.0-rc.29",
|
|
60
|
+
"extension-create": "2.0.0-rc.29"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@rslib/core": "^0.6.9",
|