Reader View Declutter webpages for better reading experience
Support Development
PayPal ● 
Bitcoin Address: 1sM2BrTH8BRgt3quiASK8TmYSafutNvDo
 ● 
Dogecoin Address: DFdSGpGMZ2EZVkjyqNrYCEysK92DFPonx4
Advertisement
Screenshot
"Reader View" strips away clutter like buttons, ads and background images, and changes the page's text size, contrast and layout for better readability. This extension uses Mozilla's Readability library to provide a powerful readability exactly similar to the Firefox built-in reader view. The UI is also very close to the Firefox version.

Features

  1. What is the "Reader View" extension?

    This extension removes clutter from web pages to enhance their readability. The extension uses Mozilla's Readability library as the engine to provide similar experience from what you get if you are on the Firefox browser. After installation, a button is added to your Chrome or Edge's toolbar area or Opera's address bar. Pressing this button once opens the current page in the "Reader View" mode. You will notice the button's color will be changed to orange while you are in the reader view mode. Clicking on this orange button or pressing the back button of your browser closes the "Reader View" mode and restores the normal rendering mode. Since the extension uses history API, the page scroll position and the entire session is restored when "Reader View" mode is terminated.

  2. recommended "Gmail™ Notifier (Developer Edition)" extension for Chrome, Firefox, and Edge browsers

    A browser extension to get notified (desktop notification and sound alarm) of unread emails on one or more search queries. This extension supports multiple accounts and does not require credentials to operate. Read more here.

  3. Can I change the background color on the "Reader View" mode?

    Yes, on the left side of the page, you will see a button with "Aa" label. Press this button once to open the UI control panel. You can change the font-family, font-size, line-height and the color of the page right from this panel. It is also possible to further customize each of the three provided modes by inserting your own user-defined custom styles. Use the options page to insert the CSS code.

  4. Does the "Reader View" extension support restoring reader view tabs after a restart?

    No, at this point the extension is not storing open views. This means that if your browser crashes, you will not get the pages on the "Reader View" mode restored after the reboot. This feature is in my to-do-list though. Note that since each reader view page is converted from a normal page, you still have the list of your old opened tabs in your browser history.

  5. What's new in this version?

    Please check the Logs section.

  6. Is it possible to customize the look of the reader view pages with user-defined custom CSS rules?

    As of version 0.1.1, you can go to the options page and define your custom CSS rules to overwrite the defaults. For instance, if you don't like the default text color use this sample CSS code to overwrite the default values:

    body[data-mode=sepia] {
      color: green !important;
    }
    body[data-mode=light] {
      color: blue !important;
    }
    body[data-mode=dark] {
      color: red !important;
    }
    

    This user-style code will overwrite colors for all three supported modes. Use [data-mode] selector to target only one specific mode. The CSS rule can be used to change the font-size or even font-family of the reader view to have a better visibility.

  7. What happens if I bookmark a page when it is in the "Reader View" mode?

    Don't ever do that! Well, you will lose the actual link and page will not be opened in the "Reader View"! Technically, this extension uses a temporary id to parse each page and when a page is rendered, the actual database is deleted to free up the browser's memory. Hence the generated ids cannot be recovered later from a bookmark or from a saved URL and there will be no parsing. Make sure to exit the "Reader View" before bookmarking a page.

  8. Can I hide the left-side buttons and use keyboard shortcuts instead?

    Go to the options page to hide “save”, “print”, “fullscreen”, and “speech” buttons. Instead, you can use the following keyboard replacements. Note that in case you need to completely remove the left-side toolbar, use the “Custom Styling” option in the settings page and set the element’s display to “none”.

    CommandShortcut
    Focus Reader’s ContentCtrl + Shift + J (Windows), Command + Shift + J (Mac)
    Toolbar VisibilityCtrl + Shift + Y (Windows), Command + Shift + Y (Mac)
    Save into HTML FormatCtrl + S (Windows), Command + S (Mac)
    Print in Reader ViewCtrl + P (Windows), Command + P (Mac)
    Switch to FullscreenF9
    Switch out of FullscreenESC
    Exit the Reader ViewESC × 2
    Move to the Previous PageCtrl + Shift + LeftArrow (Windows), Command + Shift + LeftArrow (Mac)
    Move to the Next PageCtrl + Shift + RightArrow (Windows), Command + Shift + RightArrow (Mac)
    Toggle Images On and OffCtrl + Shift + I (Windows), Command + Shift + I (Mac)
    Add a new Sticky NoteCtrl + 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 SectionCtrl + Shift + Z (Windows), Command + Shift + Z (Mac)
    [TTS Only] Toggle Pause/PlayCtrl + Shift + X (Windows), Command + Shift + X (Mac)
    [TTS Only] Move to the Next sectionCtrl + Shift + C (Windows), Command + Shift + C (Mac)

  9. Can I ask the extension to save HTML document in MHTML format (single HTML file format)?

    You have two options: 1. If you are using a Chromium-based browser, you can turn on the "Save Page as MHTML" option on the chrome://flags page. 2. Save the HTML file normally, then open it in your browser and use another extension that converts HTML to MHTML to generate the single file HTML document. Read stackoverflow.com/how-to-save-html-pages-as-one-file for more info

  10. I dislike the new smooth navigation behavior when doing word searches. Is it possible to disable it?

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

  11. Is it possible to blur the top and the bottom sections of the reader view window so that I can concentrate 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%);
    }

  12. Is it possible to start the Text-to-Speech module from an arbitrary position in an article?

    Yes, select the first word before opening the TTS module to ask the module to jump to the selected element.

  13. Sometimes I need to declutter a document after switching to the reader view before saving it or printing it. I was wondering if it is possible or not?

    Press the "Edit" button in the toolbar area and then like a word editor, select the content that is not needed and press the delete or backspace key. You can even alter the content if intended. When you are done modifying the document, press the "Edit" button one more time to exit the design mode. The modified document can now be printed or get saved for later use.

  14. What is the new highlighting button in the toolbar area and how to use it?

    As of version 0.3.6, this extension supports text highlighting in the reader view mode. These highlights are semi-persistent meaning that if you reload the page your highlights are restored however if the browser restarts, then the highlights are gone. This is useful to temporarily mark some part of a document for later access. If you don't need the highlights after a page refresh, you can disable the caching on the options page of the extension. Note that since highlighting requires too much storage, hence this extension at the current state does not support persistent highlighting. However, if you have an important document that the highlights are needed, you can go to the options page and export the highlights as a JSON object. Whenever the JSON object is imported, the highlighting database is appended to the session database which means the extension restores both the new and old highlights for all the documents. Also note that highlights are URL based so that each page keeps its own highlights.

  15. 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;
    }
    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!

  16. Is it possible to open some hostnames directly in the reader-view mode?

    As of version 0.3.9, there is a new option to allow observing top-level pages and if the user-provided criteria match, the extension automatically switches the page to the reader view when the page is loaded (you will see the actual page and then conversion to the reader-view mode). Note that for this option to be available, you need to press the "Allow Access" button to grant the extension access to all hostnames which is required to monitor tabs. The list of rules can be either a comma-separated list of hostnames or regular expression rules. The hostname matching is exact which means to redirect wwww.google.com, you need to exactly have www.google.com in the list, not google.com. The regular expression matching uses the entire URL for testing. Make sure to write regular expressions that distinguish keywords in the pathname and query section of URLs. Note that even if the automatic redirect is enabled, the extension still allows navigating to the original page once after entering the reader-view mode. This helps opening links from the original page if they are not included in the reader-view mode.

  17. What is the "User Actions" section of the options page and how can I use it to add custom buttons to my 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"
    }]
    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:
    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 located at "/path/to/a/bash/script.sh". 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".

  18. Where are the Text-to-Speech voices from? Is the speech generated by a cloud server? If so, what corporation is my text being sent to?

    It depends on your TTS voice selection. There are two types of engines. The ones that your operating system generates (sounds like a computer-generated voice, but word highlighting is available), which most likely are offline generations, and the ones that cloud servers generate (better quality; no word highlighting). If the voice name contains the "Google" keyword, then the voice is generated at Google's cloud server. If the voice contains the "Watson" keyword, then it generates by IBM's Watson engine.

  19. Why are the shortcut keys for skipping paragraphs and pausing in the TTS so wacky? Why can't I just use "p" to pause, comma to go back, and period to go forward? Is this some limitation of extensions?

    As of version 0.4.4, you can configure keyboard shortcuts from the options page. Note that you need to refresh the interface for the changes to take place. Also, some shortcuts might conflict with other applications.

  20. Would it be possible to include a left side button and a keyboard shortcut to save the resulting webpage - identifying the link and text content - to be saved directly as a plain text file?

    It is possible to create a new user-action that uses a JavaScript code to create a plain text version of the current document. You can extract different sections and append them per your need. Here is a sample JS code to save a reader-view page that saves the document link, document 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';
    
      for (const page of [...document.querySelectorAll('[id^=readability-page-]')]) {
        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);
    }
    Now you can create a custom user-action button with a custom icon that runs this code when it is clicked. Note that you can use "JSON.stringify" and "String.raw" methods to convert this string into a single-line code that can be pasted into the "User Actions" section of the add-on:

    [
      {
        "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  for (const page of [...document.querySelectorAll('[id^=readability-page-]')]) {\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"
      }
    ]

  21. Is it possible to have an automatic dark mode depending on OS status? I use automatic dark mode on macOS Catalina, and having this add-on switching automatically from Sepia/White theme to Dark theme when the rest of the system does so would be great

    You can use the custom styling section to force your preferred color scheme based on media queries. Since the color scheme of both interface of the extension and the actual reader view needs to be altered, we need two pieces of stylings. First, make sure 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;
      }
    }
    Also, append the following CSS styling to the "Custom styling (top frame and sidebar)" section of the options page.
    @media (prefers-color-scheme: dark) {
      :root {
        --border-color: #cec4ac !important;
        --guide-color: #cec4ac !important;
      }
      body {
        color: #cec4ac !important;
        background-color: #282828 !important;
      }
    }
    Since these CSS stylings are dependent on the color preference of your operating system, whenever you switch to the dark theme, they are going to apply and alter the extension's interface to use these dark colors.

  22. I would like to hide the top metadata section including title, URL, Time to read, and the horizontal line beneath them. Is it 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;
    }

  23. I would like to edit not only the size of the main font but also the headers and other elements. Is it possible?

    This extension tries to change all font relative to the one that the user selects. If you need to alter this behavior, use the "Custom styling (reader view)" section of the options page.

  24. Sometimes the extension fails to detect the actual site's content when converting the page to reader view. Is it possible to still use the reader view with the correct content?

    Before pressing the action button to convert the page to the reader view. Select the entire content that needs to be converted (on the original page). This way, the extension only parses the selected content instead of using the internal engine to find the relevant content. This feature is also useful if you need to read a portion of a page. Also, there is an editing tool in the left toolbar that can be used to erase part of the rendered content.

