├── userscript ├── src │ ├── userscript-header.js │ ├── index.css │ ├── App.css │ ├── App.tsx │ ├── index.tsx │ └── utils.js ├── .gitignore ├── package.json ├── vite.config.ts └── package-lock.json ├── dist └── react-userscripts-dev.user.js ├── README.md └── LICENSE /userscript/src/userscript-header.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name React Userscripts 3 | // @namespace https://github.com/siefkenj/react-userscripts 4 | // @version 1.1 5 | // @description A sample userscript built using react 6 | // @include https://*.google.com* 7 | // @grant none 8 | // ==/UserScript== 9 | 10 | -------------------------------------------------------------------------------- /userscript/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /userscript/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /userscript/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | } 8 | 9 | .App-header { 10 | background-color: #282c34; 11 | min-height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | font-size: calc(10px + 2vmin); 17 | color: white; 18 | } 19 | 20 | .App-link { 21 | color: #09d3ac; 22 | } 23 | -------------------------------------------------------------------------------- /userscript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-userscripts", 3 | "version": "1.1.0", 4 | "private": true, 5 | "type": "module", 6 | "dependencies": { 7 | "react": "^18.3.1", 8 | "react-dom": "^18.3.1", 9 | "vite": "^7.2.4" 10 | }, 11 | "scripts": { 12 | "start": "npm-run-all --parallel build:watch preview", 13 | "preview": "vite preview", 14 | "build:watch": "vite build --watch", 15 | "build": "vite build" 16 | }, 17 | "devDependencies": { 18 | "npm-run-all": "^4.1.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /userscript/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | return ( 6 |
9 | Edit src/App.js and save. Then, refresh the
10 | page.
11 |