Reader View Declutter webpages for better reading experience
Support Development
PayPal ● 
Bitcoin Address: bc1qh7juzrxrawpr65elm4qs285m5rdhnhgsn7h2jf
 ● 
Lightning Address: [email protected]
Your Input Matters
Review
Advertisement
Screenshot
The "Reader View" extension is designed to enhance readability by stripping away clutter like buttons, ads, and background images, and by adjusting the text size, contrast, and layout. It uses Mozilla's Readability library to provide a powerful readability experience similar to the Firefox built-in reader view, and it has a user interface that is very similar to the Firefox version. This extension offers a toolbar with many useful tools for reading, including a text highlighter, a note-taking widget, and the ability to edit the content on the fly and save it in HTML, Markdown, or screenshot format. You can even print the modified version or send it by email.

Features

FAQs

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

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

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

  4. What's new in this version?

    Please check the Logs section.

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

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

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

    CommandShortcut
    Convert to Reader ViewOpen "chrome://extensions/shortcuts" in a browser tab to set one
    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)

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

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

  10. 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%);
    }

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

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

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

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

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

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

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

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

  19. 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);
    }
    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:

    [
      {
        "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"
      }
    ]

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

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

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

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

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

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

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

    • [ORIGINAL]: The original page title
    • [BRAND]: Replaced with "Reader View"
    • [DD]: Current 2-digit day
    • [MM]: Current 2-digit month
    • [YYYY]: Current 4-digit year

Matched Content

Preview

Reviews

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.

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

    Editorial Review

    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.

    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