Matched Content

Preview

Reviews

Please keep reviews clean, avoid the use of improper language and do not post any personal information.
  • <a> Defines an anchor.

    Example: <a href="http://add0n.com">a sample link</a>

  • <pre><code> Syntax Highlighting (Supported languages: Bash, JSON, HTML, JavaScript, and CSS).

    Example: <pre><code class="javascript">var foo = 'bar';</code></pre>

  • <strong> Defines bold text
  • <blockquote> Defines a long quotation
  • <caption> Defines a table caption
  • <cite> Defines a citation
  • <em> Defines italic text
  • <p> Defines a paragraph
  • <span> Defines a section in a document
  • <s> Defines strikethrough text
  • <strike> Defines strikethrough text
  • <u> Defines underlined text
  • <br> Defines a single line break; can be used alone and don't need an ending tag

What's new in this version

Version--
Published--/--/--
Change Logs:
    Last 10 commits on GitHub
    Hover over a node to see more details

    Need help?

    If you have questions about the extension, or ideas on how to improve it, please post them on the  support site. Don't forget to search through the bug reports first as most likely your question/bug report has already been reported or there is a workaround posted for it.

    Open IssuesIssuesForks

    Permissions are explained

    PermissionDescription
    storageto save user preferences across browser restarts
    activeTabto inject the Readability script to the activate tab after user requested so
    contextMenusto add optional context menu items to the link and page contexts
    notificationsto show notifications to the user
    declarativeContentto show page action button when an HTTP or HTTPS page is loaded
    chrome://favicon/To show favicons

    Recent Blog Posts on add0n.com