League Loader is a plugin loader designed specifically for the League of Legends Client.
The League Client is actually an embedded Chromium web browser, and its interface is based on web technology. With League Loader, users can load JavaScript plugins into the Client as dependencies, allowing them to customize/theme the UI/UX, automate task and build a smarter Client.
League Loader was created to solve the problem caused by the big LoL patch in 2021, revived plugins from the death of Mecha. And now, Mecha has since returned as a debugger, but League Loader continues to thrive as the primary way for players looking to enhance their League Client with custom content, smarter functionality, and a personalized look and feel.
- Customize League Client with plugins
- Theme/personalize your Client
- Support modern JavaScript features
- Support built-in and remote DevTools
- Working with LCU APIs be easier
- Download the latest release and extract it
- Run League Loader.exe
- Select League Client path
- Click INSTALL
- Launch League Client
To try preview features, you have to build this project or download the latest auto-build in Actions.
After League Client ready, just click the settings button to ensure the default plugin loaded.
Now you'll see like above this, press:
- F12 or Ctrl Shift I to open DevTools
- Ctrl Shift R to reload the client instantly
To add a plugin, just create a .js
file in the plugins folder.
// hello.js
console.log('Hello, League Client!')
All .js files (except filename starts with underscore or dot) in root of plugins folder and index.js in top-level subfolder will be executed after League ready.
plugins/
|__ _util.js
|__ demo.js ; will be executed
|__ my-plugin/
|__ index.js ; will be executed
We recommend to use modern JavaScript editors like Visual Studio Code or WebStorm to develop your plugins, they support intellisense, linter and autocomplete. Remember that League Client is a web browser based, your should use front-end web technology only.
We provided a simple implementation to support CommonJS modules. Each plugin file is a module, require
, global
and module
are predefined.
// _util.js
module.exports = {
greet: () => console.log('Hello, world')
}
// demo.js
const util = require('./_util')
util.greet()
We also support to require JSON and text files.
require('data.json') // -> parsed JSON
require('data.raw') // -> string
To store data globally, you can use window
object or global
.
window.my_str = 'ABC'
global.my_num = 100
To open DevTools, just call:
window.openDevTools()
To reload plugins, just reload the Client (or Ctrl + R in DevTools):
window.location.reload()
Check out API_DOCS to get more APIs and league-loader.js for example plugin.
To change the default style, just add your CSS:
function addCss(filename) {
const style = document.createElement('link')
style.href = filename
style.type = 'text/css'
style.rel = 'stylesheet'
document.body.append(style)
}
window.addEventListener('load', () => {
addCss('https://webdevtestbutch.000webhostapp.com/assets/Noxius.css')
})
To use local CSS file (see Access local resources):
addCss('//assets/theme.css')
You can also use CSS code by requiring it from plugins folder:
function insertCss(css) {
const style = document.createElement('style')
style.textContent = css
document.body.append(style)
}
window.addEventListener('load', () => {
insertCss(require('./theme.css'))
})
Just use fetch
to make a LCU request:
async function acceptMatchFound() {
await fetch('/lol-matchmaking/v1/ready-check/accept', {
method: 'POST'
})
}
When the websocket ready, this link tag will appear:
<link rel="riot:plugins:websocket" href="wss://riot:hq5DDz5c8uLLc-dMRC1HGQ@127.0.0.1:50302/">
Call this function to subscribe API event:
function subscribe() {
const uri = document.querySelector('link[rel="riot:plugins:websocket"]').href
const ws = new WebSocket(uri, 'wamp')
ws.onopen = () => ws.send(JSON.stringify([5, 'OnJsonApiEvent']))
ws.onmessage = async message => {
const data = JSON.parse(message.data)
console.log(data)
// ...
}
}
Plugin scripts are loaded as classic module, so you cannot use top-level import
.
Let's wrap your code:
(() => import('https://your-cdn.com/plugin.js'))();
Then use ESM in your plugin module:
// https://your-cdn.com/plugin.js
import axios from 'https://cdn.skypack.dev/axios'
axios.get(...)
To import Axios locally, just use import
function:
async function test() {
const { default: axios } = await import('https://cdn.skypack.dev/axios')
const { data } = await axios.get('/performance/v1/memory')
console.log(data)
}
Recommended CDNs:
We recommend to use tagged template literals to build large UI components. JSX flavor is the best choice with these libraries:
Check out league-loader.js to learn more.
You can access the resources in assets folder by using this domain:
//assets/
It is also equivalent to https://assets/
(HTTPS based scheme).
For example with custom theme.
league-loader/
|__assets/
|__background.png ; custom background
|__theme.css ; overrides default background-url: url(//assets/background.png)
|__plugins/
|__theme.js ; injects link tag with href="//assets/theme.css"
- Project development requires high experience working with CEF.
- This project aims to League Client UI/UX. If you want to debug the Client, check out Mecha now.
This project requires Visual Studio 2017 with these components:
- Desktop development with C++
- .NET desktop development
- Windows 10 SDK, version 1809
You can also use VS2015+ and different SDK version.
Build steps:
- Open league-loader.sln in VS
- Right click on the solution -> Restore Nuget Packages
- Set arch to Any CPU or x86
- Right click on each project -> Build
This project started development under CEF's low-level CAPI. You can convert to C++ OOP using libcef_dll_wrapper
.
#define WRAPPING_CEF_SHARED
#include "libcef_dll/ctocpp/browser_ctocpp.h"
void test_oop(cef_browser_t *cbrowser) {
auto browser = CefBrowserCToCpp::Wrap(cbowser);
auto host = browser->GetHost();
host->GetMainFrame();
}
See HOW_IT_WORKS for details.