Advertisement |
What is the "Reader View" extension?
This extension enhances the readability of web pages by removing clutter. It uses Mozilla's Readability library to provide a similar experience to the one you get when using Firefox. After installation, it adds an action button to the Chrome or Edge toolbar area, or the address bar of Opera. Pressing this button once opens the current page in "Reader View" mode, which is indicated by the button turning blue. To exit "Reader View" mode and restore the normal rendering mode, click the blue button or use the back button in your browser. The extension uses the history API to remember your scroll position and session, so the page is restored to its previous state when you exit the "Reader View" mode.
recommended "Open In VLC" extension for Chrome, Edge, Opera and Firefox browsers.
"Open in VLC" is a browser extension that lets you stream online videos directly in VLC Media Player. It supports various video platforms and provides a seamless way to bypass in-browser playback for improved performance and more features. Read more here.
How can I change the background color of the "Reader View" mode?
You can change the background color and other formatting options in "Reader View" mode. To do this, look for the "Aa" button on the left side of the page and press it to open the UI control panel. From this panel, you can adjust the font family, font size, line height, and page color. You can also customize each of the provided color schemes by inserting your custom styles using the options page and inserting CSS code.
Does the "Reader View" extension have the ability to restore open tabs in "Reader View" mode after a restart or browser crash?
Currently, the extension cannot restore open "Reader View" tabs after a restart. This feature is on the developer's to-do list. However, it's worth noting that the list of previously opened tabs is still available in your browser history, as each "Reader View" page is converted from a previously viewed page.
What's new in this version?
Please check the Logs section.
Is it possible to customize the appearance of "Reader View" pages using custom CSS rules?
Yes, starting with version 0.1.1, you can go to the options page and define custom CSS rules to overwrite the default styling. For example, if you don't like the default text color, you can use the following sample CSS code to change it:
html[data-mode=sepia] body {
color: green !important;
}
html[data-mode=light] body {
color: blue !important;
}
html[data-mode=dark] body {
color: red !important;
}
This custom CSS code will apply changes to the color for all supported color schemes. To target a specific one, use the [data-mode] selector. You can also use this CSS rule to alter the font size or font family of the "Reader View" to improve readability.
What happens if I bookmark a page while it is in the "Reader View" mode?
I do not recommend bookmarking a page in the "Reader View" mode, as doing so will result in losing the actual link and the page not working when accessed from the bookmark. This is because the extension uses a temporary ID to parse each page, and when the page is rendered, the actual database is cleared to free up the browser memory. The generated ID cannot be recovered later from a bookmark or saved URL, and there will be no parsing. To bookmark a page, exit the "Reader View" first.
Is it possible to hide the left-side buttons and use keyboard shortcuts to activate actions instead?
Yes, you can hide the "save," "print," "fullscreen," and "speech" buttons by going to the options page. Alternatively, you can use the following keyboard replacements. If you want the left-side toolbar to disappear, use the "Custom Styling" option on the settings page and set the element's display to "none." or use the Ctrl + Shift + Y on Windows, and Command + Shift + Y on macOS.
Command | Shortcut |
---|---|
Convert to Reader View | Open "chrome://extensions/shortcuts" in a browser tab to set one |
Focus Reader's Content | Ctrl + Shift + J (Windows), Command + Shift + J (Mac) |
Toolbar Visibility | Ctrl + Shift + Y (Windows), Command + Shift + Y (Mac) |
Save into HTML Format | Ctrl + S (Windows), Command + S (Mac) |
Print in Reader View | Ctrl + P (Windows), Command + P (Mac) |
Switch to Fullscreen | F9 |
Switch out of Fullscreen | ESC |
Exit the Reader View | ESC × 2 |
Move to the Previous Page | Ctrl + Shift + LeftArrow (Windows), Command + Shift + LeftArrow (Mac) |
Move to the Next Page | Ctrl + Shift + RightArrow (Windows), Command + Shift + RightArrow (Mac) |
Toggle Images On and Off | Ctrl + Shift + I (Windows), Command + Shift + I (Mac) |
Add a new Sticky Note | Ctrl + Shift + B (Windows), Command + Shift + B (Mac) |
Open Text-to-Speech (TTS) | Ctrl + Shift + S (Windows), Command + Shift + S (Mac) |
[TTS Only] Move to Previous Section | Ctrl + Shift + Z (Windows), Command + Shift + Z (Mac) |
[TTS Only] Toggle Pause/Play | Ctrl + Shift + X (Windows), Command + Shift + X (Mac) |
[TTS Only] Move to the Next section | Ctrl + Shift + C (Windows), Command + Shift + C (Mac) |
Can this extension save an HTML document in MHTML format (single HTML file)?
You have two options:
Is it possible to disable the smooth navigation feature when doing word searches?
Yes! Go to the options page and and add this CSS rule to the top of the reader view styling section
html {
scroll-behavior: unset;
}
Can I blur the top and bottom sections of the "Reader View" window to focus on the middle part?
Use the following sample CSS code: body:after {
pointer-events: none;
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom, rgba(0,0,0, 0.3) 0%, rgba(0,0,0, 0.3) 33%, transparent 33%, transparent 66%, transparent 65%, rgba(0,0,0, 0.3) 66%, rgba(0,0,0, 0.3) 100%);
}
Is it possible to start the Text-to-Speech module from a specific point in an article?
Yes, you can start the Text-to-Speech module from a specific point in an article by selecting the first word before opening the TTS module. This will cause the module to jump to the selected element.
Is it possible to declutter a document in "Reader View" mode before saving or printing it?
Yes, you can declutter a document in "Reader View" mode by pressing the "Edit" button in the toolbar. The new editor mode allows you to use the delete or backspace keys to remove unwanted content, just like in a word editor. You can also alter the content if desired. Press the "Edit" button again to exit the design mode when you are done modifying the document. This modified document can then be printed or saved for later use.
What is the new highlighting button in the toolbar, and how do I use it?
This button in the toolbar area allows you to highlight text in the "Reader View" mode. These highlights are semi-persistent, meaning they reappear if you reload the page but will be gone after a browser restart. This feature allows you to temporarily mark parts of a document for later reference. You can disable caching on the extension's options page if you don't want the highlights to reappear after a page refresh. It's important to note that highlighting requires a lot of storage, so this extension does not currently support persistent highlighting. However, if you have an important document that requires highlights, you can go to the options page and export the highlights as a JSON object. Once you import this JSON object, the extension appends the highlighting database to the session database, which means the extension will restore both the new and old highlights for all documents. It's also worth noting that highlights are URL-based, so each page has its own set of highlights.
[not recommended] What is the minimum CSS needed to put the toolbar on top or bottom of the reader view page?
Check here for more info.
To make the toolbar appear on the bottom of the page change "flex-direction: column" to "flex-direction: column-reverse". This simple implementation hides the popup arrows. You can fix the arrow directions too!body {
flex-direction: column;
}
#toolbar{
flex-direction: row;
}
#toolbar > span {
border-bottom: none;
border-right: solid 1px var(--border-color);
}
#image-utils {
top: 50px;
left: 200px;
}
#image-utils::before,#font-utils::before {
display: none;
}
#image-utils::after,#font-utils::after {
display: none;
}
Is it possible to open some websites directly in "Reader View" mode?
As of version 0.3.9, there is a new option to automatically switch pages to the "Reader View" mode if the user-specified criteria are met. To use this feature, you must press the "Allow Access" button to grant the extension access to all hostnames, which is necessary for the extension to monitor tabs. The list of rules can be a comma-separated list of hostnames or regular expression rules. Hostname matching is exact, so to redirect "www.google.com", you must specify "www.google.com" exactly, not just "google.com". Regular expression matching uses the entire URL for testing. Be sure to write regular expressions that distinguish keywords in the pathname and query sections. Even if automatic redirect is enabled, the extension still allows navigating to the original page once after entering the "Reader View" mode, which can be useful for opening links from the original page that are not included in the "Reader View."
This is a JSON array contains a set of objects. Each object appends a new button to the UI and executes a JS code when the user clicks on the button. Here is a sample to add a single button to the UI:
If you need a custom icon, you can add a new key ("icon") and value pair to each object. The value is the data URI encoded version of the icon. As of version 0.4.5, you can also assign a custom keyboard shortcut for the action. The code is executed inside the reader's iframe (reader's content is loaded inside an iframe). To get familiar let's say we want to copy the content of the reader view into a text file. The idea is to run a JS code that copies the content of the reader view to the clipboard, then a native Bash script will be called to copy the clipboard content to a local file. To run a native command we are going to use Andy's "External Application Button" extension which allows a third-party extension to run an arbitrary command. Assuming that you are using Google Chrome, then the ID of this extension is "bifmfjgpgndemajpeeoiopbeilbaifdo" (For Edge the ID is "lpmbefndcmjoaepdpgmoonafikcalmnf"). To copy the text to the user's clipboard, we are going to use the "navigator.clipboard" API. A minimal JS code that copies the content to the clipboard and then runs a native executable is:[{
"code": "console.log('User Click')",
"title": "Sample Button",
"shortcut": "Ctrl/Command + Shift + KeyL"
}]
top.navigator.clipboard.writeText(document.documentElement.outerHTML).then(() => {
chrome.runtime.sendMessage('bifmfjgpgndemajpeeoiopbeilbaifdo', {
app: {
args: '',
path: '/path/to/a/script.sh'
},
tab: {}
});
});
This code uses "External Application Button" extension to run our custom Bash script. Since the content is copied to the clipboard, we can simply read it from the Bash script with the following code:#! /bin/bash
content=`pbpaste`
echo $content >> ~/Desktop/a.html
Here we use "pbpaste" command to read the clipboard content and write this content to a file located in the user's Desktop directory called "a.html".Does the extension use a cloud server to generate voices? If so, which server is used to generate them?
The source of the Text-to-Speech voices depends on your selection. There are two types of engines: ones that are generated by your operating system (which tend to sound like computer-generated voices but offer word highlighting) and ones that are generated by cloud servers (offer better quality but no word highlighting). If the voice name contains the "Google" keyword, it is generated by Google's cloud server. If the voice contains the "Watson" keyword, it is generated by IBM's Watson engine.
Why are the shortcut keys for skipping paragraphs and pausing in the Text-to-Speech (TTS) module so strange? Why can't I just use "p" to pause, "," to go back, and "." to go forward? Is this a limitation of extensions?
As of version 0.4.4, you can configure keyboard shortcuts from the options page. Note that you will need to refresh the interface for the changes to take effect. Some shortcuts may also conflict with other applications.
Is it possible to include a left-side button or a keyboard shortcut to save the current web page, including the link and text content, as a plain text file?
It is possible to create a new user action that uses JavaScript code to create a plain-text version of the current document. You can extract different sections and append them as needed. Here is an example of a JavaScript code that saves a "Reader View" page, including the document link, title, estimated reading time, and the entire content of each reading page:
You can now create a custom user action button with a custom icon that runs the above code when clicked. Note that you can use the "JSON.stringify" and "String.raw" methods to convert the string into a single-line code that can be pasted into the "User Actions" section of the extension:{
let content = '';
content += document.getElementById('reader-domain').textContent.replace(/\s*\n\s*/g, '');
content += '\n';
content += document.getElementById('reader-title').textContent;
content += '\n';
content += document.getElementById('reader-estimated-time').textContent;
content += '\n\n';
const pages = document.querySelectorAll('[id^=readability-page-]');
for (const page of pages) {
content += page.textContent + '\n';
}
const blob = new Blob([content], {
type: 'text/plain'
});
const href = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = href;
a.download = document.getElementById('reader-title').textContent + '.txt';
a.click();
setTimeout(() => URL.revokeObjectURL(href), 10000);
}
[
{
"code": "{\n let content = '';\n\n content += document.getElementById('reader-domain').textContent.replace(/\\s*\\n\\s*/g, '');\n content += '\\n';\n content += document.getElementById('reader-title').textContent;\n content += '\\n';\n content += document.getElementById('reader-estimated-time').textContent;\n content += '\\n\\n';\n\n const pages = document.querySelectorAll('[id^=readability-page-]'); \n\n for (const page of pages) {\n content += page.textContent + '\\n';\n }\n const blob = new Blob([content], {\n type: 'text/plain'\n });\n const href = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = href;\n a.download = document.getElementById('reader-title').textContent + '.txt';\n a.click();\n setTimeout(() => URL.revokeObjectURL(href), 10000);\n}",
"title": "Save as Text"
}
]
Can the extension automatically switch between a light and dark theme based on the operating system's dark mode setting? For example, if I have automatic dark mode enabled on macOS Catalina, can the extension automatically switch from the Sepia/White theme to the Dark theme when the rest of the system does so?
You can use the custom styling section to set your preferred color scheme based on media queries. Since the color scheme of both the extension's interface and the actual "Reader View" mode needs to be changed, you will need to use two styling pieces. First, make sure that the default theme of the extension is light, and then append the following code to the "Custom styling (reader view)" section of the options page:
Also, append the following CSS styling to the "Custom styling (top frame and sidebar)" section of the options page.@media (prefers-color-scheme: dark) {
body {
color: #cec4ac !important;
background-color: #282828 !important;
}
}
@media (prefers-color-scheme: dark) {
:root {
--border-color: #cec4ac !important;
--guide-color: #cec4ac !important;
}
body {
color: #cec4ac !important;
background-color: #282828 !important;
}
}
If the operating system's color preference is set to dark mode, the CSS stylings will be applied and the extension's interface will be altered to use dark colors.Can I remove the top metadata section including the title, URL, Time to read, and horizontal line from the "Reader View" mode? Is this possible?
Add the following CSS code to the "Custom styling (reader view)" section of the options page:
/* Hide Title Element */
#reader-title {
display: none;
}
/* Hide URL */
#reader-domain {
display: none;
}
/* Hide Time to read and more */
#reader-credits,
#reader-estimated-time,
#published-time {
display: none;
}
/* Hide DOI */
#doi {
display: none;
}
/* Hide the horizontal line */
#doi + hr {
display: none;
}
Is it possible to customize the font sizes of elements other than the main font, such as headers, in the "Reader View" mode?
This extension adjusts the sizes of all fonts based on the font size selected by the user. If you want to change this behavior, use the "Custom styling (reader view)" section of the options page.
Is it possible to point the "Reader View" to the correct content when the extension fails to detect the actual site's content?
You can try selecting the entire content you want to convert on the original page before using the action button to switch to "Reader View" mode. The text selection allows the extension to parse only this content instead of using its internal engine to identify the relevant content. This feature is also useful if you only want to read a specific part of a page. Additionally, there is an editing tool in the left toolbar that you can use to delete parts of the rendered content.
Can I change the default location where the extension saves HTML files?
By default, the extension saves files to the default download directory of your browser. You can change this directory from the options page of your browser. For example, in Google Chrome, you can find instructions on how to do this here.
Can this extension be used to view local HTML files on my computer? If so, why are the images not showing up?
Unfortunately, browser extensions are not allowed to access local files (e.g. C:a.png
) due to CORS policy. However, it is possible to view local HTML files with this extension by setting up a local server and accessing the HTML file through that server (e.g. http://127.0.0.1:8000/page.html
). You can use NodeJS, Python, or PHP to set up a local server. For a Python server, you can use the built-in module "http.server". Here is an example of how to serve the current directory on port 8000:
python3 -m http.server 8000
For a PHP server, you can use the built-in module "php -S". Here is an example of how to serve the current directory on port 8000:php -S localhost:8000
Note that you need to have Python or PHP installed on your system to use these commands. These servers are suitable for testing purposes only and are not recommended for production use. For instructions on how to do this, see developer.mozilla.org/.../set_up_a_local_testing_server.How do I modify the title used in the reader's view? Since I store the generated pages, I want customized names to organize my archive.
Navigate to the options page and locate the "Format of the document's title" setting. You can input your custom title using the available keywords:
Why doesn't my dictionary extension (or other extensions) work when using Reader View extension?
Reader View has two operation modes:
If you need your extensions to function, try switching to Simple Mode in Reader View using the right-click context menu option over the action button. This will let you use other extensions while still benefiting from a cleaner reading layout.
Please keep reviews clean, avoid improper language, and do not post any personal information. Also, please consider sharing your valuable input on the official store.
The "Reader View" is a browser extension that enhances the readability of web pages by removing clutter such as ads, buttons, and background images, and by changing the text size, contrast, and layout of the page. It is based on Mozilla's Readability library and provides a similar reading experience to the Firefox browser's built-in reader view. Pressing the extension's action button opens the current page in the "Reader View" mode. Clicking on the blue button or pressing the browser's back button closes the "Reader View" mode and restores the normal rendering mode. The extension also provides a toolbar with a set of useful reading tools, such as a text highlighter, a note-taking widget, and the ability to edit and save the page in HTML, Markdown, take a screenshot, or send it by email or print it.
The "Reader View" extension allows users to customize the look of the reader view pages using custom CSS rules. The extension also has the option to open defined websites directly in the reader view mode.
The extension includes a Text-to-Speech (TTS) module with many voices, some of which are generated by cloud servers such as Google and IBM Watson. Shortcut keys for skipping paragraphs and pausing in the TTS can be customized on the options page.
The extension also includes a user actions section, which allows users to add custom buttons to the reader view and execute custom JavaScript code when clicked.
Permission | Description |
---|---|
storage | to save user preferences across browser restarts |
activeTab | to inject the Readability script to the activate tab after user requested so |
contextMenus | to add optional context menu items to the link and page contexts |
notifications | to show notifications to the user |
declarativeContent | to show page action button when an HTTP or HTTPS page is loaded |
chrome://favicon/ | To show favicons |