Mod Creation/Enabling DevTools for the Steam and Epic Clients: Difference between revisions

no edit summary
mNo edit summary
No edit summary
 
(48 intermediate revisions by 8 users not shown)
Line 1: Line 1:
{{V|0.20}}
For mod developers, it may be beneficial to enable DevTools within the Steam or Epic client. This can be achieved by following the process detailed below. This is a one off operation and does not need to be repeated, that is unless the Steam or Epic client is uninstalled or reinstalled, or when the game client updates.
'''Disclaimer:''' It is highly recommended to '''BACKUP YOUR SAVE''' before running any scripts or extensions.
=== Enabling DevTools for Steam & Epic ===
 
'''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.
<ol>
<ol>
<li>Download Melvor Idle on Steam, and find the installation directory. e.g. [...]/steamapps/common/Melvor Idle</li>
<li>Ensure Melvor Idle is closed - modifying game files while the game is running may result in unexpected behaviour</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 Melvor Idle on Steam or Epic, and find the installation folder. e.g. <code>[...]/steamapps/common/Melvor Idle</code>
<ul>
<br/>Not sure where it's installed? It is possible to locate the installation folder through the Steam & Epic clients:</li>
<li>64bit Windows: https://dl.nwjs.io/v0.49.2/nwjs-sdk-v0.49.2-win-x64.zip</li>
<li>64bit Linux: https://dl.nwjs.io/v0.49.2/nwjs-sdk-v0.49.2-linux-x64.tar.gz</li>
<li>Others: https://dl.nwjs.io/</li>
</ul>
<li>Download the scripts and extensions you want to use.</li>
<ul>
<li>Download from the script manager website. e.g. GreasyFork</li>
<li>Download from the extension's browser store page.</li>
<li>Download the source from the extension's repository. e.g.</li>
<ul>
<ul>
<li>Combat Sim: https://github.com/visua0/Melvor-Idle-Combat-Simulator-Reloaded/releases</li>
<li>'''Steam:''' Locate Melvor Idle within your library, right click, then click <code>Properties</code> - a window should appear. Within this window, click <code>Installed Files</code> → <code>Browse..</code></li>
<li>SEMI: https://gitlab.com/aldousWatts/SEMI/-/archive/main/SEMI-main.zip</li>
<li>'''Epic:''' Locate Melvor Idle within your library, right click, then click <code>Manage</code> - a window should appear. Within this window, click on the folder icon within the Installation section
</ul>
</ul>
</ul>
<li>Open the <code>package.nw</code> folder then <code>package.json</code>. Inside <code>package.json</code>, find <code>"chromium-args":</code> and then remove <code>--disable-devtools</code> and save the changes.</li>
<li>Extract all zipped files.</li>
<li>Verify DevTools have been successfully enabled by opening Melvor Idle, then pressing the F12 key once loaded. If successful, the DevTools window should appear</li>
<li>Place the contents of the nwjs-sdk* 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>
</ol>
</ol>


===Loading Scripts===
'''IMPORTANT''': When running commands through the console, you must switch from 'Top' to 'game' in the top left corner or else any commands will not function properly. This must be done every time the console is opened.
Loading scripts must be run every time the game is opened on Steam.
<ol>
<li>Open the game and load a character.</li>
<li>Open the dev tools console (F12).</li>
<li>Set the context of the console to game.</li>
<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>
</ul>
<li>Load the scripts and extensions you placed in the installation directory before.</li>
<ul>
<li>You can load SEMI like this:</li>
<pre>require('fs').readFile('scripts/SEMI.js', 'utf8', (err, data) => {eval(data);})
$(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/semi.css')}">`)</pre>
<li>You can load the Combat Simulator like this:</li>
<pre>require('fs').readFile('sources/contentScript.js', 'utf8', (err, data) => {eval(data);})
$(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/mainStyle.css')}">`)</pre>
<li>You can load user scripts like this, by changing the file name:</li>
<pre>require('fs').readFile('relativePathToMyReallyCoolScript.js', 'utf8', (err, data) => {eval(data);})</pre>
</ul>
</ol>
___
===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.
<ol>
<li>Create a directory Extensions in the Melvor Idle installation directory.</li>
<li>Make new directories for the extensions and scripts. e.g.</li>
<pre>
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/
</pre>
<li>Place the icons, styles, and source (i.e. scripts or sources) directories of the extracted extensions in the respective created directories.</li>
</ol>
 
====Alternate Variation Loading Scripts====
If you followed the alternate variation setup steps, you will have to load scripts slightly differently.
<ol>
<li>Open the game and load a character.</li>
<li>Open the dev tools console (F12).</li>
<li>Set the context of the console to game.</li>
<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>
</ul>
<li>Load the scripts and extensions you placed in the installation directory before.</li>
<pre>
[
    // 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)}">`));
</pre>
<li>If you are using extensions, edit the main extension script so all source files and icons can be found.</li>
<ul>
<li>e.g. edit the paths in contentScript.js for Combat Simulator and SEMI.js for SEMI</li>
<pre>
Combat Simulator:
-icons/ -> Extensions/MICS-steam/icons/
-sources/ -> Extensions/MICS-steam/sources/
SEMI:
-icons/ -> Extensions/SEMI-steam/icons/
-scripts/ -> Extensions/SEMI-steam/scripts/
</pre>
</ol>


==Auto-loading Scripts in Steam==
[[File:DevToolsSteamEpic.png|frameless]]
<ol>
<li>Create a .js file in the Melvor Idle directory.</li>
<li>Set the contents of the .js file</li>
<ul>
<li>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.</li>
</ul>
<pre>setTimeout(function(){
    /*insert all of the commands you would normally put in the console to load your scripts*/
}, 15000);</pre>
<li>Add the following code to the parameters of package.json</li>
<pre>"inject_js_end": "pathToYourFile/yourFileName.js"</pre>
</ol>


{{ModGuideNav}}
{{Menu}}
{{Menu}}
[[Category:Guides]]