Mod Creation/Enabling DevTools for the Steam and Epic Clients

From Melvor Idle
Revision as of 19:49, 19 August 2021 by Foxy (talk | contribs) (updated Simple Installation steps)
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

  1. back up your save by exporting or downloading the save file.
  2. read all instructions before following them.
  3. 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, but requires additional setup steps.

Setup

You only have to do this once.

  1. Download Melvor Idle on Steam, and find the installation folder. e.g. [...]/steamapps/common/Melvor Idle
  2. 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.
  3. Download the scripts and extensions you want to use.
  4. Extract all zipped files.
  5. Place the contents of the nwjs-sdk* folder in the Melvor Idle installation folder.
    • The current contents of the nwjs-sdk-v0.54.0-win-x64 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.
  6. Place the icons, styles, and source directories (i.e. scripts or sources) of the extracted extensions in the Melvor Idle installation folder.

Loading Scripts

Loading scripts must be run every time the game is opened on Steam.

  1. Open the game and load a character.
  2. Open the dev tools console by pressing F12.
    • You can also open the console by right clicking in the game and selecting Inspect. You may need to switch from Element to Console.
  3. Set the context of the console to game.
    • 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.
  4. Load the scripts and extensions you placed in the installation folder before.
    • You can load SEMI like this:
      • 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')}">`);
    • You can load the Combat Simulator like this:
      • 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')}">`);
    • You can load user scripts like this, by changing the file name:
      • require('fs').readFile('relativePathToMyReallyCoolScript.js', 'utf8', (err, data) => {
    if (err) console.error(err);
    else 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.

  1. Create a folder Extensions in the Melvor Idle installation folder.
  2. Make new directories for the extensions and scripts. e.g.
    3. 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/
  3. Place the icons, styles, and source (i.e. scripts or sources) directories of the extracted extensions in the Melvor Idle installation folder.
  4. 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 and SEMI.js for SEMI
      • Combat Simulator:
 -icons/ -> Extensions/MICS-steam/icons/
 -sources/ -> Extensions/MICS-steam/sources/
SEMI:
 -icons/ -> Extensions/SEMI-steam/icons/
 -scripts/ -> Extensions/SEMI-steam/scripts/

Alternate Variation Loading Scripts

If you followed the alternate variation setup steps, you will have to load scripts slightly differently.

  1. Open the game and load a character.
  2. Open the dev tools console by pressing F12.
    • You can also open the console by right clicking in the game and selecting Inspect. You may need to switch from Element to Console.
  3. Set the context of the console to game.
    • 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.
  4. Load the scripts and extensions you placed in the installation folder before.
    5. [
    // 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)}">`));

Auto-loading Scripts in Steam

  1. Follow the setup instructions.
  2. Create a autorun.js file in the Melvor Idle folder.
  3. Edit autorun.js using a text editor:
    • 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.
    setTimeout(function(){ 
     /*insert all of the commands you would normally put in the console to load your scripts*/
}, 15000);
  4. Add "inject_js_end": "autorun.js" to the parameters of package.json, which should look like this:
    5. "node-remote":["*://*"], "inject_js_end": "autorun.js"}

FAQ

Common issues and solutions with installation.

Q: I can't get the console to work!
A: You must download the specific version in the instructions. Newer versions will not work or help.

Make sure to move the contents of nwjs-sdk*, not the entire folder.

Q: The console won't open when I hit F12.
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 Inspect.

Q: I installed nwjs but nothing works.
A: When you move the contents of nwjs-sdk*, 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. It now requires you to understand how to use a terminal, node, and npm. DO NOT MESSAGE THE DEV IF YOU CANNOT FIGURE THIS OUT. Wait for the extensions to release.

  1. Download and install Node.js if you do not already have it.
  2. Download and install npm if you do not already have it.
  3. Navigate to https://gitlab.com/aldousWatts/SEMI or whichever repo you want.
  4. On the left hand of the header, you should see a dropdown containing the word main. Click the dropdown, then select dev.
  5. You should see a button in the header with a download icon. Click download, then .zip.
  6. After the download completes, put the folder wherever you like. Extract the zip.
  7. Open the folder in a terminal.
  8. Run the command npm install && npm run build. You might see several hundred errors. This is fine.
  9. Run the command node build.js
  10. Open the link chrome://extensions/, enable Developer Mode in the top right.
  11. Click the button Load unpacked in the header.
  12. Navigate to the dist folder. This should contain a manifest.json. Afterwards, click Select Folder.
  13. After the extension loads, click update.
  14. If you have the Chrome extension from the web store, ensure that you remove it.
  15. Refresh the game.

Managing Dev/Non-Main Branch Extensions w/ git

This installation method will automatically fetch updates to dev/non-main branches.

  1. Open your terminal to the location you want the folder to go.
  2. Type the command git clone [email protected]:aldousWatts/SEMI.git into your terminal.
  3. After it finishes cloning into the folder, cd into the folder then run git fetch && git checkout <branchname>.
  4. Open the link chrome://extensions/, enable Developer Mode in the top right.
  5. Click the button Load unpacked in the header.
  6. 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.
  7. After the extension loads, click update.
  8. If you have the Chrome extension from the web store, ensure that you remove it.
  9. Refresh the game.


Melvor Idle version v1.3.1 (Released: 30th October 2024)
Error creating thumbnail: File missing
Combat:
Error creating thumbnail: File missing
Attack •
Error creating thumbnail: File missing
Strength •
Error creating thumbnail: File missing
Defence •
Error creating thumbnail: File missing
Hitpoints •
Error creating thumbnail: File missing
Ranged •
Error creating thumbnail: File missing
Magic •
Error creating thumbnail: File missing
Prayer •
Error creating thumbnail: File missing
Slayer •
Error creating thumbnail: File missing
Corruption
Skills:
Error creating thumbnail: File missing
Farming •
Error creating thumbnail: File missing
Township •
Error creating thumbnail: File missing
Woodcutting •
Error creating thumbnail: File missing
Fishing •
Error creating thumbnail: File missing
Firemaking •
Error creating thumbnail: File missing
Cooking •
Error creating thumbnail: File missing
Mining •
Error creating thumbnail: File missing
Smithing •
Error creating thumbnail: File missing
Thieving •
Error creating thumbnail: File missing
Fletching •
Error creating thumbnail: File missing
Crafting •
Error creating thumbnail: File missing
Runecrafting •
Error creating thumbnail: File missing
Herblore •
Error creating thumbnail: File missing
Agility •
Error creating thumbnail: File missing
Summoning •
Error creating thumbnail: File missing
Astrology •
Error creating thumbnail: File missing
Alternative Magic •
Error creating thumbnail: File missing
Cartography •
Error creating thumbnail: File missing
Archaeology •
Error creating thumbnail: File missing
Harvesting
Other:
Error creating thumbnail: File missing
Beginners Guide • Guides •
Error creating thumbnail: File missing
Bank •
Error creating thumbnail: File missing
Combat •
Error creating thumbnail: File missing
Mastery •
Error creating thumbnail: File missing
Money Making •
Error creating thumbnail: File missing
Shop • Easter Eggs • Pets •
Error creating thumbnail: File missing
Golbin Raid •
Error creating thumbnail: File missing
Full Version • Throne of the Herald • Atlas of Discovery •
Error creating thumbnail: File missing
Into the Abyss
Reference Tables: Items, Equipment, Experience Table, Upgrading Items, Combat Areas, Slayer Areas, Dungeons, Strongholds, The Abyss, Monsters
Retrieved from "https://testwiki.melvoridle.com/index.php?title=Mod_Creation/Enabling_DevTools_for_the_Steam_and_Epic_Clients&oldid=46037"