Reader View Declutter webpages for better reading experience
Support Development
PayPal ● 
Bitcoin Address: 1sM2BrTH8BRgt3quiASK8TmYSafutNvDo
 ● 
Ether Address: 0xCf9eaAc56992e12EB61fD46342172d4EEff5C8e4

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

  3. 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.

  4. What's new in this version?

    Please check the Logs section.

  5. 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.

  6. 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.

  7. 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
    Save into HTML formatCtrl + S (Windows), Command + S (Mac)
    Print in Reader View modeCtrl + P (Windows), Command + P (Mac)
    Switch to the fullscreen modeF9
    Switch out of the fullscreen modeESC
    Exit the Reader View modeESC
    Move to the previous pageCtrl + LeftArrow (Windows), Command + LeftArrow (Mac)
    Move to the next pageCtrl + RightArrow (Windows), Command + RightArrow (Mac)
    Toggle Images on and offCtrl + I (Windows), Command + I (Mac)
    Open the Text-to-Speech (TTS) moduleCtrl + Shift + S (Windows), Command + Shift + S (Mac)

  8. 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

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

Matched Content

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