Melvor Idle

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

Page Discussion

Mod Creation/Enabling DevTools for the Steam and Epic Clients (view source)

Revision as of 17:15, 24 April 2024

9,068 bytes removed ,  24 April
no edit summary
(→‎Setup: Attempt #74932 to make the instructions more clear)
No edit summary
 
(27 intermediate revisions by 7 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 [[Scripting_and_Extensions_Instructions#Setup|Setup]] and [[Scripting_and_Extensions_Instructions#Loading_Scripts|Loading Scripts]]. There is an [[Scripting_and_Extensions_Instructions#Alternate_Variation|alternate variation]] that may result in a cleaner Melvor Idle folder, but requires additional setup steps.
 
===Setup===
You only have to do this once.
<ol>
  <li>Download Melvor Idle on Steam, and find the installation folder. e.g. <code>[...]/steamapps/common/Melvor Idle</code></li>
  <li>Download the 0.54.0 version of NW.js SDK. The version might change in the future, but you need the specific one listed.</li>
  <ul>
    <li>64bit Windows: https://dl.nwjs.io/v0.54.0/nwjs-sdk-v0.54.0-win-x64.zip</li>
    <li>64bit Linux: https://dl.nwjs.io/v0.54.0/nwjs-sdk-v0.54.0-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 userscripts from https://greasyfork.org/</li>
    <li>Download an extension's source from its repository. e.g.</li>
      <ul>
        <li>Combat Sim: https://github.com/visua0/Melvor-Idle-Combat-Simulator-Reloaded/releases</li>
        <li>SEMI: https://gitlab.com/aldousWatts/SEMI/-/archive/main/SEMI-main.zip</li>
      </ul>
    </ul>
  <li>Extract all zipped files.</li>
  <li>Place the '''contents''' of the <code>nwjs-sdk*</code> folder in the Melvor Idle installation folder.</li>
  <ul>
    <li>The current contents of the <code>nwjs-sdk-v0.54.0-win-x64</code> folder has 22 total items. Moving this to the Melvor Idle folder will overwrite over 100 existing files.</li>
    <li>If it didn't ask you to overwrite any files then you did something wrong.</li>
  </ul>
  <li>Place the <code>icons</code>, <code>styles</code>, and source directories (i.e. <code>scripts</code> or <code>sources</code>) of the extracted extensions in the Melvor Idle installation folder.</li>
</ol>
 
===Loading Scripts===
Loading scripts must be run every time the game is opened on Steam.
<ol>
<ol>
<li>Open the game and load a character.</li>
<li>Ensure Melvor Idle is closed - modifying game files while the game is running may result in unexpected behaviour</li>
<li>Open the dev tools console by pressing F12.</li>
<li>Download Melvor Idle on Steam or Epic, and find the installation folder. e.g. <code>[...]/steamapps/common/Melvor Idle</code>
<br/>Not sure where it's installed? It is possible to locate the installation folder through the Steam & Epic clients:</li>
<ul>
<ul>
<li>You can also open the console by right clicking in the game and selecting <code>Inspect</code>. You may need to switch from <code>Element</code> to <code>Console</code>.</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>
</ul>
<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
<li>Set the context of the console to <code>game</code>.</li>
<ul>
<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>
<li>Load the scripts and extensions you placed in the installation folder before.</li>
<ul>
<li>You can load SEMI like this:</li>
<pre>require('fs').readFile('scripts/SEMI.js', 'utf8', (err, data) => {
    if (err) console.error(err);
    else 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) => {
    if (err) console.error(err);
    else 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) => {
    if (err) console.error(err);
    else eval(data);
});</pre>
</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>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>
</ol>
</ol>


===Alternate Variation===
'''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.
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 [[Scripting_and_Extensions_Instructions#Setup|Setup]] section then follow the below instructions.
<ol>
<li>Create a folder <code>Extensions</code> in the Melvor Idle installation folder.</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 <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 folder.</li>
<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 <code>contentScript.js</code> for Combat Simulator and <code>SEMI.js</code> 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>
</ul>
</ol>


====Alternate Variation Loading Scripts====
[[File:DevToolsSteamEpic.png|frameless]]
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 by pressing F12.</li>
<ul>
<li>You can also open the console by right clicking in the game and selecting <code>Inspect</code>. You may need to switch from <code>Element</code> to <code>Console</code>.</li>
</ul>
<li>Set the context of the console to <code>game</code>.</li>
<ul>
<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>
<li>Load the scripts and extensions you placed in the installation folder 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>
</ol>
 
==Auto-loading Scripts in Steam==
<ol>
<li>Follow the [[Scripting_and_Extensions_Instructions#Setup|setup instructions]].</li>
<li>Create a <code>autorun.js</code> file in the Melvor Idle folder.</li>
<li>Edit <code>autorun.js</code> using a text editor:</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 <code>"inject_js_end": "autorun.js"</code> to the parameters of <code>package.json</code>, which should look like this:</li>
<pre>"node-remote":["*://*"], "inject_js_end": "autorun.js"}</pre>
</ol>
 
==FAQ==
Common issues and solutions with installation.
 
'''Q:''' I can't get the console to work!<br>
'''A:''' You '''must''' download the specific version in the instructions. Newer versions will not work or help.
: Make sure to move the '''contents''' of <code>nwjs-sdk*</code>, not the entire folder.
 
'''Q:''' The console won't open when I hit F12.<br>
'''A:''' If you followed the proper nwjs installation instructions and the console still does not open when you press F12, you may have to change your Steam screenshot button. Alternatively, you can open the console by right-clicking the game and clicking <code>Inspect</code>.
 
'''Q:''' I installed nwjs but nothing works.<br>
'''A:''' When you move the '''contents''' of <code>nwjs-sdk*</code>, you will be asked to overwrite over 100 files to your Melvor Idle folder. If you don't get this prompt, you didn't select the right files/folders.
 
=Add Dev/Non-Main Branch Extensions to Chrome=
===Simple Installation===
'''Disclaimer:''' this installation method will never automatically update.
<ol>
<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 <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>After the download completes, put the folder wherever you like. Extract the zip.</li>
<li>Open the link <code>chrome://extensions/</code>, enable Developer Mode in the top right.</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 <code>Select Folder</code>.</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>Refresh the game.</li>
</ol>
 
===Managing Dev/Non-Main Branch Extensions w/ git===
This installation method will automatically fetch updates to dev/non-main branches.
<ol>
<li>Open your terminal to the location you want the folder to go.</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 <code>git fetch && git checkout <branchname></code>.</li>
<li>Open the link <code>chrome://extensions/</code>, enable Developer Mode in the top right.</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 <code>Select Folder</code>.</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>Refresh the game.</li>
</ol>


{{ModGuideNav}}
{{Menu}}
{{Menu}}
[[Category:Guides]]
Retrieved from "https://testwiki.melvoridle.com/w/Special:MobileDiff/45691...67581"