extension 1.5.0 → 1.6.0-beta.1
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 +52 -26
- package/dist/cli.js +5 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
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.js` 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.1",
|
|
145
145
|
description: "Create cross-browser extensions with no build configuration.",
|
|
146
146
|
main: "./dist/cli.js",
|
|
147
147
|
types: "./dist/cli.d.ts",
|
|
@@ -264,7 +264,7 @@ extensionJs.command("dev").arguments("[project-path|remote-url]").usage("dev [pr
|
|
|
264
264
|
"whether or not to apply the cross-browser polyfill. Defaults to `true`"
|
|
265
265
|
).option(
|
|
266
266
|
"-p, --port <number>",
|
|
267
|
-
"what port should Extension run. Defaults to `3000`"
|
|
267
|
+
"what port should Extension.js run. Defaults to `3000`"
|
|
268
268
|
).action(async function(pathOrRemoteUrl, { browser = "chrome", ...devOptions }) {
|
|
269
269
|
for (const vendor of vendors(browser)) {
|
|
270
270
|
await (0, import_develop.extensionDev)(pathOrRemoteUrl, {
|
|
@@ -285,7 +285,7 @@ extensionJs.command("start").arguments("[project-path|remote-url]").usage("start
|
|
|
285
285
|
"whether or not to apply the cross-browser polyfill. Defaults to `true`"
|
|
286
286
|
).option(
|
|
287
287
|
"-p, --port <number>",
|
|
288
|
-
"what port should Extension run. Defaults to `3000`"
|
|
288
|
+
"what port should Extension.js run. Defaults to `3000`"
|
|
289
289
|
).action(async function(pathOrRemoteUrl, { browser = "chrome", ...startOptions }) {
|
|
290
290
|
for (const vendor of vendors(browser)) {
|
|
291
291
|
await (0, import_develop.extensionStart)(pathOrRemoteUrl, {
|
package/package.json
CHANGED