extension 1.4.6 → 1.6.0-beta.0
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 +53 -27
- package/dist/cli.js +13 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension.svg?type=shield&issueType=license
|
|
13
13
|
[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension?ref=badge_shield&issueType=license
|
|
14
14
|
|
|
15
|
-
# Extension [![npm][npm-image]][npm-url] [![fossa][fossa-image]][fossa-url] [![workflow][action-image]][action-url] [![downloads][downloads-image]][downloads-url] [![PR's welcome][prs]][prs-url]
|
|
15
|
+
# Extension.js [![npm][npm-image]][npm-url] [![fossa][fossa-image]][fossa-url] [![workflow][action-image]][action-url] [![downloads][downloads-image]][downloads-url] [![PR's welcome][prs]][prs-url]
|
|
16
16
|
|
|
17
17
|
> Plug-and-play, zero-config, cross-browser extension development tool.
|
|
18
18
|
|
|
19
|
-
<img
|
|
19
|
+
<img alt="Extension.js with all the browser runners open" src="https://github.com/cezaraugusto/extension.js/assets/4672033/f0f5bbfc-e873-4856-9fdd-db2b42d9ab96">
|
|
20
20
|
|
|
21
21
|
<hr>
|
|
22
22
|
|
|
@@ -26,11 +26,9 @@
|
|
|
26
26
|
|
|
27
27
|
- [Create A New Extension](#create-a-new-extension) — How to create a new extension.
|
|
28
28
|
- [Get Started Immediately](#get-started-immediately) — Get work done in no time.
|
|
29
|
-
- [I have An Extension](#i-have-an-extension) - Use only specific parts of
|
|
29
|
+
- [I have An Extension](#i-have-an-extension) - Use only specific parts of Extension.js.
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
`extension` is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, React, and modern JavaScript.
|
|
31
|
+
Extension.js is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, and modern JavaScript.
|
|
34
32
|
|
|
35
33
|
## Create A New Extension
|
|
36
34
|
|
|
@@ -46,6 +44,16 @@ You are done. Time to hack on your extension!
|
|
|
46
44
|
|
|
47
45
|
https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586
|
|
48
46
|
|
|
47
|
+
## Web Standards and Modern JavaScript Support
|
|
48
|
+
|
|
49
|
+
For a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/n/getting-started/templates/).
|
|
50
|
+
|
|
51
|
+
| <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/c5f8a127-3c2a-4ceb-bb46-948cf2c8bd89" 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/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2" width="70"> |
|
|
52
|
+
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |
|
|
53
|
+
| ESNext<br>✅ | TypeScript<br>✅ | WASM<br>✅ | React<br>✅ | Vue<br>✅ | Angular<br>👋 | Svelte<br>👋 | Solid<br>👋 | Preact<br>👋 |
|
|
54
|
+
|
|
55
|
+
👋 = PR Welcome!
|
|
56
|
+
|
|
49
57
|
## Get Started Immediately
|
|
50
58
|
|
|
51
59
|
## Kickstart Any Sample from Chrome Extension Samples
|
|
@@ -70,7 +78,7 @@ https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553
|
|
|
70
78
|
|
|
71
79
|
### Use `Microsoft Edge` to kickstart any sample from [chrome-extesions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/)
|
|
72
80
|
|
|
73
|
-
|
|
81
|
+
Extension.js supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:
|
|
74
82
|
|
|
75
83
|
1. Open your terminal.
|
|
76
84
|
2. Navigate to your desired project directory.
|
|
@@ -107,11 +115,31 @@ npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-
|
|
|
107
115
|
|
|
108
116
|
https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00
|
|
109
117
|
|
|
118
|
+
### Run Mozilla Add-Ons On Firefox And Chrome
|
|
119
|
+
|
|
120
|
+
Need to run Firefox and Chrome at once? _Sem problemas_.
|
|
121
|
+
|
|
122
|
+
1. Navigate to your project directory.
|
|
123
|
+
2. Use the command:
|
|
124
|
+
```bash
|
|
125
|
+
# Ensure you either have a polyfill installed or --polyfill is set.
|
|
126
|
+
npx extension dev <addon-name> --browser=chrome,firefox --polyfill=true
|
|
127
|
+
```
|
|
128
|
+
This will fetch a Mozilla Add-On and adapt it for Chrome, or vice-versa.
|
|
129
|
+
|
|
130
|
+
> 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.
|
|
131
|
+
|
|
132
|
+
```sh
|
|
133
|
+
npx extension dev https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search --browser=chrome,firefox --polyfill=true
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
https://github.com/cezaraugusto/extension.js/assets/4672033/ac94b608-c936-40df-bce7-63ffd7fe31c5
|
|
137
|
+
|
|
110
138
|
## I have An Extension
|
|
111
139
|
|
|
112
140
|
https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c
|
|
113
141
|
|
|
114
|
-
If you have an existing extension which is using a package manager, you can install the
|
|
142
|
+
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. See the demo above or follow these instructions to get it done:
|
|
115
143
|
|
|
116
144
|
**Step 1 - Install extension as a `devDependency`**
|
|
117
145
|
|
|
@@ -119,18 +147,18 @@ If you have an existing extension which is using a package manager, you can inst
|
|
|
119
147
|
npm install extension --save-dev
|
|
120
148
|
```
|
|
121
149
|
|
|
122
|
-
**Step 2 - Link your npm scripts with the executable
|
|
150
|
+
**Step 2 - Link your npm scripts with the executable Extension.js commands**
|
|
123
151
|
|
|
124
|
-
```
|
|
152
|
+
```json5
|
|
125
153
|
{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
154
|
+
scripts: {
|
|
155
|
+
build: 'extension build',
|
|
156
|
+
dev: 'extension dev',
|
|
157
|
+
start: 'extension start'
|
|
130
158
|
},
|
|
131
|
-
|
|
132
|
-
// ...other
|
|
133
|
-
|
|
159
|
+
devDependencies: {
|
|
160
|
+
// ...other dependencies
|
|
161
|
+
extension: 'latest'
|
|
134
162
|
}
|
|
135
163
|
}
|
|
136
164
|
```
|
|
@@ -145,19 +173,17 @@ Done. You are all set!
|
|
|
145
173
|
|
|
146
174
|
### Desktop Browsers
|
|
147
175
|
|
|
148
|
-
|
|
176
|
+
| <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/6ce53a31-c6f6-4a1c-b927-e9ec7fd2df78" width="70"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/brave/brave.svg" width="70"> | <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/chromium/chromium.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 width="70" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari.svg"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/vivaldi/vivaldi.svg" width="70"> |
|
|
177
|
+
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |
|
|
178
|
+
| Arc<br>☑️ | Brave<br>☑️ | Chrome<br>✅ | Chromium<br>☑️ | Edge<br>✅ | Firefox<br>✅ | Opera<br>☑️ | Safari<br>⛔️ | Vivaldi<br>☑️ |
|
|
149
179
|
|
|
150
|
-
|
|
151
|
-
|-|-|-|-|-|-|-|
|
|
152
|
-
| Brave Browser | Google Chrome | Microsoft Edge | Mozilla Firefox | Opera Browser | Apple Safari | Vivaldi Browser |
|
|
153
|
-
| ☑️ | ✅ | ✅ | ⛔️ | ☑️ | ⛔️ | ☑️ |
|
|
180
|
+
☑️ = It is theoretically possible to load all Chromium forks given the current support for Chrome. There is a request ticket for [supporting all Chromium-based browsers](https://github.com/cezaraugusto/extension.js/issues/59). Most requested features are added first, so thumbs up it to speed-up the development process.
|
|
154
181
|
|
|
155
182
|
### Mobile Browsers
|
|
156
183
|
|
|
157
|
-
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg" width="
|
|
158
|
-
|
|
159
|
-
|
|
|
160
|
-
| ⛔️ | ⛔️ |
|
|
184
|
+
| <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/safari-ios/safari-ios.svg" width="70"> |
|
|
185
|
+
| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: |
|
|
186
|
+
| Firefox (Android)<br>⛔️ | Safari (iOS)<br>⛔️ |
|
|
161
187
|
|
|
162
188
|
If you want to target a specific browser, just pass the `--browser` flag to the `dev`/`start` command (based on the list available above), like `npx extension dev path/to/extension --browser=edge`.
|
|
163
189
|
|
|
@@ -168,7 +194,7 @@ If you want to target a specific browser, just pass the `--browser` flag to the
|
|
|
168
194
|
extension dev --browser=all
|
|
169
195
|
```
|
|
170
196
|
|
|
171
|
-
<img
|
|
197
|
+
<img alt="Extension.js with all the browser runners open" src="https://github.com/cezaraugusto/extension.js/assets/4672033/f0f5bbfc-e873-4856-9fdd-db2b42d9ab96">
|
|
172
198
|
|
|
173
199
|
## License
|
|
174
200
|
|
package/dist/cli.js
CHANGED
|
@@ -48,7 +48,7 @@ async function checkUpdates(packageJson) {
|
|
|
48
48
|
if (update) {
|
|
49
49
|
console.log(
|
|
50
50
|
`
|
|
51
|
-
Your \u{1F9E9} ${(0, import_safe.bold)("Extension")} version is ${(0, import_safe.red)("outdated")}.
|
|
51
|
+
Your \u{1F9E9} ${(0, import_safe.bold)("Extension.js")} version is ${(0, import_safe.red)("outdated")}.
|
|
52
52
|
The latest version is ${(0, import_safe.bold)(update.latest)}. Please update!
|
|
53
53
|
`
|
|
54
54
|
);
|
|
@@ -84,7 +84,7 @@ function notImplemented(argument) {
|
|
|
84
84
|
// messages/programHelp.ts
|
|
85
85
|
function programHelp() {
|
|
86
86
|
return `
|
|
87
|
-
# Help center for the \u{1F9E9} Extension program
|
|
87
|
+
# Help center for the \u{1F9E9} Extension.js program
|
|
88
88
|
|
|
89
89
|
## Usage: \`extension [command] [options]\`
|
|
90
90
|
|
|
@@ -141,7 +141,7 @@ var package_default = {
|
|
|
141
141
|
node: ">=18"
|
|
142
142
|
},
|
|
143
143
|
name: "extension",
|
|
144
|
-
version: "1.
|
|
144
|
+
version: "1.6.0-beta.0",
|
|
145
145
|
description: "Create cross-browser extensions with no build configuration.",
|
|
146
146
|
main: "./dist/cli.js",
|
|
147
147
|
types: "./dist/cli.d.ts",
|
|
@@ -207,14 +207,13 @@ if (import_semver.default.lte(process.version, "18.0.0")) {
|
|
|
207
207
|
messages_default.unsupportedNodeVersion();
|
|
208
208
|
process.exit(1);
|
|
209
209
|
}
|
|
210
|
-
var
|
|
211
|
-
var isExtensionCreateNamespace = package_default.name !== "extension";
|
|
210
|
+
var extensionJs = import_commander.program;
|
|
212
211
|
if (process.env.EXTENSION_ENV === "development") {
|
|
213
212
|
console.log(`Running extension via ${package_default.name}...`);
|
|
214
213
|
}
|
|
215
|
-
|
|
216
|
-
var vendors = (browser) => browser === "all" ? "chrome,edge".split(",") : browser.split(",");
|
|
217
|
-
|
|
214
|
+
extensionJs.name(package_default.name).description(package_default.description).version(package_default.version).addHelpText("after", messages_default.programHelp());
|
|
215
|
+
var vendors = (browser) => browser === "all" ? "chrome,edge,firefox".split(",") : browser.split(",");
|
|
216
|
+
extensionJs.command("create").arguments("<project-name|project-path>").usage("create <project-name|project-path> [options]").description("Creates a new extension.").option(
|
|
218
217
|
"-t, --template <template-name>",
|
|
219
218
|
"specify a template for the created project"
|
|
220
219
|
).action(async function(pathOrRemoteUrl, {
|
|
@@ -254,7 +253,7 @@ extensionCreate.command("create").arguments("<project-name|project-path>").usage
|
|
|
254
253
|
break;
|
|
255
254
|
}
|
|
256
255
|
});
|
|
257
|
-
|
|
256
|
+
extensionJs.command("dev").arguments("[project-path|remote-url]").usage("dev [project-path|remote-url] [options]").description("Starts the development server (development mode)").option(
|
|
258
257
|
"-u, --user-data-dir <path-to-file | boolean>",
|
|
259
258
|
"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"
|
|
260
259
|
).option(
|
|
@@ -265,7 +264,7 @@ extensionCreate.command("dev").arguments("[project-path|remote-url]").usage("dev
|
|
|
265
264
|
"whether or not to apply the cross-browser polyfill. Defaults to `true`"
|
|
266
265
|
).option(
|
|
267
266
|
"-p, --port <number>",
|
|
268
|
-
"what port should Extension run. Defaults to `3000`"
|
|
267
|
+
"what port should Extension.js run. Defaults to `3000`"
|
|
269
268
|
).action(async function(pathOrRemoteUrl, { browser = "chrome", ...devOptions }) {
|
|
270
269
|
for (const vendor of vendors(browser)) {
|
|
271
270
|
await (0, import_develop.extensionDev)(pathOrRemoteUrl, {
|
|
@@ -275,7 +274,7 @@ extensionCreate.command("dev").arguments("[project-path|remote-url]").usage("dev
|
|
|
275
274
|
});
|
|
276
275
|
}
|
|
277
276
|
});
|
|
278
|
-
|
|
277
|
+
extensionJs.command("start").arguments("[project-path|remote-url]").usage("start [project-path|remote-url] [options]").description("Starts the development server (production mode)").option(
|
|
279
278
|
"-u, --user-data-dir <path-to-file | boolean>",
|
|
280
279
|
"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"
|
|
281
280
|
).option(
|
|
@@ -286,7 +285,7 @@ extensionCreate.command("start").arguments("[project-path|remote-url]").usage("s
|
|
|
286
285
|
"whether or not to apply the cross-browser polyfill. Defaults to `true`"
|
|
287
286
|
).option(
|
|
288
287
|
"-p, --port <number>",
|
|
289
|
-
"what port should Extension run. Defaults to `3000`"
|
|
288
|
+
"what port should Extension.js run. Defaults to `3000`"
|
|
290
289
|
).action(async function(pathOrRemoteUrl, { browser = "chrome", ...startOptions }) {
|
|
291
290
|
for (const vendor of vendors(browser)) {
|
|
292
291
|
await (0, import_develop.extensionStart)(pathOrRemoteUrl, {
|
|
@@ -296,7 +295,7 @@ extensionCreate.command("start").arguments("[project-path|remote-url]").usage("s
|
|
|
296
295
|
});
|
|
297
296
|
}
|
|
298
297
|
});
|
|
299
|
-
|
|
298
|
+
extensionJs.command("build").arguments("[project-name]").usage("build [path-to-remote-extension] [options]").description("Builds the extension for production").option(
|
|
300
299
|
"-b, --browser <chrome | edge>",
|
|
301
300
|
"specify a browser to run your extension in development mode"
|
|
302
301
|
).option(
|
|
@@ -310,4 +309,4 @@ extensionCreate.command("build").arguments("[project-name]").usage("build [path-
|
|
|
310
309
|
});
|
|
311
310
|
}
|
|
312
311
|
});
|
|
313
|
-
|
|
312
|
+
extensionJs.parse();
|
package/package.json
CHANGED