Help

Super Simple Highlighter

See also: Frequently Asked Questions

Overview

Super Simple Highlighter is a Microsoft Edge browser Add-on that has two main functions:

  1. Apply a highlight to selected text on a web page.
  2. Restore those highlights whenever the same page is revisited.

This process is completely private. The location and contents of your highlights never leave your browser. The extension contains no adverts, no tracking, and no analytics.

Highlights can be styled in many ways, most obviously by colour (of the highlight and the text on top of it), but also by font attributes (bold, italic, etc), font family (fixed-width), and appearance (as a quotation block). Filters can also be applied, such as blur and zoom. Highlights on a single page are collected in a popup window from where they can be listed and navigated, and from there a summary page can be shown, which can be saved or printed.

Installation

Upon first installing the extension, the only visible evidence should be a pen icon in the extensions section of the toolbar. By default, extension icons are hidden inside the jigsaw icon. You can can show specific extensions in the toolbar by clicking the eye icon, which brings them into the main toolbar.

By clicking the pen icon, the current page’s highlights will be listed. If this is your first time, your permission will be requested.

Permissions

Edge will request your permission to make and restore highlights for each unique site you visit. If you deny the request (or don’t choose anything that may request permission), the page remains completely unchanged. This opt-in behaviour is also a security measure.

Operation

To make a highlight, select the text on the web page as you normally would, then right click, and choose the highlight style from the Super Simple Highlighter entry in the menu that appears. The first style in the list is the default style, which initially will be the style titled Red. Upon selection, if this is your first time, a permission dialog may be shown (see the previous section).

If all goes well, the text will be highlighted. The next step is to see whether those highlights reappear when the page is reloaded or revisited. Try refreshing the page, and hopefully the same highlights will appear in the same place on the page (there are many reasons why this can go wrong, which are discussed later).

Assuming that worked, next observe the pen icon in the toolbar, as discussed in the installation section. There should be a badge on the icon, displaying the number of highlights on the page. Click the icon, and a popup window should appear. At the top of the window is a menu bar. On the far left is a button which opens to another menu, with the following options.

  • Undo

    Remove the last highlight you made on this page.

  • Remove All Highlights

    Removes every highlight you have made on this page.

  • Options

    Opens the Options page (discussed later).

  • Help

    Opens the extension’s help page (which you’re currently reading).

Next to this is the Summary button. This also opens its own menu, and choosing Open from the list will open a new page, containing the text of every highlight on the current page, in a format similar to the popup window. A useful property of this page is that it can be printed, or saved as an HTML file. If you do choose to save the summary as a file, you must choose the Web Page, Complete or Web Page, Single File format, or else the style information will not be included in the page.

Next along is the Sort Order menu, allowing ordering of highlights by Date (time of latest highlight), Position (position on the page), and Style (groups highlights by their common style). The double arrow button next to this flips the sort ordering.

Finally comes the Search box, which filters highlights in the list by the text they contain.

Below that is the list of highlights, each stretched the width of the window. Clicking on a highlight scrolls the page to make corresponding highlight come into view. Clicking the 3-dot Overflow button at the end opens another menu. The options are as follows:

  • Copy

    Copy the text of the highlight onto the clipboard.

  • Select All

    Select the text of the highlight on the page.

  • Start Speaking

    Use the Edge’s built-in Text to Speech service to speak the text of the highlight.

  • Remove Highlight

    Remove the highlight from the page (this can also be accessed by hovering the mouse over the highlight, and then clicking the close button that appears in the top left corner. This also works from directly on the page).

Finally there is a list of highlight styles (the subset of enabled styles). Selecting an item changes the style of the current highlight.

Options

Most of the extension’s main functions are controlled from the Options page. It can be accessed in many ways.

  • From the Edge’s Extensions dialog

    Click the 3-dot button next to the extension name, then click Extension options in the menu.

  • From the Popup window

    Click the pen icon in the toolbar, then the menu button in the top left, then the Options… item, or right-click the pen icon, then choose Extension Options.

Once open, the page consists of three main sections (and an supplemental About section), listed on the left-hand side.

Styles

This is where the set of highlight styles are defined. Initially there are 17 built-in styles, of which 12 are enabled, and 5 are disabled (and therefore can not be chosen). Each style has a number of properties. Most prominent are its title and colours. Click on the tile representing a style to view and edit these properties.

