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
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 triggeror 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
* in the Site match pattern accepts any text. You can use the * in the URL scheme, domains, and at the end of the pathWhen 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
- We now will tell the Highlight brick which elements to highlight. To do so, we’ll look at what kind of element the comments on the page are. Click the arrow button next to “Choose a selector…” to put PixieBrix into selection mode:
- Hover your mouse over a comment, and PixieBrix will indicate the element type is a
span.
- 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
containsselector in the same elements field that was just populated. Provide the following value to the field. - 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
divtag. - 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:
- 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.
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”The elements field should look like this.
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.