Rapid Prototyping: Highlighty (Part 2)

👋

This article was something I wrote back in 2019 as a continuation of Rapid Prototyping: Highlighty, but never finished it. The content here may still be useful for Highlighty contributors.

WebExtensions

Some key features include: (1) the browser object, which lets you store data long-term, add triggers on installation or update, and send messages between scripts, and (2) the manifest.json file which manages extension details like title, version, and scripts.

Chrome’s specifications are slightly different than other browsers, including using an object named chrome instead of browser. Firefox is cross-compatible with this, so we’ll be using the chrome object. See other differences between Chrome and Firefox here.¹

You’ll see this object used throughout this article, e.g. chrome.storage.local, chrome.runtime.onMessage.addListener.

[1] The primary difference we’ll worry about is the chrome v. browser distinction though. Note that the chrome object uses callbacks whereas the browser object uses Promises, so the syntax is slightly different.

More Development Considerations

[HTML/CSS] Trying Airbnb’s CSS styleguide (for the options page). If you look at the Highlighty options page, you’ll see classes and ids in an object-oriented-ish way: .PhraseList__header, #PhraseList--invisible. PhraseList is an object, header is one of its nested objects, and invisible is an object state/modifier. Nested objects have a two underscores separating them from the main object. Modifiers have two dashes. Note that the Airbnb guide advises not to use IDs for styling and to have separate classes for JavaScript handlers, but since this project is small enough, we’re gonna break those rules.

Bulma:Bulma styles pretty much everything in settings.html. Every HTML class name in settings that is lowercase (e.g. div.column, section.hero)¹ is styled by Bulma.

Here’s a screenshot of Bulma’s UI and responsiveness in action.

I also used some Bulma extensions by Wikiki later on for some additional elements to work with.

Extensionifying

So now let’s convert what we had into a Chrome extension with a nice settings page! I had to read up a lot about WebExtensions, referring to these Chrome docs and these Firefox docs.

At Extensionifying section and onwards, you should make a new folder and switch over to your favorite text editor (i.e. Atom). From there, you can load your whole folder into Chrome to test out the extension.

Highlighty Project Structure

As we look at the current Highlighty project structure, we have…

background.js highlighty.js manifest.json options.css options.html options.js updates.html

background.js runs as a background script and catches when (1) the extension is installed or (2) the extension button is clicked.

highlighty.js is the main content script and executes all the highlighting logic

manifest.json is the extension manifest, specifying details like version, title, permissions, and scripts.

options.html, options.css, and options.js are all for the options page.

updates.html is just an updates page that is linked by and links to the options page.

And external libraries (Bulma, jQuery, Mark.js) are included in /lib/ and loaded in options.html and manifest.json. These are loaded locally instead of externally (from a CDN) for security and guaranteed offline support.

lib/bulma.min.css lib/jquery.3.3.1.min.js lib/jquery.mark.min.js

Let’s create a Lite version of this extension!

Extensionifying the Script

Let’s make a highlighty folder with an empty manifest.json and highlighty.js containing everything the JS we wrote from before.

We also need to include libraries mark.js, jQuery, and Bulma.

Here’s a .zip with those three libraries, a basic manifest.json and the highlighty.js from earlier. Or you can grab jQuery, mark.js, and Bulma.css yourself and rename them accordingly.

Note: I'll still be using JSFiddle but you should be working in an external editor like Atom.

[...manifest stuff....]

Making the extension button do work

[...making the button work..]

Options: Configurable phrase list

The whole point of making a Chrome extension is so users can customize their highlight phrase lists. So let’s add an options page using Bulma components from the get-go and let people set up phrase lists.

HTML

First, let’s make a mock of what we want to create. For now, we want to support functionalities: (1) add a new phrase list and pick title and color, (2) add phrases to those lists.

[…Bulma talk…]

Now let’s add the bindings to make these buttons actually work.

Bindings

[…]

Here's the full code for everything put together.

8. Options: More configuration

You can do these on your own if you want and then check Highlighty's source code after!

(1) Let users decide if they want to have case-sensitive highlighting.(2) Let users change the name of their phrase lists and delete them.

And now we’ve got a pretty functional highlighting app that almost beats one that has 130,000+ users! You'd just need to add auto-highlighting to have all its features.

Lots more development to Highlighty has been done, like adding a ton of new features: import/export, auto-highlight mode, and more. Check out GitHub to see all of that.

Product

Some product-related considerations were:

What key features are important to customize the highlighter? What should be prioritized?I got a lot of great feedback from beta testers that helped me prioritize and kept a running list of possible features as issues on GitHub. Some examples:Really importantImport / export feature to copy and paste phrase lists- Partial matching option — let user decide if “Lor” matches on “Lorem” - Enabling auto-highlight, so user doesn’t have to press a button to activateNot important, nice to haveList alphabetization - Individual phrase list custom styling

What security requirements are there?(1) use only trusted libraries, loaded locally instead of externally(2) use no analytics scripts (Google or otherwise)(3) set up GitHub protected branches, be strict on PRs(4) no network calls, if user wants to keep local backup that’s on them(5) phrase lists are private! we shouldn’t be pushing/pulling lists to/from pastebin or anything like that

How can we allow for ease of transferring to this extension from its competitors with cross-compatibility? How do you make the transfer happen?To get people to move from Multi-Highlight or Highlight This, we needed an import feature that allowed for space delimited and new-line delimited lists, since the two extensions used those delimiters.

Import feature; export to Line-Delimited / Space-Delimited formats is also supported.

Design

Some design-related considerations were:

How should the highlighted phrases look? How do you make them look consistently good without considering what the actual pages look like?There’s no one-size-fits-all solution here, since there’s literally any background color or font size and infinite contexts surrounding the text we’re trying to highlight. So what we tried to do is (1) consider the use-cases and ask for example pages that people were using the extension on, (2) create a base extension styling that looked good in most contexts, and to-do eventually: (3) allow users to custom style the phrase lists and their base styles.

What’s the best way to organize the settings page? How do you build a strong user flow for adding and modifying phrase lists?Bulma is really solid for rapid iteration and responsiveness of the settings page, and I spent some time finding the right components. Lots of UI/UX considerations were made for the settings page.For example, one tester made a comment that adding an alert on adding a phrase that said “Phrase added” was disruptive, since users might be making phrase lists with 40+ keywords at a time, so I removed it.