Web Highlighter Tutorial

🍎 Before you begin this tutorial, make sure you've completed the Developer Quick Start Guide.

Have you ever wanted to highlight a word or phrase on a page so you can find it? Probably, and maybe you even wanted to find multiple keywords instead of just using the “find” search in your browser multiple times.

This tutorial will show you how to do that. We're going to use the tech news forum site Hacker News as an example.

Let's assume we want to highlight every time someone mentions the word “disclosure” in a comment thread on Hacker News. (Commenters often include the word “disclosure” when they work for the company that is the subject of a discussion. These commenters can have an insider perspective, or a unique bias.)

For example:

1. Add a Trigger

Navigate to a Hacker News discussion

Start by navigating your browser to this HN discussion page: https://news.ycombinator.com/item?id=30086553

Open the Page Editor

Next, open the PixieBrix Page Editor.

📘Need help opening the Page Editor? Follow the steps here: Open the Page Editor

Enable PixieBrix on the Page

The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page.

Grant access to PixieBrix by clicking the Enable PixieBrix on ycombinator.com button. Chrome will prompt you to accept access.

Add a Page Load Trigger

Use the Add button on the top left of the Page Editor to add a Trigger.

The Trigger defaults to the Page Load trigger, which runs when the page first loads or whenever you navigate

• In the Brick Configuration Panel, set the field Name field to HN highlighter trigger or whatever you’d prefer to call it.

• Set the field Sites to https://news.ycombinator.com/item* By specifying a site, you ensure that the trigger only runs on the comment pages on the Hacker News website

  • The * in the Site match pattern accepts any text. You can use the * in the URL scheme, domains, and at the end of the path

When you’ve done the above steps, your Brick Configuration Panel should look like this:

2. Add and configure the Highlight brick

Click the + button below the trigger brick in the Mod Overview Panel to add a new brick.

In the Add Brick Modal, search for “highlight”, hover your mouse over the Highlight search result, and click + Add

In the Brick Configuration Panel, we’ll now tell the Highlight brick which elements to highlight

Click on the entry mode toggle on the elements field, and select Array Items

Next, click the blue Add Item button to add an array of item

Click the comment to select it and exit out of selection mode.

When you select an element, PixieBrix determines a unique selector for that element. However, for our use case, we want to highlight all elements on the page that contain the word disclosure

Therefore, we’ll enter our own selector that matches the text using a contains selector in the same elements field that was just populated. Provide the following value to the field.

Copy the following:

span:contains('Disclosure'), span:contains('DISCLOSURE'), span:contains('disclosure')

The contains selector is case-sensitive. Therefore, the above selector uses the multiple selector indicated by a comma , to match any of the typical spellings of the word “disclosure”

📖 Want to see a full list of selectors supported by PixieBrix? PixieBrix uses the popular jQuery library; you can find the full list of supported selectors here

The elements field should look like this.

Next, we’ll scroll through the page to determine if Hacker News uses any other elements tags to show comments.

To add another element to the elements list to highlight, click the blue Add Item button again

Click the arrow button to enter selection mode in the new element row. If you mouse over comments on the page, you’ll see that some comments use the div tag.

Click anywhere on the page to exit selection mode. As before, we’ll instead enter our own selector to match the keyword we’re highlighting:

Copy the following:

 div:contains('Disclosure'), div:contains('DISCLOSURE'), div:contains('disclosure')

One final setting to update! In the condition field, select the ABC option at the end of the row, and select the “X” to exclude the conditional criteria.

The Brick Configuration Panel should now look like this:

3. Run the Trigger

It’s time to try your trigger! To run the trigger from the Page Editor, click the Run Trigger button above the Data Panel.

If you search for the word disclosure on the page, you’ll see that the comment is now highlighted in yellow!

Remember to save your trigger by clicking the save icon in the Mod Panel:

We can now highlight important keywords on the page load. You can use this method to highlight any keywords with multiple colors — you just need to copy the highlight brick and change the backgroundColor field and keywords in the selectors.

🙋Need some help with building? Head over to the Slack Community, and we’ll gladly help you!