extension 1.3.0 → 1.4.0-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 +113 -55
- package/dist/cli.js +3 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,34 +1,41 @@
|
|
|
1
|
-
[action-image]: https://github.com/cezaraugusto/extension
|
|
2
|
-
[action-url]: https://github.com/cezaraugusto/extension
|
|
3
|
-
[npm-image]: https://img.shields.io/npm/v/extension
|
|
4
|
-
[npm-url]: https://npmjs.org/package/extension
|
|
5
|
-
[downloads-image]: https://img.shields.io/npm/dm/extension
|
|
6
|
-
[downloads-url]: https://npmjs.org/package/extension
|
|
7
|
-
[node]: https://img.shields.io/node/v/extension
|
|
1
|
+
[action-image]: https://github.com/cezaraugusto/extension/actions/workflows/ci.yml/badge.svg?branch=main
|
|
2
|
+
[action-url]: https://github.com/cezaraugusto/extension/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
8
|
[node-url]: https://nodejs.org
|
|
9
9
|
[prs]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
|
|
10
|
-
[prs-url]: https://github.com/cezaraugusto/extension
|
|
11
|
-
[vunlerabilities]: https://snyk.io/test/github/cezaraugusto/extension
|
|
12
|
-
[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension
|
|
13
|
-
[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension
|
|
10
|
+
[prs-url]: https://github.com/cezaraugusto/extension/blob/main/CONTRIBUTING.md
|
|
11
|
+
[vunlerabilities]: https://snyk.io/test/github/cezaraugusto/extension/badge.svg
|
|
12
|
+
[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension.svg?type=shield&issueType=license
|
|
13
|
+
[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension?ref=badge_shield&issueType=license
|
|
14
14
|
|
|
15
|
-
# extension
|
|
15
|
+
# npx 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]
|
|
16
|
+
|
|
17
|
+
> Plug-and-play, zero-config, cross-browser extension development tool.
|
|
18
|
+
|
|
19
|
+
<img width="1440" alt="Screenshot 2024-03-25 at 13 06 15" src="https://github.com/cezaraugusto/docs.extensioncreate.com/assets/4672033/01a90694-4705-416e-898c-20bf845984e7">
|
|
20
|
+
|
|
21
|
+
<hr>
|
|
16
22
|
|
|
17
23
|
<img alt="Logo" align="right" src="https://user-images.githubusercontent.com/4672033/102850460-4d22aa80-43f8-11eb-82db-9efce586f73e.png" width="25%" />
|
|
18
24
|
|
|
19
|
-
|
|
25
|
+
__Create cross-browser extensions with no build configuration.__
|
|
20
26
|
|
|
21
|
-
- [
|
|
22
|
-
- [
|
|
23
|
-
- [I have
|
|
27
|
+
- [Create A New Extension](#create-a-new-extension) — How to create a new extension.
|
|
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 `extension`.
|
|
24
30
|
|
|
25
|
-
`extension
|
|
31
|
+
<!-- `extension` is a development tool for browser extensions with built-in support for TypeScript, WebAssembly, React, and modern JavaScript. -->
|
|
32
|
+
`extension` is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, React, and modern JavaScript.
|
|
26
33
|
|
|
27
|
-
##
|
|
34
|
+
## Create A New Extension
|
|
28
35
|
|
|
29
36
|
```sh
|
|
30
|
-
npx extension
|
|
31
|
-
cd my-extension
|
|
37
|
+
npx extension create my-extension
|
|
38
|
+
cd my-extension
|
|
32
39
|
npm run dev
|
|
33
40
|
```
|
|
34
41
|
|
|
@@ -36,71 +43,122 @@ A new browser instance will open up with your extension ready for development.
|
|
|
36
43
|
|
|
37
44
|
You are done. Time to hack on your extension!
|
|
38
45
|
|
|
39
|
-
|
|
40
|
-
<img src="https://user-images.githubusercontent.com/4672033/106184765-ba0c2b80-6180-11eb-9d0f-d9d00d168290.gif" width="720" alt="npm start">
|
|
41
|
-
</p>
|
|
46
|
+
https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586
|
|
42
47
|
|
|
43
|
-
##
|
|
48
|
+
## Get Started Immediately
|
|
44
49
|
|
|
45
|
-
|
|
50
|
+
## Kickstart Any Sample from Chrome Extension Samples
|
|
46
51
|
|
|
47
|
-
|
|
52
|
+
Dive right into development by starting with a sample from the Chrome Extension Samples repository. It's a great way to get acquainted with best practices and save time:
|
|
48
53
|
|
|
49
|
-
|
|
54
|
+
1. Open your terminal.
|
|
55
|
+
2. Navigate to the directory where you want your project.
|
|
56
|
+
3. Run the command:
|
|
57
|
+
```bash
|
|
58
|
+
npx extension dev <sample-name>
|
|
59
|
+
```
|
|
60
|
+
Replace `<sample-name>` with the name of the sample you wish to use from [Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
|
|
50
61
|
|
|
51
|
-
|
|
62
|
+
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).
|
|
52
63
|
|
|
53
64
|
```sh
|
|
54
|
-
|
|
55
|
-
# 1. Download the Chrome extension sample URL to the current working directory
|
|
56
|
-
# 2. Bundle the downloaded extension using extension-create
|
|
57
|
-
# 3. Enable the extension in Chrome using a fresh user profile
|
|
58
|
-
npx extension-create dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder
|
|
65
|
+
npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge
|
|
59
66
|
```
|
|
60
67
|
|
|
61
|
-
|
|
62
|
-
<img src="https://user-images.githubusercontent.com/4672033/106188671-04dc7200-6186-11eb-940a-52aebab46f31.gif" width="720" alt="npm start">
|
|
63
|
-
</p>
|
|
64
|
-
|
|
65
|
-
Will not only download the extension but also kickstart a Chrome instance in a fresh profile with your sample extension loaded and default auto-reload support. Try it yourself!
|
|
68
|
+
https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1
|
|
66
69
|
|
|
67
70
|
### Use `Microsoft Edge` to kickstart any sample from [chrome-extesions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/)
|
|
68
71
|
|
|
69
|
-
|
|
72
|
+
`extension` supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:
|
|
73
|
+
|
|
74
|
+
1. Open your terminal.
|
|
75
|
+
2. Navigate to your desired project directory.
|
|
76
|
+
3. Execute:
|
|
77
|
+
```bash
|
|
78
|
+
npx extension dev <sample-name> --browser=edge
|
|
79
|
+
```
|
|
80
|
+
Tailor your command by replacing `<sample-name>` with the specific sample you're interested in.
|
|
81
|
+
|
|
82
|
+
> 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) using Edge as the runtime browser.
|
|
83
|
+
|
|
84
|
+
```sh
|
|
85
|
+
npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
https://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa
|
|
89
|
+
|
|
90
|
+
### Run Mozilla Add-Ons Using Edge
|
|
91
|
+
|
|
92
|
+
Bridge the gap between Firefox and Edge by running Mozilla Add-Ons using Edge:
|
|
93
|
+
|
|
94
|
+
1. Navigate to your project directory.
|
|
95
|
+
2. Use the command:
|
|
96
|
+
```bash
|
|
97
|
+
npx extension dev <addon-name> --browser=edge --polyfill=true
|
|
98
|
+
```
|
|
99
|
+
This will fetch a Mozilla Add-On and adapt it for Edge.
|
|
100
|
+
|
|
101
|
+
> 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.
|
|
70
102
|
|
|
71
103
|
```sh
|
|
72
|
-
npx extension
|
|
104
|
+
npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
|
|
73
105
|
```
|
|
74
106
|
|
|
75
|
-
|
|
107
|
+
https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00
|
|
76
108
|
|
|
77
|
-
## I have
|
|
109
|
+
## I have An Extension
|
|
78
110
|
|
|
79
|
-
|
|
111
|
+
https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c
|
|
80
112
|
|
|
81
|
-
|
|
113
|
+
If you have an existing extension which is using a package manager, you can install the `extension` package and manually create the scripts used to run your extension. See the demo above or follow these instructions to get it done:
|
|
114
|
+
|
|
115
|
+
**Step 1 - Install extension as a `devDependency`**
|
|
116
|
+
|
|
117
|
+
```sh
|
|
118
|
+
npm install extension --save-dev
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
**Step 2 - Link your npm scripts with the executable `extension` commands**
|
|
122
|
+
|
|
123
|
+
```json
|
|
82
124
|
{
|
|
83
|
-
// ...npm stuff,
|
|
84
125
|
"scripts": {
|
|
85
|
-
"
|
|
86
|
-
"dev": "
|
|
87
|
-
"
|
|
126
|
+
"build": "extension build",
|
|
127
|
+
"dev": "extension dev",
|
|
128
|
+
"start": "extension start"
|
|
88
129
|
},
|
|
89
130
|
"devDependencies": {
|
|
90
|
-
|
|
131
|
+
// ...other deps,s
|
|
132
|
+
"extension": "latest"
|
|
91
133
|
}
|
|
92
134
|
}
|
|
93
135
|
```
|
|
94
136
|
|
|
95
|
-
|
|
137
|
+
Done. You are all set!
|
|
138
|
+
|
|
139
|
+
- To develop the extension, run `npm run dev`.
|
|
140
|
+
- To visualize the extension in production mode, run `npm run start`.
|
|
141
|
+
- To build the extension in production mode, run `npm run build`.
|
|
96
142
|
|
|
97
|
-
|
|
98
|
-
| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
99
|
-
| Google Chrome ✅ | Microsoft Edge ✅ | Mozilla Firefox ⛔️ | Apple Safari ⛔️ | Opera browser ⛔️ | Chromium (forks) 🤔 |
|
|
143
|
+
## Using a specific browser for development
|
|
100
144
|
|
|
101
|
-
|
|
145
|
+
### Desktop Browsers
|
|
146
|
+
|
|
147
|
+
☑️ = Likely works but no browser runner support yet.
|
|
148
|
+
|
|
149
|
+
|  |  |  |  |  | <img width="110" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari.svg">|  |
|
|
150
|
+
|-|-|-|-|-|-|-|
|
|
151
|
+
|
|
152
|
+
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`.
|
|
153
|
+
|
|
154
|
+
> Hint
|
|
155
|
+
> Pass --browser="all" to load all available browsers at once.
|
|
156
|
+
|
|
157
|
+
```sh
|
|
158
|
+
extension dev --browser=all
|
|
159
|
+
```
|
|
102
160
|
|
|
103
|
-
|
|
161
|
+
<img width="1440" alt="Screenshot 2024-03-25 at 13 06 15" src="https://github.com/cezaraugusto/docs.extensioncreate.com/assets/4672033/01a90694-4705-416e-898c-20bf845984e7">
|
|
104
162
|
|
|
105
163
|
## License
|
|
106
164
|
|
package/dist/cli.js
CHANGED
|
@@ -139,12 +139,13 @@ var package_default = {
|
|
|
139
139
|
node: ">=18"
|
|
140
140
|
},
|
|
141
141
|
name: "extension",
|
|
142
|
-
version: "1.
|
|
142
|
+
version: "1.4.0-0",
|
|
143
143
|
description: "Create cross-browser extensions with no build configuration.",
|
|
144
144
|
main: "./dist/cli.js",
|
|
145
145
|
types: "./dist/cli.d.ts",
|
|
146
146
|
files: [
|
|
147
|
-
"dist"
|
|
147
|
+
"dist",
|
|
148
|
+
"README.md"
|
|
148
149
|
],
|
|
149
150
|
bin: {
|
|
150
151
|
extension: "./dist/cli.js",
|
package/package.json
CHANGED
|
@@ -9,12 +9,13 @@
|
|
|
9
9
|
"node": ">=18"
|
|
10
10
|
},
|
|
11
11
|
"name": "extension",
|
|
12
|
-
"version": "1.
|
|
12
|
+
"version": "1.4.0-0",
|
|
13
13
|
"description": "Create cross-browser extensions with no build configuration.",
|
|
14
14
|
"main": "./dist/cli.js",
|
|
15
15
|
"types": "./dist/cli.d.ts",
|
|
16
16
|
"files": [
|
|
17
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
18
19
|
],
|
|
19
20
|
"bin": {
|
|
20
21
|
"extension": "./dist/cli.js",
|