Help! I Need Somebody

Super Simple Highlighter

Overview

Super Simple Highlighter is a web browser extension 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.

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

The extension requires two groups of permissions to operate correctly.

  • Read your browsing history.

    Technically speaking, this is composed of two specific permissions. The scripting permission is required to run the code that actually applies the highlights to the web page. The webNavigation permission is required so that after each new web page is navigated to, the extension can check whether its address is one for which it has highlights, so it can then try to apply them again to the page.

  • Modify data that you copy and paste.

    This is due to the clipboardWrite permission, which allows the extension to copy the text of the highlight to your clipboard. It will only be requested at the time it is required.

At no time does the extension use these events or information for any other purpose. No external services are used. Everything happens on your computer.

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 format named “Web Page, Single File”, 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 (as mentioned earlier, this may require permission from you to do this. See the Permissions section).

  • Select All

    Select the text of the highlight on the page.

  • Start Speaking

    Use the browser’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 browser’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.

At the bottom of the window there is a checkbox labelled Keep text selection after applying highlight. When this is enabled, the text selection is not cleared when a highlight is made from the text. When disabled, it will be cleared. By default it is enabled.

There are also two buttons. The first is named Create New Style, and it enables a new style to be created from scratch, rather than modifying an existing style. The other is named Restore Default 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 created anew, they will lose any styling they had.

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. All of the highlights for a single page can be removed by clicking the close button icon that appears when hovering the mouse pointer over the page name. All highlights can be removed from all pages using the Remove All Pages button.

If the Show Highlights checkbox is checked, all the highlights of each individual page are shown inline, below the page’s web address. Each individual highlight can be removed in the same manner as the popup window (by clicking the close icon that appears as you hover the mouse pointer over the highlight).

Backups

NOTE: The functions in this section are labelled experimental. This is because there have been reports of errors occurring, causing data loss. Whilst as of version 5 they have been fixed (as far as I’m aware), I’m not 100% confident to deem them trustworthy. So proceed with caution.

The backups section has two main functions.

  • Backup

    This attempts to collect all the current highlight styles and highlight data, and packages then into a single file, which can then be saved for safe keeping.

  • Restore

    This attempts to take the file saved by the Backup function, and restore it into the extension. In doing this, any existing highlight styles and highlighted pages will be removed and replaced with those in the file.

Keyboard Shortcuts

After selecting text, many people prefer to make a highlight using a keyboard shortcut instead of selecting a highlight style from the menu. This can be done by using the browser’s built-in Keyboard shortcuts feature. Go to the browser’s extensions dialog (where all the installed extensions are listed), either by choosing Extensions from the main menu, or clicking the jigsaw button in the toolbar. Then click Manage extensions. Select Keyboard shortcuts, and in the Super Simple Highlighter section, define a shortcut for a specific style. You can assign shortcuts for any of the first 7 styles, and also for whichever style is the current default style.

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.

Known Issues

So far, so good.

FAQ

  • Can I highlight a PDF file?

    No. A PDF file is unrelated to a web page, even though it can be embedded within one. There are many PDF-specific highlighters available.

  • How can I synchronize my highlights between my browsers?

    As of the time of writing, you can’t. Synchronization requires a server, which requires infrastructure, which requires time & money, of which I have neither. The closest current workaround is using the backup and restore function, but as stated in their descriptions above, these are currently in an experimental state. Caveat emptor.

  • Where are the highlights stored?

    Highlights are stored in a database that remains private to the extension. It stays on your computer, and does not get uploaded or download to any server.

  • How can I save a web page with the highlights “baked” into it?

    The browser’s normal Save functionality should include the highlights, but the format MUST either be “Web page, Single File” or “Web page, Complete”

  • How can I use the extension in InPrivate mode?

    The extension is disabled in InPrivate mode, to mitigate the risk of the page’s address being stored in the database should a highlight be made inadvertently.