Develop a Greasemonkey/Tampermonkey script using React
This repository contains a stub project for developing userscript extensions with react. It uses
react-app-rewired to change the webpack configuration to compile React code so that it can be
included in a userscript.
In Firefox or Chrome, install Greasemonkey or Tampermonkey. You can then test the userscript by installing it here. Navigate to google and you should see a react component inserted at the bottom of the page.
To build react-userscripts you must have Node.js and npm.
Then, from the react-userscripts directory, run
cd userscript/
npm install
npm run build
When the build script completes, you should have a fresh version of the userscript located at dist/react-userscripts.user.js
(in the top-level dist/ directory). (Ignore the message provided on the console about serving the project; that message is for
developing a normal web application, not a userscript addon.)
When developing, it's nice to be able to get the newest version of your script upon a page
refresh. To do this, install the development version of react-userscripts script located
dist/react-userscripts-dev.user.js or click here.
The dev script will dynamically load the extension from port 8124, so you can take advantage of
create-react-app's ability to auto-recompile an app when the source changes.
Now, run
cd userscript/
npm install # if you haven't already
npm start
and a development server should start running on localhost:8124. Changing any files in userscript/src will trigger
and automatic recompile which will be served to the dev addon on the next page reload.
There is a specific issue happening under these conditions:
- Developing with Firefox
- Having ViolentMonkey <= 2.13.0
- Granting anything other than
@grant nonein your-dev.user.script.js
When executing the script made for dev mode, React will crash when a useEffect or useState hook is called. This is due to React being in dev mode running differently than in prod mode in order to help catch errors.
However, ViolentMonkey has a bug and does not correctly handle window and unsafeWindow and React tries to read from these variables and crashes.
The solution is to update to any version > 2.13.0 - (The latest beta versions have fixed the issue)