In the dialog box which opens, there are a large number of settings. At the very top, on the right, is an Enabled checkbox. When a style is not enabled it can still be configured, and any existing highlights will still respect the style, but it can’t be chosen as the style for a new highlight.

At the bottom left of the dialog box is a Make Default button. There can be only one default style, and it is always displayed at the top of the list of styles in the context menu. By default it is the Red style.

The remainder of the dialog box consists of properties that define the style. From top to bottom, they are as follows:

  • Title

    The name associated with the style. This is displayed in the menu, and optionally in the popup window (as a group heading).

  • Background Colour

    This is what would conventionally be called the highlight colour, or the colour of the pen making the highlight. In this case it is distinct from the text colour, which may also be changed to maintain contrast between the text colour and this colour (which the built-in styles all do). Note also that it has its own Enabled checkbox. If the colour is not enabled, the existing background colour is not changed.

  • Text Colour

    A colour to apply to the text that the highlight is applied to. This colour should provide sufficient contrast against the background colour. This can also be disabled, meaning the existing colour is not changed. It also has an additional Same as Background checkbox. Enabling this means the text colour is whatever the background colour is, meaning the text is effectively hidden. This is a simple way to emulate a redaction function (although it’s more akin to hiding than redaction).

  • Appearance

    • Block Quotation

      Style the highlight as a quotation, in its own section on the page. This is characteristically shown as a box with a thick line down the left-hand side, and text within the box, with heavy padding.

  • Filters

    • Invert

      Apply a basic inversion filter to the visual contents of the highlight, meaning colours take on their opposite chromatic appearance. For example, white becomes black, red becomes cyan, green becomes purple, etc.

    • Drop Shadow

      Apply a drop shadow effect to text within the highlight, which can be useful in some cases to make the text stand out.

    • Blur

      Apply a blur filter to the text, acting as another form of redaction.

    • Scale

      Magnify the highlight’s contents by the factor indicated to the right of the setting’s title. This setting can cause the page layout to shift dramatically, so use with caution.

  • Font Style

    Allows the application of the four basic font styles to be toggled (bold, italic, underline, and strike-through).

  • Font Family

    • Fixed-width

      Selecting this causes the font used by the highlight to be replaced with the browser’s default monospace font (such as this example). This is useful for text in which wide characters (such as W or X) should be the same width as narrow characters (such as I or f).

  • Interaction

    • Allow Text Selection

      This setting is enabled by default, meaning the text of the highlight can be selected with the mouse, as is the case normally. Disabling this means the text can’t be selected, meaning the redaction-related styles (like Blur, or Same as Background) don’t reveal the underlying text, as they would when normally selected.

Finally, at the bottom of the dialog box is the Update button. Click this to apply the modified properties to this style, or click Cancel to keep the existing settings.

You can also create a new style, by clicking the Create New Style button. It enables a new style to be created from scratch, rather than modifying an existing style

At the bottom of the window there are a group of settings

  • Retain text selection after highlight is applied

    When enabled, the text selection is not cleared when a highlight is made from the selected text. When disabled, the selection is remove. By default it is enabled.

  • Allow highlights within highlights

    If text is selected within the bounds of an existing highlight, then when this option is enabled (which is the default), it is possible to make a highlight with a different style within the existing highlight. If not, the existing highlight’s style is changed to that of the new highlight.

  • Soften edges around highlights

    When enabled, highlights are blurred around their edges, giving them a softer appearance, as was the style of the old version of the extension.

Pages

This section contains a list of all the pages known to the extension that contain highlights. It is similar to the popup window that appears when clicking on the pen icon in the toolbar. Alongside the “Page” tab is the number of unique web pages in the database that contain highlights, and at the top of the section is a count of the total number of highlights on every page.

Each page is grouped within a section, as defined and ordered by the selected item in the dropdown menu in the main title area. The default grouping is by Title, meaning it is grouped by the first letter of the page’s title. You can also group by Date Created (the date the first highlight was made), Date Updated (the date the latest highlight was made), and by Highlight Count (total number of highlights on the page).

By clicking either the page’s title text or the disclosure arrow, the highlights of the page are displayed. The text of the highlight is called its “Snippet”. Although a copy of the entire snippet is always included with each highlight, only the first 5,000 characters are displayed. Click the “More” link at the end of the text to see the entire snippet, or choose “Expand All Snippets” from the “Page” dropdown menu, which is displayed alongside the page’s title.

