Anonymous

Mod Creation/Migrating from Scripts and Extensions: Difference between revisions

From Melvor Idle
Use SyntaxHighlight
(User:Coolrox95 Add mod guide navigation)
(Use SyntaxHighlight)
 
Line 17: Line 17:
The <code>manifest.json</code> should simply be:
The <code>manifest.json</code> should simply be:


  <nowiki>{
  <syntaxhighlight lang="js" line>{
   "load": "script.js"
   "load": "script.js"
}</nowiki>
}</syntaxhighlight>


=== Extension ===
=== Extension ===
Line 38: Line 38:
And a previous <code>manifest.json</code> of (irrelevant properties stripped):
And a previous <code>manifest.json</code> of (irrelevant properties stripped):


  <nowiki>{
  <syntaxhighlight lang="js" line>{
   "icons": {
   "icons": {
     "48": "icons/my-icon-48.png"
     "48": "icons/my-icon-48.png"
Line 48: Line 48:
     }
     }
   ]
   ]
}</nowiki>
}</syntaxhighlight>


The new <code>manifest.json</code> would be:
The new <code>manifest.json</code> would be:


  <nowiki>{
  <syntaxhighlight lang="js" line>{
   "icon": "my-icon-48.png",
   "icon": "my-icon-48.png",
   "load": ["sources/contentScript.js", "styles/mainStyle.css"]
   "load": ["sources/contentScript.js", "styles/mainStyle.css"]
}</nowiki>
}</syntaxhighlight>


== The "Loading Loop" ==
== The "Loading Loop" ==
Line 61: Line 61:
Both userscripts and extensions would often end up with a ''funky'' loop that is some variation of the following in order to wait until the game has loaded into a character to perform actions:
Both userscripts and extensions would often end up with a ''funky'' loop that is some variation of the following in order to wait until the game has loaded into a character to perform actions:


  <nowiki>var loadInterval = setInterval(() => {
  <syntaxhighlight lang="js" line>var loadInterval = setInterval(() => {
   var isGameLoaded = window.isLoaded && !window.currentlyCatchingUp;
   var isGameLoaded = window.isLoaded && !window.currentlyCatchingUp;


Line 68: Line 68:
     // Inject script element or execute code...
     // Inject script element or execute code...
   }
   }
}, 500);</nowiki>
}, 500);</syntaxhighlight>


With the new mod system's context API, that's no longer necessary. Instead, the script should use a game lifecycle hook, with the most comparable being <code>onInterfaceReady</code>:
With the new mod system's context API, that's no longer necessary. Instead, the script should use a game lifecycle hook, with the most comparable being <code>onInterfaceReady</code>:


  <nowiki>mod.register(ctx => {
  <syntaxhighlight lang="js" line>mod.register(ctx => {
   ctx.onInterfaceReady(() => {
   ctx.onInterfaceReady(() => {
     // Code here will only get executed after the game, character, and
     // Code here will only get executed after the game, character, and
     // offline progress has been loaded.
     // offline progress has been loaded.
   });
   });
});</nowiki>
});</syntaxhighlight>


You can learn more about the various game lifecycle hooks in the [[Mod Creation/Essentials]] guide.
You can learn more about the various game lifecycle hooks in the [[Mod Creation/Essentials]] guide.
Line 99: Line 99:
And assuming <code>entryScript.js</code> was loaded as part of the manifest's <code>"load"</code> property, the <code>entryScript.js</code> could retrieve and use or load the <code>icon.png</code> and <code>helper.js</code> with the following:
And assuming <code>entryScript.js</code> was loaded as part of the manifest's <code>"load"</code> property, the <code>entryScript.js</code> could retrieve and use or load the <code>icon.png</code> and <code>helper.js</code> with the following:


  <nowiki>mod.register(async (ctx) => {
  <syntaxhighlight lang="js" line>mod.register(async (ctx) => {
   var iconUrl = ctx.getResourceUrl('assets/icon.png');
   var iconUrl = ctx.getResourceUrl('assets/icon.png');
   var iconElement = document.createElement('img');
   var iconElement = document.createElement('img');
Line 106: Line 106:
   await ctx.loadScript('scripts/helper.js');
   await ctx.loadScript('scripts/helper.js');
   // Now the contents of helper.js have been injected and executed
   // Now the contents of helper.js have been injected and executed
});</nowiki>
});</syntaxhighlight>


Use JavaScript modules or want to learn more about the various resource loading methods? Check out the [[Mod Creation/Essentials]] guide.
Use JavaScript modules or want to learn more about the various resource loading methods? Check out the [[Mod Creation/Essentials]] guide.
Line 118: Line 118:
* [[Mod Creation/Sidebar API Reference]]
* [[Mod Creation/Sidebar API Reference]]
{{ModGuideNav}}
{{ModGuideNav}}
{{Menu}}