17,101
edits
Mod Creation/Migrating from Scripts and Extensions: Difference between revisions
Mod Creation/Migrating from Scripts and Extensions (view source)
Revision as of 00:24, 2 January 2023
, 2 January 2023Use 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: | ||
< | <syntaxhighlight lang="js" line>{ | ||
"load": "script.js" | "load": "script.js" | ||
}</ | }</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): | ||
< | <syntaxhighlight lang="js" line>{ | ||
"icons": { | "icons": { | ||
"48": "icons/my-icon-48.png" | "48": "icons/my-icon-48.png" | ||
| Line 48: | Line 48: | ||
} | } | ||
] | ] | ||
}</ | }</syntaxhighlight> | ||
The new <code>manifest.json</code> would be: | The new <code>manifest.json</code> would be: | ||
< | <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"] | ||
}</ | }</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: | ||
< | <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);</ | }, 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>: | ||
< | <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. | ||
}); | }); | ||
});</ | });</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: | ||
< | <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 | ||
});</ | });</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}} | |||