A CLI tool to help build and run ReactJS based WebExtensions, integrating web-ext with create-react-app
Create ReactJS Web Extensions with no build configuration.
- No forked dependencies, uses create-react-app and web-ext as is, enabling you to easily keep up to date.
- Live reload of JavaScript and CSS as you work on your extension.
This is a work in progress extracted from 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.
web-ext-react should be used with a project created with create-react-app. After creating a new react app with create-react-app my-app install web-ext-react and web-ext.
npm install --save-dev web-ext web-ext-react
yarn add -D web-ext web-ext-react
Next you can add scripts to package.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" }
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.
if (document.isBackground) { // some background script } else if (document.isSidebarAction) { ReactDOM.render( <React.StrictMode> <Sidebar /> </React.StrictMode>, document.getElementById("root") ); } else if (document.isBrowserAction) { ReactDOM.render( <React.StrictMode> <Popup /> </React.StrictMode>, document.getElementById("root") ); } else if (document.isOptionsUi) { ReactDOM.render( <React.StrictMode> <Options /> </React.StrictMode>, document.getElementById("root") ); } else if (document.isContentScripts) { // content script ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); }
You must create an extension/manifest.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": ["<all_urls>"],
"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.
if (document.isBackground) { // some background script } else if (document.isContentScripts) { // content script ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); }