|
1 | | -# react-userscripts |
2 | | -Develop a Greasemonkey/Tampermonkey script using React |
| 1 | +# SYNTAX+ |
3 | 2 |
|
4 | | -This repository contains a stub project for developing userscript extensions with react. It uses |
5 | | -`react-app-rewired` to change the webpack configuration to compile React code so that it can be |
6 | | -included in a userscript. |
7 | | - |
8 | | -In Firefox or Chrome, install [Greasemonkey](https://addons.mozilla.org/en-CA/firefox/addon/greasemonkey/) or Tampermonkey. |
9 | | -You can then test the userscript by installing it [here](https://github.com/siefkenj/react-userscripts/raw/master/dist/react-userscripts.user.js). |
10 | | -Navigate to [google](https://www.google.com) and you should see a react component inserted at the bottom of the page. |
11 | | - |
12 | | -# Development |
13 | | - |
14 | | -## Building |
15 | | - |
16 | | -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). |
17 | | -Then, from the `react-userscripts` directory, run |
18 | | - |
19 | | -``` |
20 | | -cd userscript/ |
21 | | -npm install |
22 | | -npm run build |
23 | | -``` |
24 | | - |
25 | | -When the build script completes, you should have a fresh version of the userscript located at `dist/react-userscripts.user.js` |
26 | | -(in the top-level `dist/` directory). (Ignore the message provided on the console about serving the project; that message is for |
27 | | -developing a normal web application, not a userscript addon.) |
28 | | - |
29 | | -## Development and Dynamic Loading |
30 | | - |
31 | | -When developing, it's nice to be able to get the newest version of your script upon a page |
32 | | -refresh. To do this, install the development version of `react-userscripts` script located |
33 | | -`dist/react-userscripts-dev.user.js` or click [here](https://github.com/siefkenj/react-userscripts/raw/master/dist/react-userscripts-dev.user.js). |
34 | | -The dev script will dynamically load the extension from port `8124`, so you can take advantage of |
35 | | -`create-react-app`'s ability to auto-recompile an app when the source changes. |
36 | | - |
37 | | -Now, run |
38 | | - |
39 | | -``` |
40 | | -cd userscript/ |
41 | | -npm install # if you haven't already |
42 | | -npm start |
43 | | -``` |
44 | | - |
45 | | -and a development server should start running on `localhost:8124`. Changing any files in `userscript/src` will trigger |
46 | | -and automatic recompile which will be served to the dev addon on the next page reload. |
47 | | - |
48 | | -## Known issues |
49 | | - |
50 | | -There is a specific issue happening under these conditions: |
51 | | -* Developing with Firefox |
52 | | -* Having [ViolentMonkey](https://github.com/violentmonkey/violentmonkey) <= 2.13.0 |
53 | | -* Granting anything other than `@grant none` in your `-dev.user.script.js` |
54 | | - |
55 | | -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. |
56 | | -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. |
57 | | - |
58 | | -The solution is to update to any version > 2.13.0 - (The latest beta versions have fixed the issue) |
| 3 | +## A userscript for syntax.eco |
0 commit comments