https://github.com/mrloop/web-ext-react
Command line tool to help build, run and test ReactJS based WebExtensions
https://github.com/mrloop/web-ext-react
react web-ext webextensions
Last synced: 10 months ago
JSON representation
Command line tool to help build, run and test ReactJS based WebExtensions
- Host: GitHub
- URL: https://github.com/mrloop/web-ext-react
- Owner: mrloop
- Created: 2020-08-20T14:45:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T21:20:24.000Z (about 4 years ago)
- Last Synced: 2025-04-19T11:53:18.941Z (10 months ago)
- Topics: react, web-ext, webextensions
- Language: JavaScript
- Homepage:
- Size: 420 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web-ext-react
A CLI tool to help build and run [ReactJS](https://reactjs.org/) based [WebExtensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions), integrating [web-ext](https://github.com/mozilla/web-ext) with [create-react-app](https://github.com/facebook/create-react-app)
## Highlights
Create ReactJS Web Extensions with no build configuration.
- No forked dependencies, uses [create-react-app](https://github.com/facebook/create-react-app) and [web-ext](https://github.com/mozilla/web-ext) as is, enabling you to easily keep up to date.
- Live reload of JavaScript and CSS as you work on your extension.
## Limitations
**This is a work in progress** extracted from [race-ext-react](https://github.com/mrloop/race-ext-react). Ideally `web-ext-react` would wrap `web-ext` and work as a drop in replacement for better ergonomics, while adding the additional React functionality.
## Documentation
`web-ext-react` should be used with a project created with [`create-react-app`](https://github.com/facebook/create-react-app#creating-an-app). After creating a new react app with `create-react-app my-app` install `web-ext-react` and `web-ext`.
### npm
```sh
npm install --save-dev web-ext web-ext-react
```
### yarn
```sh
yarn add -D web-ext web-ext-react
```
Next you can add scripts to `package.json`
```json
"scripts": {
"start:firefox": "web-ext-react run | xargs -L1 web-ext run -u http://www.example.org/ -s",
"build": "web-ext-react build | xargs -L1 web-ext build -o -s"
}
```
### index.js
`create-react-app` creates a single app that can be used for all different aspects of a web extensions, content scripts, background script, popups, sidebar and options ui by adding conditional logic to the `src/index.js` auto generated by `create-react-app`, for example.
```js
if (document.isBackground) {
// some background script
} else if (document.isSidebarAction) {
ReactDOM.render(
,
document.getElementById("root")
);
} else if (document.isBrowserAction) {
ReactDOM.render(
,
document.getElementById("root")
);
} else if (document.isOptionsUi) {
ReactDOM.render(
,
document.getElementById("root")
);
} else if (document.isContentScripts) {
// content script
ReactDOM.render(
,
document.getElementById("root")
);
}
```
### extension/manifest.json
You must create an `extension/manifest.json`
```json
{
"manifest_version": 2,
"name": "web-ext-react dummy app",
"version": "0.1",
"description": "dummy app to test web-ext-react",
"homepage_url": "https://github.com/mrloop/web-ext-react",
"icons": {
"48": "icon.svg",
"96": "icon.svg"
},
"content_scripts": [
{
"matches": [""],
"js": [],
"css": []
}
],
"background": {
"page": "background-page.html"
}
}
```
Note the "content_scripts" JS and CSS arrays are empty and will be populated at build time. We specify that the web extension will also run a background script, also note "background-page.html" is auto generated by `web-ext-react`. You don't need to add this yourself, the important part is the conditional invocation of different react components from `index.js`. For this `manifest.json` the `src/index.js` would contain code to run in the background and a content script conditional run depending on context run from.
```js
if (document.isBackground) {
// some background script
} else if (document.isContentScripts) {
// content script
ReactDOM.render(
,
document.getElementById("root")
);
}
```