This repository has been archived by the owner on Dec 15, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aac0efb
commit 6750170
Showing
1 changed file
with
2 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,58 +1,3 @@ | ||
# react-userscripts | ||
Develop a Greasemonkey/Tampermonkey script using React | ||
# SYNTAX+ | ||
|
||
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](https://addons.mozilla.org/en-CA/firefox/addon/greasemonkey/) or Tampermonkey. | ||
You can then test the userscript by installing it [here](https://github.com/siefkenj/react-userscripts/raw/master/dist/react-userscripts.user.js). | ||
Navigate to [google](https://www.google.com) and you should see a react component inserted at the bottom of the page. | ||
|
||
# Development | ||
|
||
## Building | ||
|
||
To build `react-userscripts` you must have [Node.js](https://nodejs.org/en/download/) and [npm](https://docs.npmjs.com/downloading-and-installing-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.) | ||
|
||
## Development and Dynamic Loading | ||
|
||
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](https://github.com/siefkenj/react-userscripts/raw/master/dist/react-userscripts-dev.user.js). | ||
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. | ||
|
||
## Known issues | ||
|
||
There is a specific issue happening under these conditions: | ||
* Developing with Firefox | ||
* Having [ViolentMonkey](https://github.com/violentmonkey/violentmonkey) <= 2.13.0 | ||
* Granting anything other than `@grant none` in 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](https://github.com/violentmonkey/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) | ||
## A userscript for syntax.eco |