Skip to content
This repository has been archived by the owner on Dec 15, 2023. It is now read-only.

Commit

Permalink
damb
Browse files Browse the repository at this point in the history
  • Loading branch information
Hellscaped committed Sep 12, 2023
1 parent aac0efb commit 6750170
Showing 1 changed file with 2 additions and 57 deletions.
59 changes: 2 additions & 57 deletions README.md
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

0 comments on commit 6750170

Please sign in to comment.