Repository files navigation

A web extension forroyalroad.com.
For people who juggle multiple stories.

I've been an avid reader onroyalroad.com since 2019 and like many others, I jugglemultiple stories at the same time. At some point this got somewhat unmanageable and often I drew a blank when thinkingabout what happened in the last chapter of the story I just opened. More and more I found myself having to go back onechapter and scroll all the way down just to re-read the last few paragraphs as a refresher. This is especially annoyingwhile 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 forroyalroad.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 fetchedand displayed at the top of the chapter, which you can toggle on and off using the button. The extension defaults toshowing 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:

1. Click the extension icon in the browser toolbar to open the popup (Recommended)
2. Open RoyalRoad's "Reader Preferences" menu and click "Open RoyalRefresh settings"
3. Depending on your browser, there may be alternative methods to access the extension settings,(such as usingabout:addons in Firefox)

Advanced users can change CSS selectors in the settings if the site design changes, until a new extension update is pushed.

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'sissues.

This is my first public repo, for now and until changes are needed, just create a issue with an appropriate label and adescriptive message and I will take a look. Any contributions are welcome, issues where I specifically need help aremarked with thecontributions welcome label.

• Node.js (version 18 or higher)
• pnpm (package manager)

Clone the repository and install dependencies:

git clone https://github.com/Seismix/royalrefresh.gitcd royalrefreshpnpm install

To start the development server for Chrome (default):

pnpm dev

To start the development server for Firefox:

pnpm dev:firefox

This builds the Firefox version and runs it on a connected Android device. Make sure ADB is installed, your device isconnected with USB debugging enabled, and set theADB_ID variable to your device ID (found viaadb devices).

pnpm dev:android<device-id>

To build the extension for chromium browsers:

pnpm build

To build specifically for Firefox:

pnpm build:firefox

You can configure browser startup options usingweb-ext.config.ts files. For more information, see WXT'sBrowser Startup documentation.

For example, to set custom browser binaries or startup URLs, create aweb-ext.config.ts file:

import{defineWebExtConfig}from'wxt';exportdefaultdefineWebExtConfig({startUrl:["https://www.royalroad.com/","about:addons"],binaries:{firefox:'firefoxdeveloperedition',},});

For a full list of options, see theweb-ext command reference.