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

Restructure sections and incorporate PC instructions from Scripting and Extensions
No edit summary
(Restructure sections and incorporate PC instructions from Scripting and Extensions)
Line 1: Line 1:
{{V|1.0}}
{{V|1.0}}
{{Otheruses|installing scripts and extensions|a list of scripts and extensions|Scripting and Extensions}}
'''Disclaimer:''' It is highly recommended to '''BACKUP YOUR SAVE''' before running any scripts or extensions.
'''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.
'''Disclaimer:''' Do not run code you can not understand or do not trust. Malicious code could be included in any script and extension. '''If you are unsure whether a script is safe to use, please ask in the Scripting and Extensions channel on the [https://discord.gg/MelvorIdle Melvor Idle Discord] before installing.'''
 
__TOC__
This page covers the steps required to install mods on both the Steam and web browser (PC) versions of Melvor Idle.


=Before You Begin=
=Before You Begin=
It's highly recommended before doing anything to
It's highly recommended before doing anything to
# back up your save by exporting or downloading the save file.
# Back up your save by exporting or downloading the save file.
# read all instructions before following them.
# Read all instructions before following them.
# verify the code is not malicious.
# Verify the code is not malicious.


=Notes from the SEMI Dev=
=Steam=
For ease of installation, [[#Melvor Mod Manager (M3)|Melvor Mod Manager (M3)]] is highly recommended. However, if you know what you are doing then a [[#Manual Installation|manual installation]] is also possible.
 
==Notes from the SEMI Dev==
Unless you know what you are doing, M3 is absolutely the recommended method of installing scripts. I (TheAlpacalypse) personally use M3 and can attest to it working perfectly with SEMI. If you are unclear what any of the below instructions say, simply follow the M3 installation instructions.
Unless you know what you are doing, M3 is absolutely the recommended method of installing scripts. I (TheAlpacalypse) personally use M3 and can attest to it working perfectly with SEMI. If you are unclear what any of the below instructions say, simply follow the M3 installation instructions.


=Automated Steam Installation with M3=
==Melvor Mod Manager (M3)==
Melvor Mod Manager (M3) is an open-source tool that allows for the easy installation and management of mods (scripts and extensions) for the Steam edition of Melvor Idle.
Melvor Mod Manager (M3) is an open-source tool that allows for the easy installation and management of mods (scripts and extensions) for the Steam edition of Melvor Idle.


'''DISCLAIMER: It is very important to still use discretion when installing mods through M3 to ensure a mod does not execute malicious code! If you are unsure, ask in the Scripting and Extensions Discord channel.'''
'''DISCLAIMER: It is very important to use discretion when installing mods through M3 to ensure a mod does not execute malicious code! If you are unsure, ask in the Scripting and Extensions [https://discord.gg/MelvorIdle Discord] channel.'''


<ol>
# Download and install the latest version of M3:
<li>Download and install the latest version from [https://cherrymace.github.io/melvor-mod-manager/ here] (Windows) or compile your own executable following [https://github.com/CherryMace/melvor-mod-manager#steps-for-compiling-m3-yourself these instructions] (Windows, MacOS, Linux).</li>
#* For '''Windows''', an installer may be downloaded from [https://cherrymace.github.io/melvor-mod-manager/ here].
<li>Launch M3 and click '''Browse''' at the top and locate the installation directory for Melvor Idle.</li>
#* For '''MacOS''' or '''Linux''', you can compile your own executable by following [https://github.com/CherryMace/melvor-mod-manager#steps-for-compiling-m3-yourself these instructions].
<ul>
# Launch M3 and click '''Browse''' at the top and locate the installation directory for Melvor Idle.
<li>Not sure where it's installed? Go to Melvor Idle in your Steam library, right click, and go to <code>Manage</code> => <code>Browse local files</code>.</li>
#* Not sure where it's installed? Go to Melvor Idle in your Steam library, right click, and go to <code>Manage</code> <code>Browse local files</code>.
</ul>
# You can now install mods in three different ways:
<li>You can now install mods in three different ways:</li>
#* The '''Discover tab''' enables one-click installation of popular mods.
<ul>
#* '''From File''': You can add mods from either a script (.js) file or extension manifest (manifest.json) file.
<li>The Discover tab enables one-click installation of popular mods.</li>
#* '''From URL''': Add scripts using their GreasyFork URL, e.g. https://greasyfork.org/en/scripts/434472-keybindings
<li>From File: You can add mods from either a script (.js) file or extension manifest (manifest.json) file.</li>
# Click '''Launch''' and start using your mods!
<li>From URL: Add scripts using their GreasyFork URL, e.g. https://greasyfork.org/en/scripts/434472-keybindings</li>
</ul>
<li>Click '''Launch''' and start using your mods!</li>
</ol>


=Manually Installing Steam Console and Scripts=
==Manual Installation==
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.
To use console commands, scripts, and extensions on Steam without M3, follow the instructions in [[#Setup|Setup]] and [[#Loading_Scripts|Loading Scripts]]. There is an [[#Alternate_Variation|alternate variation]] that may result in a cleaner Melvor Idle folder, but requires additional setup steps.


===Setup===
===Setup===
You only have to do this once.
You only have to do this once.
<ol>
# Download Melvor Idle on Steam, and find the installation folder. e.g. <code>[...]/steamapps/common/Melvor Idle</code>
  <li>Download Melvor Idle on Steam, and find the installation folder. e.g. <code>[...]/steamapps/common/Melvor Idle</code></li>
#* Not sure where it's installed? Go to Melvor Idle in your Steam library, right click, and go to <code>Manage</code> → <code>Browse local files</code>.
  <li>Download the NW.js SDK (Windows: v0.54.0; other OS: v0.49.2). The version might change in the future, but you need the specific one listed.</li>
# Download the NW.js SDK (Windows: v0.54.0; other OS: v0.49.2). The version might change in the future, but you need the specific one listed.
#* '''64bit Windows''': https://dl.nwjs.io/v0.54.0/nwjs-sdk-v0.54.0-win-x64.zip
#* '''64bit Linux''': https://dl.nwjs.io/v0.49.2/nwjs-sdk-v0.49.2-linux-x64.tar.gz
#* '''Other''': https://dl.nwjs.io/
# Download the scripts and extensions you want to use, a list is available on the [[Scripting and Extensions]] page
# Extract all zipped files.
# Place the '''contents''' of the <code>nwjs-sdk*</code> folder in the Melvor Idle installation folder.
#* 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.
#* If it didn't ask you to overwrite any files then you did something wrong.
# 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.
 
===Option 1: Loading Scripts===
Loading scripts must be run every time the game is opened on Steam.
<!-- Must be an HTML list due to embedded multi-line code within <pre> tags --><ol>
<li>Open the game and load a character.</li>
<li>Open the dev tools console by either:
   <ul>
   <ul>
    <li>64bit Windows: https://dl.nwjs.io/v0.54.0/nwjs-sdk-v0.54.0-win-x64.zip</li>
  <li>Pressing F12.</li>
    <li>64bit Linux: https://dl.nwjs.io/v0.49.2/nwjs-sdk-v0.49.2-linux-x64.tar.gz</li>
  <li>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>Others: https://dl.nwjs.io/</li>
   </ul></li>
   </ul>
<li>Set the context of the console to <code>game</code>.
  <li>Download the scripts and extensions you want to use.</li>
   <ul>
   <ul>
    <li>Download userscripts from https://greasyfork.org/</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>
    <li>Download an extension's source from its repository. e.g.</li>
  </ul></li>
      <ul>
<li>Load the scripts and extensions you placed in the installation folder before.
        <li>Combat Sim: https://github.com/visua0/Melvor-Idle-Combat-Simulator-Reloaded/releases</li>
        <li>SEMI: https://gitlab.com/aldousWatts/SEMI/-/releases</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>
   <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>You can load SEMI like this:
    <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>
<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>
<ul>
<li>You can load SEMI like this:</li>
<pre>require('fs').readFile('scripts/SEMI.js', 'utf8', (err, data) => {
<pre>require('fs').readFile('scripts/SEMI.js', 'utf8', (err, data) => {
     if (err) console.error(err);
     if (err) console.error(err);
     else eval(data);
     else eval(data);
});
});
$(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/semi.css')}">`);</pre>
$(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/semi.css')}">`);</pre></li>
<li>You can load the Combat Simulator like this:</li>
<li>You can load the Combat Simulator like this:
<pre>require('fs').readFile('sources/contentScript.js', 'utf8', (err, data) => {
<pre>require('fs').readFile('sources/contentScript.js', 'utf8', (err, data) => {
     if (err) console.error(err);
     if (err) console.error(err);
     else eval(data);
     else eval(data);
});
});
$(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/mainStyle.css')}">`);</pre>
$(document.head).append(`<link rel="stylesheet" href="${chrome.runtime.getURL('styles/mainStyle.css')}">`);</pre></li>
<li>You can load user scripts like this, by changing the file name:</li>
<li>You can load user scripts like this, by changing the file name:
<pre>require('fs').readFile('relativePathToMyReallyCoolScript.js', 'utf8', (err, data) => {
<pre>require('fs').readFile('relativePathToMyReallyCoolScript.js', 'utf8', (err, data) => {
     if (err) console.error(err);
     if (err) console.error(err);
     else eval(data);
     else eval(data);
});</pre>
});</pre></li>
</ul>
  </ul></ol>
</ol>


===Alternate Variation===
===Option 2: 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.
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====
====Additional Setup====
Line 175: Line 165:
</ol>
</ol>


==Auto-loading Scripts in Steam==
===Auto-loading Scripts in Steam===
<ol>
<ol>
<li>Follow the [[Scripting_and_Extensions_Instructions#Setup|setup instructions]].</li>
<li>Follow the [[Scripting_and_Extensions_Instructions#Setup|setup instructions]].</li>
Line 188: Line 178:
</ol>
</ol>


==FAQ==
===FAQ===
Common issues and solutions with installation.
Common issues and solutions with installation.


Line 201: Line 191:
'''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.
'''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=
=Web Browser (PC)=
==Extensions==
Extensions are independent add-ons that run in the browser. The installation method varies depending on the browser:
* For '''Firefox''', most extensions can be installed directly to the browser from the [https://addons.mozilla.org/en-US/firefox/extensions/ Firefox Extension Store].
* For '''Chrome''', many extensions need to be added as an [https://developer.chrome.com/extensions/getstarted upacked extension] while in Developer Mode.
 
Some extensions might require you to edit specific files or set specific variables before they can run. The page with the download link will usually have a more detailed explanation on how to install.
 
Remember to refresh the game for the extension to take effect.
 
==User Scripts==
User scripts are scripts that run with the help of user script manager browser extensions such as [https://www.greasespot.net/ Greasemonkey] or [https://www.tampermonkey.net/ Tampermonkey].
 
If the source of your user script is a user script repository, such as [https://greasyfork.org/ Greasyfork], simply Install by clicking the button on the page.
 
If the user script is shared through a plain text sharing site, such as [https://pastebin.com/ Pastebin], copy the code into a new user script in your user script manager browser extension.
 
Remember to refresh the game for the user script to take effect.
 
==Console Scripts==
The simplest form of scripts are JavaScript code that are pasted directly into the console of of your browser.
 
To access the console open Developer Tools (usually by pressing F12) in your browser and navigate to the console. Then, simply paste the code in the input field and press enter. Most console scripts will require you to fill out variables in the code before executing them.
 
Do note that unlike extensions and user scripts, console scripts will run without refreshing the game, but will in turn not be saved when the game is closed.
 
==Add Dev/Non-Main Branch Extensions to Chrome==
===Why do this?===
===Why do this?===
Allows you to get the bleeding edge updates whilst the devs are working on a new patch. If you are a patron and want to use SEMI on the test builds, this is how.
Allows you to get the bleeding edge updates whilst the devs are working on a new patch. If you are a patron and want to use SEMI on the test builds, this is how.
Line 212: Line 228:
<li>Download and install npm if you do not already have it.</li>
<li>Download and install npm if you do not already have it.</li>
<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 <code>main</code>. Click the dropdown, then select <code>dev</code>.</li>
<li>On the left hand of the header, you should see a drop-down 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>
Line 226: Line 242:
</ol>
</ol>


===Managing Dev/Non-Main Branch Extensions w/ git===
===Managing Dev/Non-Main Branch Extensions With git===
This installation method will automatically fetch updates to dev/non-main branches.
This installation method will automatically fetch updates from dev/non-main branches.
<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>