Mod Creation/Enabling DevTools for the Steam and Epic Clients: Difference between revisions
(added non-main branch instructions) |
(finally found <code></code> tags after being blind for so long on https://en.wikipedia.org/wiki/Help:Wikitext) |
||
Line 16: | Line 16: | ||
You only have to do this once. | You only have to do this once. | ||
<ol> | <ol> | ||
<li>Download Melvor Idle on Steam, and find the installation directory. e.g. [...]/steamapps/common/Melvor Idle</li> | <li>Download Melvor Idle on Steam, and find the installation directory. e.g. <code>[...]/steamapps/common/Melvor Idle</code></li> | ||
<li>Download the 0.49.2 version of NW.js SDK. The version might change in the future, but you need the specific one listed.</li> | <li>Download the 0.49.2 version of NW.js SDK. The version might change in the future, but you need the specific one listed.</li> | ||
<ul> | <ul> | ||
Line 34: | Line 34: | ||
</ul> | </ul> | ||
<li>Extract all zipped files.</li> | <li>Extract all zipped files.</li> | ||
<li>Place the contents of the nwjs-sdk* directory in the Melvor Idle installation directory.</li> | <li>Place the contents of the <code>nwjs-sdk*</code> directory in the Melvor Idle installation directory.</li> | ||
<li>Place the icons, styles, and source (i.e. scripts or sources) directories of the extracted extensions in the Melvor Idle installation directory.</li> | <li>Place the <code>icons</code>, <code>styles</code>, and source (i.e. <code>scripts</code> or <code>sources</code>) directories of the extracted extensions in the Melvor Idle installation directory.</li> | ||
</ol> | </ol> | ||
Line 43: | Line 43: | ||
<li>Open the game and load a character.</li> | <li>Open the game and load a character.</li> | ||
<li>Open the dev tools console (F12).</li> | <li>Open the dev tools console (F12).</li> | ||
<li>Set the context of the console to game.</li> | <li>Set the context of the console to <code>game</code>.</li> | ||
<ul> | <ul> | ||
<li>The top left of the console has a dropdown: change it from top to game (steam.melvoridle.com). After doing this, you can use the console.</li> | <li>The top left of the console has a dropdown: change it from <code>top</code> to <code>game (steam.melvoridle.com)</code>. After doing this, you can use the console.</li> | ||
</ul> | </ul> | ||
<li>Load the scripts and extensions you placed in the installation directory before.</li> | <li>Load the scripts and extensions you placed in the installation directory before.</li> | ||
Line 65: | Line 65: | ||
Do all the normal steps 1-5 of the Setup section then follow the below instructions. | Do all the normal steps 1-5 of the Setup section then follow the below instructions. | ||
<ol> | <ol> | ||
<li>Create a directory Extensions in the Melvor Idle installation directory.</li> | <li>Create a directory <code>Extensions</code> in the Melvor Idle installation directory.</li> | ||
<li>Make new directories for the extensions and scripts. e.g.</li> | <li>Make new directories for the extensions and scripts. e.g.</li> | ||
<pre> | <pre> | ||
Line 85: | Line 85: | ||
styles/ | styles/ | ||
</pre> | </pre> | ||
<li>Place the icons, styles, and source (i.e. scripts or sources) directories of the extracted extensions in the | <li>Place the <code>icons</code>, <code>styles</code>, and source (i.e. <code>scripts</code> or <code>sources</code>) directories of the extracted extensions in the Melvor Idle installation directory.</li> | ||
</ol> | </ol> | ||
Line 93: | Line 93: | ||
<li>Open the game and load a character.</li> | <li>Open the game and load a character.</li> | ||
<li>Open the dev tools console (F12).</li> | <li>Open the dev tools console (F12).</li> | ||
<li>Set the context of the console to game.</li> | <li>Set the context of the console to <code>game</code>.</li> | ||
<ul> | <ul> | ||
<li>The top left of the console has a dropdown: change it from top to game (steam.melvoridle.com). After doing this, you can use the console.</li> | <li>The top left of the console has a dropdown: change it from <code>top</code> to <code>game (steam.melvoridle.com)</code>. After doing this, you can use the console.</li> | ||
</ul> | </ul> | ||
<li>Load the scripts and extensions you placed in the installation directory before.</li> | <li>Load the scripts and extensions you placed in the installation directory before.</li> | ||
Line 122: | Line 122: | ||
<li>If you are using extensions, edit the main extension script so all source files and icons can be found.</li> | <li>If you are using extensions, edit the main extension script so all source files and icons can be found.</li> | ||
<ul> | <ul> | ||
<li>e.g. edit the paths in contentScript.js for Combat Simulator and SEMI.js for SEMI</li> | <li>e.g. edit the paths in <code>contentScript.js</code> for Combat Simulator and <code>SEMI.js</code> for SEMI</li> | ||
<pre> | <pre> | ||
Combat Simulator: | Combat Simulator: | ||
Line 143: | Line 143: | ||
/*insert all of the commands you would normally put in the console to load your scripts*/ | /*insert all of the commands you would normally put in the console to load your scripts*/ | ||
}, 15000);</pre> | }, 15000);</pre> | ||
<li>Add | <li>Add <code>"inject_js_end": "pathToYourFile/yourFileName.js"</code> to the parameters of <code>package.json</code></li> | ||
</ol> | </ol> | ||
Line 152: | Line 151: | ||
<ol> | <ol> | ||
<li>Navigate to https://gitlab.com/aldousWatts/SEMI or whichever repo you want.</li> | <li>Navigate to https://gitlab.com/aldousWatts/SEMI or whichever repo you want.</li> | ||
<li>On the left hand of the header, you should see a dropdown containing the word main. Click the dropdown, then select dev.</li> | <li>On the left hand of the header, you should see a dropdown containing the word <code>main</code>. Click the dropdown, then select <code>dev</code>.</li> | ||
<li>You should see a button in the header with a download icon. Click download, then .zip.</li> | <li>You should see a button in the header with a download icon. Click download, then .zip.</li> | ||
<li>After the download completes, put the folder wherever you like. Extract the zip.</li> | <li>After the download completes, put the folder wherever you like. Extract the zip.</li> | ||
<li>Open the link chrome://extensions/, enable Developer Mode in the top right.</li> | <li>Open the link <code>chrome://extensions/</code>, enable Developer Mode in the top right.</li> | ||
<li>Click the button Load unpacked in the header.</li> | <li>Click the button <code>Load unpacked</code> in the header.</li> | ||
<li>Navigate to the top-level directory of the unpacked extension. For SEMI, this is the one that contains the manifest, README, etc. Afterwards, click Select Folder.</li> | <li>Navigate to the top-level directory of the unpacked extension. For SEMI, this is the one that contains the manifest, README, etc. Afterwards, click <code>Select Folder</code>.</li> | ||
<li>After the extension loads, click update.</li> | <li>After the extension loads, click update.</li> | ||
<li>If you have the Chrome extension from the web store, ensure that you remove it.</li> | <li>If you have the Chrome extension from the web store, ensure that you remove it.</li> | ||
Line 167: | Line 166: | ||
<ol> | <ol> | ||
<li>Open your terminal to the location you want the folder to go.</li> | <li>Open your terminal to the location you want the folder to go.</li> | ||
<li>Type the command git clone [email protected]:aldousWatts/SEMI.git into your terminal.</li> | <li>Type the command <code>git clone [email protected]:aldousWatts/SEMI.git</code> into your terminal.</li> | ||
<li>After it finishes cloning into the folder, cd into the folder then run git fetch && git checkout <branchname>.</li> | <li>After it finishes cloning into the folder, cd into the folder then run <code>git fetch && git checkout <branchname></code>.</li> | ||
<li>Open the link chrome://extensions/, enable Developer Mode in the top right.</li> | <li>Open the link <code>chrome://extensions/</code>, enable Developer Mode in the top right.</li> | ||
<li>Click the button Load unpacked in the header.</li> | <li>Click the button <code>Load unpacked</code> in the header.</li> | ||
<li>Navigate to the top-level directory of the unpacked extension. For SEMI, this is the one that contains the manifest, README, etc. Afterwards, click Select Folder.</li> | <li>Navigate to the top-level directory of the unpacked extension. For SEMI, this is the one that contains the manifest, README, etc. Afterwards, click <code>Select Folder</code>.</li> | ||
<li>After the extension loads, click update.</li> | <li>After the extension loads, click update.</li> | ||
<li>If you have the Chrome extension from the web store, ensure that you remove it.</li> | <li>If you have the Chrome extension from the web store, ensure that you remove it.</li> |
Revision as of 23:32, 14 June 2021
This page was last updated for (v0.20). |
Disclaimer: It is highly recommended to BACKUP YOUR SAVE before running any scripts or extensions.
Disclaimer: Do not run code you can not understand or do not trust. Malicious code could be included in any script and extension.
Before You Begin
It's highly recommended before doing anything to
- back up your save by exporting or downloading the save file.
- read all instructions before following them.
- verify the code is not malicious.
Steam Console and Scripts
To use console commands, scripts, and extensions on Steam, follow the instructions in Setup and Loading Scripts. There is an alternate variation that may result in a cleaner Melvor Idle folder.
Setup
You only have to do this once.
- Download Melvor Idle on Steam, and find the installation directory. e.g.
[...]/steamapps/common/Melvor Idle
- Download the 0.49.2 version of NW.js SDK. The version might change in the future, but you need the specific one listed.
- 64bit Windows: https://dl.nwjs.io/v0.49.2/nwjs-sdk-v0.49.2-win-x64.zip
- 64bit Linux: https://dl.nwjs.io/v0.49.2/nwjs-sdk-v0.49.2-linux-x64.tar.gz
- Others: https://dl.nwjs.io/
- Download the scripts and extensions you want to use.
- Download from the script manager website. e.g. GreasyFork
- Download from the extension's browser store page.
- Download the source from the extension's repository. e.g.
- Extract all zipped files.
- Place the contents of the
nwjs-sdk*
directory in the Melvor Idle installation directory. - Place the
icons
,styles
, and source (i.e.scripts
orsources
) directories of the extracted extensions in the Melvor Idle installation directory.
Loading Scripts
Loading scripts must be run every time the game is opened on Steam.
- Open the game and load a character.
- Open the dev tools console (F12).
- Set the context of the console to
game
. - The top left of the console has a dropdown: change it from
top
togame (steam.melvoridle.com)
. After doing this, you can use the console. - Load the scripts and extensions you placed in the installation directory before.
- You can load SEMI like this:
- You can load the Combat Simulator like this:
- You can load user scripts like this, by changing the file name:
require('fs').readFile('scripts/SEMI.js', 'utf8', (err, data) => {eval(data);}) $(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/semi.css')}">`)
require('fs').readFile('sources/contentScript.js', 'utf8', (err, data) => {eval(data);}) $(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/mainStyle.css')}">`)
require('fs').readFile('relativePathToMyReallyCoolScript.js', 'utf8', (err, data) => {eval(data);})
Alternate Variation
The following variant results in a cleaner directory without potential file name clashes. Note that the above does not clash for Combat Simulator + SEMI at the moment.
Additional Setup
Do all the normal steps 1-5 of the Setup section then follow the below instructions.
- Create a directory
Extensions
in the Melvor Idle installation directory. - Make new directories for the extensions and scripts. e.g.
- Place the
icons
,styles
, and source (i.e.scripts
orsources
) directories of the extracted extensions in the Melvor Idle installation directory.
Extensions/ Greasy Fork/ Melvor Completion Log Helper.js Melvor Idle - Timestamped Saves.js Melvor-ETA/ time-remaining.js MICS-steam/ icons/ sources/ styles/ scripts/ nameOfMyReallyCoolScript.js SEMI-steam/ icons/ scripts/ styles/
Alternate Variation Loading Scripts
If you followed the alternate variation setup steps, you will have to load scripts slightly differently.
- Open the game and load a character.
- Open the dev tools console (F12).
- Set the context of the console to
game
. - The top left of the console has a dropdown: change it from
top
togame (steam.melvoridle.com)
. After doing this, you can use the console. - Load the scripts and extensions you placed in the installation directory before.
- If you are using extensions, edit the main extension script so all source files and icons can be found.
- e.g. edit the paths in
contentScript.js
for Combat Simulator andSEMI.js
for SEMI
[ // own 'Extensions/scripts/nameOfMyReallyCoolScript.js', 'Extensions/Melvor-ETA/time-remaining.js', // extensions // other than the main script, extensions typically also require the insertion of a css file 'Extensions/MICS-steam/sources/contentScript.js', //'Extensions/SEMI-steam/scripts/SEMI.js', // Greasy Fork user scripts 'Extensions/Greasy Fork/Melvor Completion Log Helper.js', 'Extensions/Greasy Fork/Melvor Idle - Timestamped Saves.js', ].forEach(pts => require('fs').readFile(pts, 'utf8', (err, data) => {eval(data);})); // Extension css [ 'Extensions/MICS-steam/styles/mainStyle.css', //'Extensions/SEMI-steam/styles/semi.css', ].forEach(cssFile => $(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL(cssFile)}">`));
Combat Simulator: -icons/ -> Extensions/MICS-steam/icons/ -sources/ -> Extensions/MICS-steam/sources/ SEMI: -icons/ -> Extensions/SEMI-steam/icons/ -scripts/ -> Extensions/SEMI-steam/scripts/
Auto-loading Scripts in Steam
- Create a .js file in the Melvor Idle directory.
- Set the contents of the .js file
- The 15000 is just to give the game 15 seconds to get up and running, it doesn't seem to matter if it fires on the character screen or once you load a character.
- Add
"inject_js_end": "pathToYourFile/yourFileName.js"
to the parameters ofpackage.json
setTimeout(function(){ /*insert all of the commands you would normally put in the console to load your scripts*/ }, 15000);
Add Dev/Non-Main Branch Extensions to Chrome
Simple Installation
Disclaimer: this installation method will never automatically update.
- Navigate to https://gitlab.com/aldousWatts/SEMI or whichever repo you want.
- On the left hand of the header, you should see a dropdown containing the word
main
. Click the dropdown, then selectdev
. - You should see a button in the header with a download icon. Click download, then .zip.
- After the download completes, put the folder wherever you like. Extract the zip.
- Open the link
chrome://extensions/
, enable Developer Mode in the top right. - Click the button
Load unpacked
in the header. - Navigate to the top-level directory of the unpacked extension. For SEMI, this is the one that contains the manifest, README, etc. Afterwards, click
Select Folder
. - After the extension loads, click update.
- If you have the Chrome extension from the web store, ensure that you remove it.
- Refresh the game.
Managing Dev/Non-Main Branch Extensions w/ git
This installation method will automatically fetch updates to dev/non-main branches.
- Open your terminal to the location you want the folder to go.
- Type the command
git clone [email protected]:aldousWatts/SEMI.git
into your terminal. - After it finishes cloning into the folder, cd into the folder then run
git fetch && git checkout <branchname>
. - Open the link
chrome://extensions/
, enable Developer Mode in the top right. - Click the button
Load unpacked
in the header. - Navigate to the top-level directory of the unpacked extension. For SEMI, this is the one that contains the manifest, README, etc. Afterwards, click
Select Folder
. - After the extension loads, click update.
- If you have the Chrome extension from the web store, ensure that you remove it.
- Refresh the game.
Melvor Idle version v1.3 (Released: 13th June 2024) | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||
Skills:
| ||||||||||||||||||||
Other:
| ||||||||||||||||||||
Reference Tables: Items, Equipment, Experience Table, Upgrading Items, Combat Areas, Slayer Areas, Dungeons, Strongholds, The Abyss, Monsters |