Imagine you open a new scientific article and it’s an interesting one but there are some words that are extremely complicated, not everyone took molecular biology in school right?
To understand the context of this article you need some help, and instead of Googling the answer for “what does this mean” every time looking for a definition you just want to right-click on a word and get the definition right there?
Let’s create a tool to quickly give us the definition of hard words we don't usually know - using the power of PixieBrix and Wikipedia (well technically Wiktionary). You will also learn about creating multiple extensions that work together, the Shared page state brick - a nifty way to save data points from one extension to another, and how to trigger the opening of the PixieBrix Sidebars on demand.
Let’s get started
1. Adding the context menu trigger brick
Navigate to any page you like - in this tutorial I am going to be looking for hard to understand words on this page: https://www.frontiersin.org/articles/10.3389/fnhum.2016.00047/full
Press F12 to open the Developer Tools area and go to the PixieBrix Page Editor
From the Add menu add a Context Menu
This is going to give us the ability to right-click anywhere on the page and invoke the PixieBrix automation. Neat right?
We’re going to configure this brick in the following way so that at the end it looks like this:
- Extension Name: I called this one
Define Words - Title: I called this one...once again:
Define words - Sites: Also note that I have clicked on “All URLs” in the section where it says Sites
2. Add Set Shared page state brick
We’re now going to add a new brick to this extension by clicking the big + grey button on the Extension Overview Panel (that's on the left side of the previous screenshot).
We’re going to write “Set shared page state” in the search bar and add the first brick that appears.
This brick allows us to save data in the “memory” of the Page Editor, so we can re-use it in the next part of the tutorial.
This is how we’re going to configure this brick:
First I gave the Output variable the name of memory(top right corner)
then I pressed on the blue button “Add Property”:
- The property name I set it to
lookupWord - The property Value is set to:
@input.selectionTextThe reason I am setting the value to this is that I want the selectionText - which is basically
Then I set the Namespace value to shared because this extension isn’t part of a blueprint!
3. Add Show Sidebar brick
We’re now adding a new brick - this brick will allow us to pop-open the PixieBrix sidebar - we’re doing this now because we have already set up the steps necessary to use select words highlighted and saving it into memory.
This brick is very simple as it does one thing only: It opens the sidebar.
4. Building the sidebar - add a new extension
We’re adding a new extension trigger brick. Hit up the Add button and select Sidebar Panel
Once I added it I configured it with the followings settings.
- Extension Name:
Sidebar definition - Heading:
Wikipedia Definition - Sites:
All URLs
5. Add a brick - Get Shared Page State
Let’s add a brick called “Get Sharead Page state” - after you find it - click the blue button to add this brick under the previous one.
In this step - using this brick - we’re going to pull the data from memory.
If you remember, a moment ago on step 2. we stored the highlighted word using the Set shared page state brick in a variable called memory.
This brick will be configured similarly:
We’re calling the output of this brick @memory (also - just because it makes sense)
Then we’re setting the namespace to shared - this tells this brick to pull the data from the shared namespace rather than somewhere else.
6. Add a brick - Render Document
We’re now adding another brick - this brick is called Render Document - so let’s go ahead search it by this name...and add it.
This is the last brick we’ll be adding and it will allow us to actually populate the data on the sidebar
As you load this brick, select the penultimate box as shown in the picture below, then click the Remove element red button.
This will get rid of all the boxes that we won’t need for this tutorial - sure they look nice but not useful to us, today!
Once you remove them you should be able to see nothing but the body box. Let’s click the three-dot menu and add a block - as shown in the picture below.
Once you’ve added the block, select it by clicking it and you will be able to configure this brick.
Press the “Select Brick” blue-ish button and in the search input field type the word “iframe”
Go ahead and add the iframe brick.
Now we’re going to configure it like this:
- URL: I will set this URL to
https://en.m.wiktionary.org/wiki/{{@memory.lookupWord}}#EnglishThis URL is composed of two parts, the variable @memory.lookupWord which we loaded from memory and the base URL for Wiktionary (mobile version so it looks better and loads faster in the sidebar) - height:
1000pxThe reason why we’re setting the height to 1000px is that we want to make sure the page we’re embedding takes the entirety of the sidebar
And that’s it! We’ve finished configuring this extension, well technically 2 extensions.
Conclusions
We can now go on any website, highlight a word, right-click anywhere on the page and get the Wiktionary definition of it in the sidebar.
This is a pretty common use-case but, you could change this tutorial to call an internal API endpoint or another website to create your own sidebar on word highlight!
