Nico Verbruggen
2b591a040d
All checks were successful
Build & Test WASM / build-and-test (push) Successful in 1m42s
262 lines
14 KiB
HTML
262 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KoboPatch Web UI</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
<link rel="stylesheet" href="style.css?ts=1773670636">
|
|
<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header class="hero">
|
|
<h1>KoboPatch <span class="hero-accent">Web UI</span></h1>
|
|
<p class="subtitle">Custom patches for your Kobo e-reader</p>
|
|
</header>
|
|
|
|
<!-- Step indicator -->
|
|
<nav id="step-nav" class="step-nav" hidden>
|
|
<ol>
|
|
<li data-step="1" class="active">Device</li>
|
|
<li data-step="2">Patches</li>
|
|
<li data-step="3">Build</li>
|
|
<li data-step="4">Install</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Step 1a: Connect device (automatic, Chromium only) -->
|
|
<section id="step-connect" class="step" hidden>
|
|
<div class="warning">
|
|
<b>Patching modifies system files on your Kobo, and <u>will void your warranty</u>.</b> This process allows for custom modifications to be applied, or undone. If something has gone wrong,
|
|
you may need to <a href="https://help.kobo.com/hc/en-us/articles/360017605314-Manual-reset-your-Kobo-Clara-HD-Kobo-Nia-Kobo-Elipsa-Kobo-Clara-2E-Kobo-Elipsa-2E" target="_blank">manually reset your device</a>.
|
|
</div>
|
|
<p>
|
|
Connect your Kobo e-reader via USB. It should appear as a removable drive.
|
|
Then click the button below and select the root of the Kobo drive.
|
|
</p>
|
|
<button id="btn-connect" class="primary">Select Kobo Drive</button>
|
|
<p class="fallback-hint">
|
|
Don't want to use Chrome?
|
|
<a href="#" id="btn-manual-from-auto">Select your firmware version manually</a> instead.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Step 1b (manual): Select device model + firmware -->
|
|
<section id="step-manual" class="step" hidden>
|
|
<div class="warning">
|
|
Patching modifies system files on your Kobo. If something goes wrong,
|
|
you may need to <a href="https://help.kobo.com/hc/en-us/articles/360017605314-Manual-reset-your-Kobo-Clara-HD-Kobo-Nia-Kobo-Elipsa-Kobo-Clara-2E-Kobo-Elipsa-2E" target="_blank">manually reset your device</a>.
|
|
Proceed with care.
|
|
</div>
|
|
<p id="manual-chrome-hint" class="info-banner" hidden>
|
|
Tip: if you use Chrome or Edge, this tool can auto-detect your device
|
|
and write patched files directly to it. Even easier, but sadly requires a Chromium based browser.
|
|
</p>
|
|
<p>Select your Kobo model and firmware version.
|
|
Not sure which model you have?
|
|
<a href="https://help.kobo.com/hc/en-us/articles/360019676973-Identify-your-Kobo-eReader-or-Kobo-tablet" target="_blank">Identify your Kobo eReader</a>.
|
|
</p>
|
|
<select id="manual-version">
|
|
<option value="">-- Select firmware version --</option>
|
|
</select>
|
|
<select id="manual-model" hidden>
|
|
<option value="">-- Select your Kobo model --</option>
|
|
</select>
|
|
<p id="manual-model-hint" class="fallback-hint" hidden>
|
|
You can identify your model by the serial number prefix shown on your Kobo
|
|
under <strong>Settings > Device information</strong>.
|
|
Match the first characters (e.g. N428) to the list above.
|
|
</p>
|
|
<button id="btn-manual-confirm" class="primary" disabled>Continue ›</button>
|
|
</section>
|
|
|
|
<!-- Step 1c: Device detected (auto mode info card) -->
|
|
<section id="step-device" class="step" hidden>
|
|
<div id="device-info" class="info-card">
|
|
<div class="info-row">
|
|
<span class="label">Model</span>
|
|
<span id="device-model" class="value">--</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Serial</span>
|
|
<span id="device-serial" class="value">--</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Firmware</span>
|
|
<span id="device-firmware" class="value">--</span>
|
|
</div>
|
|
</div>
|
|
<p id="device-status"></p>
|
|
<div class="step-actions">
|
|
<button id="btn-device-restore" class="secondary">Restore Unpatched Software</button>
|
|
<button id="btn-device-next" class="primary">Configure Patches ›</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 2: Configure patches -->
|
|
<section id="step-patches" class="step" hidden>
|
|
<p>Enable or disable patches below. Patches in the same group are mutually exclusive.</p>
|
|
<div id="patch-container" class="patch-container-scroll"></div>
|
|
<div class="step-actions">
|
|
<button id="btn-patches-back" class="secondary">‹ Back</button>
|
|
<button id="btn-patches-next" class="primary" disabled>Continue ›</button>
|
|
</div>
|
|
<p id="patch-count-hint" class="fallback-hint"></p>
|
|
</section>
|
|
|
|
<!-- Step 3: Review & Build -->
|
|
<section id="step-firmware" class="step" hidden>
|
|
<p id="firmware-auto-info">
|
|
Firmware <strong id="firmware-version-label"></strong> for
|
|
<strong id="firmware-device-label"></strong>
|
|
<span id="firmware-description">will be downloaded automatically from Kobo's servers and will be patched after the download completes.</span>
|
|
</p>
|
|
<details class="log-details">
|
|
<summary>Firmware download URL</summary>
|
|
<code id="firmware-download-url"></code>
|
|
<p id="firmware-verify-notice" class="fallback-hint">
|
|
You can verify if this URL matches your Kobo's model on
|
|
<a href="https://help.kobo.com/hc/en-us/articles/35059171032727" target="_blank">Kobo's support page</a>. The most important bit is that "koboXX" matches, for example "kobo13" for Kobo Libra Color.
|
|
</p>
|
|
</details>
|
|
<!--
|
|
<p id="firmware-manual-info" hidden>
|
|
No automatic download available for your device.
|
|
Please select the firmware zip file manually.
|
|
You can download it from
|
|
<a href="https://pgaskin.net/KoboStuff/kobofirmware.html" target="_blank">pgaskin.net</a>.
|
|
Make sure it matches firmware version <strong id="firmware-version-label-manual"></strong>.
|
|
</p>
|
|
<input type="file" id="firmware-input" accept=".zip" hidden>
|
|
-->
|
|
<div class="step-actions">
|
|
<button id="btn-build-back" class="secondary">‹ Back</button>
|
|
<button id="btn-build" class="primary">Build Patched Firmware</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 4: Building -->
|
|
<section id="step-building" class="step" hidden>
|
|
<div class="build-header">
|
|
<div class="spinner"></div>
|
|
<p id="build-progress">Starting...</p>
|
|
</div>
|
|
<pre id="build-log" class="build-log"></pre>
|
|
<p id="build-wait-hint" class="fallback-hint">Please wait while the patch is being applied...</p>
|
|
</section>
|
|
|
|
<!-- Step 5: Install -->
|
|
<section id="step-done" class="step" hidden>
|
|
<p id="build-status" class="install-summary"></p>
|
|
<div id="existing-tgz-warning" class="warning" hidden>
|
|
An <b>existing</b> KoboRoot.tgz file was found on your Kobo. This means an update has not been applied yet. If you choose to write the new file to your Kobo, the existing one will be overwritten.
|
|
</div>
|
|
<details class="log-details">
|
|
<summary>Build log</summary>
|
|
<pre id="done-log" class="build-log done-log"></pre>
|
|
</details>
|
|
<div id="build-actions">
|
|
<button id="btn-write" class="primary">Write to Kobo</button>
|
|
<button id="btn-download" class="secondary">Download KoboRoot.tgz</button>
|
|
</div>
|
|
<div id="write-instructions" class="install-instructions" hidden>
|
|
<p class="hint">
|
|
KoboRoot.tgz has been written to your Kobo.
|
|
<strong>Safely eject</strong> the device before unplugging the USB cable — it will reboot and apply the patches automatically.
|
|
</p>
|
|
</div>
|
|
<div id="download-instructions" class="install-instructions" hidden>
|
|
<ol class="install-steps">
|
|
<li>Connect your Kobo via USB so it appears as a removable drive.</li>
|
|
<li>Copy <strong>KoboRoot.tgz</strong> into the <strong>.kobo</strong> folder on the Kobo drive.</li>
|
|
<li><strong>Safely eject</strong> the Kobo — do not just unplug the cable, as this can corrupt data.</li>
|
|
<li>The device will reboot and apply the patches automatically.</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Error state -->
|
|
<section id="step-error" class="step" hidden>
|
|
<h2>Something went wrong</h2>
|
|
<p id="error-message" class="error"></p>
|
|
<pre id="error-log" class="error-log" hidden></pre>
|
|
<button id="btn-retry" class="secondary">Start Over</button>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<p>
|
|
<a href="#" id="btn-how-it-works">How does this work?</a><br/>
|
|
<br/>
|
|
Built on <a href="https://github.com/pgaskin/kobopatch" target="_blank">kobopatch</a> by pgaskin.
|
|
Patches and discussion on the <a href="https://www.mobileread.com/forums/forumdisplay.php?f=247" target="_blank">MobileRead forums</a>.
|
|
</p>
|
|
<p>
|
|
Source code available <a href="https://github.com/nicoverbruggen/kobopatch-webui" target="_blank">on GitHub</a>. This project is not affiliated with Rakuten Kobo Inc.
|
|
</p>
|
|
</footer>
|
|
|
|
<dialog id="how-it-works-dialog" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>How does this work?</h2>
|
|
<button id="btn-close-dialog" class="modal-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
KoboPatch Web UI is a fully client-side web application for applying custom
|
|
<a href="https://github.com/pgaskin/kobopatch" target="_blank">kobopatch</a> patches
|
|
to Kobo e-readers. Nothing is uploaded to a server — everything runs in your browser.
|
|
</p>
|
|
|
|
<h3>The patching process</h3>
|
|
<ol>
|
|
<li><strong>Device selection</strong> — On Chromium-based browsers (Chrome, Edge), the app can
|
|
auto-detect your Kobo via the File System Access API when connected over USB.
|
|
On other browsers, you manually select your model and firmware version.</li>
|
|
<li><strong>Patch configuration</strong> — You choose which patches to enable or disable.
|
|
Patches in the same group are mutually exclusive (radio buttons).
|
|
The patches themselves are community-contributed via the
|
|
<a href="https://www.mobileread.com/forums/forumdisplay.php?f=247" target="_blank">MobileRead forums</a>.</li>
|
|
<li><strong>Build</strong> — The correct firmware is downloaded directly from Kobo's servers
|
|
(<code>ereaderfiles.kobo.com</code>). The patcher, compiled from Go to WebAssembly, runs
|
|
inside a Web Worker so the UI stays responsive. It extracts the firmware's
|
|
<code>KoboRoot.tgz</code>, applies your selected patches as in-place byte replacements
|
|
to the ELF binaries, validates the results (ELF headers, file sizes, archive consistency),
|
|
and produces a new <code>KoboRoot.tgz</code>.</li>
|
|
<li><strong>Install</strong> — On Chromium, the patched file is written directly to the
|
|
<code>.kobo</code> folder on the device. On other browsers, you download the file
|
|
and copy it manually. After safely ejecting, the Kobo reboots and applies the update.</li>
|
|
</ol>
|
|
|
|
<h3>Restoring original software</h3>
|
|
<p>
|
|
You can also use this tool to restore the original unpatched firmware. In that case,
|
|
no patches are applied — the original <code>KoboRoot.tgz</code> is extracted
|
|
from the firmware zip as-is.
|
|
</p>
|
|
|
|
<h3>Safety</h3>
|
|
<p>
|
|
Each patched binary is validated before being included in the output: ELF magic bytes,
|
|
32-bit ARM architecture, file size (must match the original), and archive integrity are
|
|
all checked. If anything looks wrong, the build fails with an error. That said, patching
|
|
modifies system files, so you should know how to
|
|
<a href="https://help.kobo.com/hc/en-us/articles/360017605314" target="_blank">manually reset your Kobo</a>
|
|
if needed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker -->
|
|
<script src="kobo-device.js?ts=1773670636"></script>
|
|
<script src="kobopatch.js?ts=1773670636"></script>
|
|
<script src="patch-ui.js?ts=1773670636"></script>
|
|
<script src="app.js?ts=1773670636"></script>
|
|
</body>
|
|
</html>
|