Comment on page
Web Highlighter Tutorial
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.
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.)
Next, open the PixieBrix Page Editor.
The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page.
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 path
When you’ve done the above steps, your Brick Configuration Panel should look like this:
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
containsselector 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')
containsselector 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.
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
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:
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
disclosureon 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
backgroundColorfield and keywords in the selectors.