Click the page’s web address (or click the Share icon, or choose “Open Site in New Tab” from the menu) to open the associated web site, and hopefully apply the highlights to the page. Click the close button in the top-left corner of each individual highlight to remove it from the page, or choose “Remove All” from the menu to remove every highlight on the page.

Each group also has a menu, shown by clicking the 3-dot icon at the right edge of the label. These options are as before, but apply to every item within the group.

In the same manner, the menu button alongside the main title contains the same options, but will apply to every item in every group.

Maintenance

This section contains functions related to the maintenance of the database, broken up into 3 sections.

  • Backup (beta)

These buttons allow you to save (export) a file containing all your highlight styles and highlight locations, and then later load (import) the file, replacing all existing styles and highlight data with those contained in the file.

  • Database

This group relates to underlying database that stores the location of each highlight, and a reference to the style it should use. In the title bar the amount of storage used by the database is shown. Note that this may not immediately change when highlights are added or removed, as only the browser can choose the optimal time to adjust the amount of storage used.

The Optimise button tries to remove any database entries that can safely be deleted, to save some storage space. You shouldn’t have to use this in normal operation as it will eventually happen automatically. It also may take a long time.

The footer of the section is labelled Active Tasks. Whenever a task is active, the section’s button shows a rotating icon. During normal operation the database is sometimes Indexing, which is a task that optimises the database to allow faster searches in the future. Compaction is a task that attempts to remove storage items that are no longer required, and the Replication task is active when the database is being exported (as a file).

  • Extension

This group contains general items related to the extension. The Diagnostics button saves a file containing information about your highlight styles and locations, but redacts any personal information, allowing the file to be shared with and help the developer, without revealing any personal data.

You can also Reset Styles, which removes any changes you have made to existing styles, and any custom styles you have made, and replaces them with the default set of 17 styles. Any existing highlights are not removed, although if they used a style you had newly created, they will lose any styling they had.

Finally, you can Erase All Content and Settings, meaning every setting and every database entry is removed, restoring the extension to its state when first installed.

How the Extension Works

When you choose to make a highlight on the selected text, the extension records an entry in its database of the web address (URL) of the page, the style that you wish to use to render the highlight, and the start and end position of the highlight on the page. As you make more highlights, they too are associated with this address.

When you load any web page, a check is made for the URL of that page within the database. If it exists, the “instructions” for how to make those highlights are applied once again to the page. If all goes well, the highlights will reappear in the same place, covering the same text.

How the Extension Doesn’t Work

Everything in the previous section relies on one fundamental concept:

Every time you reload a web page, its contents (both visibly and in its internal structure) MUST be exactly the same.

If any step in the chain fails, everything after it will fail, meaning the highlight won’t be restored correctly (or not at all).

  • The page’s URL changes.

    It is possible for the same page to appear at two different addresses. Perhaps the address is different whether or not you’re logged in, or some security measure means a random number is added to the address. The extension can’t match these addresses.

  • The structure of the page changes on each visit.

    The extension relies on the highlight to be located at the same part of the page every time. It does this by storing the location of the start and end of the highlight. For example, “eighth section down, in its 5th paragraph, from the 5th to the 20th character in that paragraph”.

    Perhaps next time the page is loaded, an advert occupies an extra section at the top of the page, pushing everything down. What was once the eighth section is now the ninth, and so whilst the text of the highlight is still on the page, it can’t now be located.

    This example is an extreme case, as the location is preferably stored in a more reliable manner, but it possible. It is more likely to be encountered when sites intentionally obfuscate their structure to prevent ad-blockers or screen-scrapers.

  • The page doesn’t follow the expected rules of the web.

    There are many ways to write a web page that look perfectly fine, but break functionality of the extension. For example, the internal structure of a page can tag its components with a unique identifier. When present, the extension uses these to avoid the problem defined in the previous example. But if the page then uses the identifier again (meaning the identifier is ambiguous, not unique), the previous example’s problem reappears.

If a highlight can’t be restored, its contents will still appear in the list of highlights, but its corresponding place on the actual page won’t be found. This is indicated in the popup window with a red dashed outline around the highlight, and also a diagonal line across the pen icon in the toolbar. The badge on this icon will only indicate the number of highlights it successfully restored when the page was loaded.