A web extension for royalroad.com.
For people who juggle multiple stories.
I've been an avid reader on royalroad.com since 2019 and like many others, I juggle multiple stories at the same time. At some point this got somewhat unmanageable and often I drew a blank when thinking about what happened in the last chapter of the story I just opened. More and more I found myself having to go back one chapter and scroll all the way down just to re-read the last few paragraphs as a refresher. This is especially annoying while on mobile, where I often read while on the train.
That's when decided on trying to implement this little idea implementing a refresh of what happened in the last chapter.
RoyalRefresh is a browser extension for royalroad.com that inserts a button next to RoyalRoad's "Reader Preferences" button on chapter URLs. When clicked, the last few paragraphs of the previous chapter get fetched and displayed at the top of the chapter, which you can toggle on and off using the button. The extension defaults to showing you the last 250 words of the previous chapter (adjustable in extension settings, see Settings).
Here's an example of what it looks like:
The extension comes with a settings page where you can adjust the refresh length and other settings. There are a few ways to access the settings page:
- Click the extension icon in the browser toolbar to open the popup (Recommended)
- Open RoyalRoad's "Reader Preferences" menu and click "Open RoyalRefresh settings"
- Depending on your browser, there may be alternative methods to access the extension settings,
(such as using
about:addonsin Firefox)
Basic Settings popup
Advanced users can change CSS selectors in the settings if the site design changes, until a new extension update is pushed.
Note
Advanced settings for CSS selectors are only available in the full extension settings page, not in the popup. Use the popup to quickly access basic settings, but open the full settings page for advanced configuration.
Advanced settings
This extension is built using:
- WXT: A framework for building web extensions with a modern development experience.
- Svelte 5: A reactive component framework for building the user interface.
Check out everything I'm tracking in this project's issues.
This is my first public repo, for now and until changes are needed, just create a issue with an appropriate label and a
descriptive message and I will take a look. Any contributions are welcome, issues where I specifically need help are
marked with the contributions welcome label.
- Node.js (version 18 or higher)
- pnpm (package manager)
Clone the repository and install dependencies:
git clone https://github.com/Seismix/royalrefresh.git
cd royalrefresh
pnpm installTo start the development server for Chrome (default):
pnpm devTo start the development server for Firefox:
pnpm dev:firefoxTo develop on Android, this builds the Firefox version and runs it on a connected Android device. Make sure ADB is installed, your device is
connected with USB debugging enabled. You can pass additional web-ext run flags after the device ID:
# Basic usage
pnpm dev:android <device-id>
# With custom source directory
pnpm dev:android <device-id> --s ./custom-output
# With additional web-ext flags
pnpm dev:android <device-id> --adb-remove-old-artifactsNote
Some web-ext run options may not work when targeting Android devices. For example, browser startup options like --start-url are not supported on Android.
To build the extension for chromium browsers:
pnpm buildTo build specifically for Firefox:
pnpm build:firefoxYou can configure browser startup options using web-ext.config.ts files. For more information, see WXT's
Browser Startup documentation.
For example, to set custom browser binaries or startup URLs, create a web-ext.config.ts file:
import { defineWebExtConfig } from 'wxt';
export default defineWebExtConfig({
startUrl: [
"https://www.royalroad.com/",
"about:addons"
],
binaries: {
firefox: 'firefoxdeveloperedition',
},
});For a full list of options, see the web-ext command reference.