Repository files navigation

1. To develop your own user script with Solidjs, you first need to clone the project.

gh repo clone Ferhatduran55/solidjs-userscript

2. Then download the requirements:usingpnpm

pnpm install

ornpm

npm install

3. After the download is completed, you can adjust the userscript object inpackage.json as you wish by using thesetup guide. You can adjust the user script's metadata using the child meta object, where some adjustments come by default and you don't need to type them.

{..."userscript": {"entry":"./dist/index.js","dev":"./dist","release":"./release","fileName":"index","meta": {"name":"new userscript","namespace":"http://tampermonkey.net/","version":"0.0.0","description":"new userscript","author":"You","match": ["*://*.*"      ],"grant":"GM_addStyle"    }  },...}

Note:userscript.meta.grant = "GM_addStyle" or[... ,"GM_addStyle"] Depending on thegrant value in thepackage.json,tailwindcss styles are injected into the page using thegreasemonkey API, so do not remove this part. If you are going to remove it, update theinjectCode section in thevite.config.js file according to your own code.Style injection code:

exportdefaultdefineConfig({  ...plugins:[    ...cssInjectedByJsPlugin({injectCode:(cssCode,options)=>{return`try{if(typeof document != 'undefined'){GM.addStyle(${cssCode});}}catch(e){console.error('vite-plugin-css-injected-by-js', e);}`;},}),    ...],  ...});

4. After setting, we build the user script using the commands defined inpackage.json can usecommand guide

{..."scripts": {"build":"vite build && userscript-builder --mode dev","release:bugfix":"vite build && userscript-builder --mode bugfix","release:minor":"vite build && userscript-builder --mode minor","release:major":"vite build && userscript-builder --mode major"  },...}

5.After it is build, user script will be created in thedist folder by default.

pnpm build

If it is release, user script will be created in therelease folder by default.

pnpm release:bugfix

These names are userscript.entry, userscript.dev, userscript.release and userscript.fileName values comes from inpackage.json.

userscript.entry: First of all, the Solidjs project is built with vite and this file is saved in the dist folder, this value is the name of the saved file and the user script is created using this file.

userscript.dev: The location where the user script will be saved when it is built.

userscript.release: The location where the user script will be saved when release.

userscript.fileName: The new filename that the user script will receive when it is saved to its defined location, for example[name].user.js.

There is a Countdown timer in the repository, you can use it to test.You can find the files by following the “index.jsx” code under src.you are free