Help

Super Simple Highlighter is a 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. The extension contains no adverts, no tracking, and no analytics.

Highlights can be styled in many ways, most obviously by their 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 pin specific extensions, 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

For new installations of the extension, Chrome will request your permission to make and restore highlights for each unique site you visit. However, installations which have been automatically upgraded from version 4 to 5 will only be requested once, after which permission is implied for all sites. 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 another menu, with the following options:

1. Undo: Remove the last highlight you made on this page.
2. Remove All Highlights: Remove every highlight you have made on this page.
3. Options: Opens the Options page (discussed later).
4. Help: Opens the extension’s help page (which you’re currently reading).

Next to this is the Summary button. This also opens a 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 the corresponding highlight come into view. Clicking the 3-dot Overflow button at the end opens another menu. The options are as follows:

1. Copy: Copies the text of the highlight onto the clipboard.
2. Select All: Selects the text of the highlight on the page.
3. Start Speaking: Uses Chrome’s built-in Text-to-Speech service to speak the text of the highlight.
4. Remove Highlight: Removes 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 directly from 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.

1. From Chrome’s Extensions page Click the Details button, then the Extension options link.
2. 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 Options.

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

Styles

This is where the set of highlight styles is 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 several 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:

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

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

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

3. Appearance: Options controlling how the highlight is formatted on the page.

   1. Block Quotation: Style the highlight as a quotation, in its own dedicated 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.

4. Filters: Cosmetic filters applied to text after highlighting.

   1. 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.
   2. Drop Shadow: Apply a drop shadow effect to the text within the highlight, which can be useful in some cases to make the text stand out.
   3. Blur: Apply a blur filter to the text, acting as another form of redaction.
   4. 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 it with caution.

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

6. Font Family: Options controlling the choice of font typeface.

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

7. Interaction: Options controlling how interaction using the pointing device (mouse, trackpad etc)

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

1. 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 removed. By default, it is enabled.

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

3. 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 website, and hopefully apply the highlights to the page. Click the close button in the top-left corner of each 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 an 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 the web page is reloaded, its contents MUST be exactly the same, both visibly and in its internal structure.

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 URL changes: The same page can 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 the 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 more reliably, but it is 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 looks fine, but breaks the 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.

Frequently Asked Questions

expand all collapse all