I would like to provide a feature which is very similar to Firefox's reader view for all browsers by embedding it into the site I'm working on, such that it can be enabled by clicking on a switch, or something similar.
I found Mozilla's Readability repository which describes itself as:
A standalone version of the readability library used for Firefox Reader View.
I imported this into my site, and added a switch to replace the main page content with the HTML obtained from this library, but it only provides some of the features of Firefox's reader view. It stripped away various non-text elements, leaving only a simple page of text and images, but it lacks the styling used by Firefox's reader view, and more importantly it lacks the floating toolbar that allows the user to dynamically customize the page/text style, or have the text read to them.
I then found the source code for Firefox's reader view, but integrating it with the site I'm working on seems like it would be rather complicated at the very least, if not impossible without a considerable rewrite. Is there a way to embed Firefox's reader view in a website?
This is not a duplicate of How can I implement Mozilla readability.js to my Website?, as I've already implemented readability.js
for the site I'm working on. Here's a stripped down example of how I'm doing that:
import { Readability } from '@mozilla/readability';
function htmlToElement(htmlString) {
const template = document.createElement('template');
template.innerHTML = htmlString.trim();
return template.content.firstChild;
}
document.getElementsByClassName('layoutmain')[0].replaceWith(
htmlToElement(
new Readability(document.cloneNode(true)).parse().content
)
);
I'm using Svelte, which takes care of the import in the code above, but I think that's largely irrelevant to the question at hand.