Before you begin this tutorial, make sure you've completed the Quick Start Guide
Have you ever wanted to highlight a piece of text in a long page so that you can quickly identify it on the fly?
And do you want to support multiple keywords at once - instead of relying on the Find function of your browser?
For example highlight every word on the page that is either “red” or “blue” or “black” - at once?
This tutorial will show you how to do that. We're going to use the website Hacker News the base use case for this extension to work.
Let's pretend we want to highlight every single time someone mentions the word “disclosure” as a reply to a thread on Hacker News. The reason we want to do that is that - when people work for a certain company which is the subject of a discussion - they tend to have a biased or jaded perspective of the matter at hand.
1. Add a Trigger
Open the Page Editor
Start by navigating your browser to this HN page: https://news.ycombinator.com/item?id=30086553 Then, open the PixieBrix Page Editor.
Need help opening the Page Editor? Follow the steps here:
The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page. You can grant permanent access by either:
- Clicking Grant Permanent Access, or
- Granting temporary access by clicking on the PixieBrix extension in the Chrome Extensions dropdown and then refreshing the page
Adding the Page Load Trigger
- Use the Add menu to add a Trigger. This triggers gets activated when the page has successfully loaded.
- Set the field Extension Name value to something like
HN highlighter extension
- Set the field Sites to be
https://news.ycombinator.com/item*this will ensure that the extension only runs on this specific subpage of HN
When you’ve done the above steps, your Extension Configuration Panel should look like this:
2. Add the highlighter brick
- Go ahead and click the Add a Brick + button to add a new brick - we’ll be adding a brick called “Highlight”. As the marketplace opens up search it by name and Add it.
- We will configure this brick as follows:
- Click on elements (the field looks disabled by default).
- Click on the icon to the right of the field and select Array Items, then click the blue button that appears Add Item
- Now provide the following value to the Selector field:
span:contains('Disclosure'), span:contains('DISCLOSURE'), span:contains('disclosure')
- Let’s now add another selector by clicking Add Item
- Once again we’re setting the value of this new Selector field to:
div:contains('Disclosure'), div:contains('DISCLOSURE'), div:contains('disclosure')
This is what it should look like:
The reason for doing this is that on Hacker News, comments are either div or span HTML elements, the reason for using the different capitalization is that folks might be writing “Disclosure” in different ways and these are the three most common variations of it.
We can now highlight important keywords on page-load - and using this method we could have multiple keywords with multiple highlight colors - we would just have to duplicate the highlight brick and configure it with different keywords
Take a look at the video below to see it in action