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 "Allow Right Click" extension for Chrome, Edge and Firefox browsers

This extension unblocks the browser's default right-click context menu for image, video, and audio when the page deliberately blocks right-clicking on its content. 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:

body[data-mode=sepia] {
  color: green !important;
}
body[data-mode=light] {
  color: blue !important;
}
body[data-mode=dark] {
  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.

Can this extension save an HTML document in MHTML format (single HTML file)?

You have two options:

• If you are on a Chromium-based browser, you can turn on the “Save Page as MHTML” option by turning on the flag. Use the chrome://flags page to alter.
• Save the page in HTML format, then open it in your browser and use another extension that converts HTML to MHTML to generate the single file HTML document. For more information, see stackoverflow.com/how-to-save-html-pages-as-one-file.

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.

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:

[{
  "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: {}
  });
});

#! /bin/bash

content=`pbpaste`
echo $content >> ~/Desktop/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:

{
  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:

@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;
  }
}

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

php -S localhost:8000