Before you begin this tutorial, make sure you've completed the Quick Start Guide
This tutorial will use the PixieBrix Context Menu to convert currency for any amount we highlight. We'll use this Thrillist article to develop our mod.
If you get stuck, you can install a prebuilt version of this mod from the marketplace.
1. Context Menu
Open the Page Editor
Start by navigating your browser to Thrillist. Then, open the PixieBrix Page Editor.
Need help opening the Page Editor? Follow the steps here:
How To Open the Page Editor (2 min)
Grant Access
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
If you had the Page Editor open before navigating to the Thrillist page, you'll need to close it by clicking the X in the top right corner and re-open it to provide access.
Add a Context Menu
- Click Add in the top left of the Page Editor and choose Context Menu.
- In the Title field, replace "Context Menu Item" with "Convert: %s"
The "%s" portion will configure the caption to change dynamically based on your highlighted text. Note this convention is different than the mustache braces {{ used in other places in PixieBrix. It's because Chrome fills in the selected text (not PixieBrix) for the context menu item.
- To test your context menu configuration:
- Highlight $5,964 on the webpage
- Right-click to expand the context menu. It should look like this
Configure Where the Context Menu Appears
- In the Sites field, click All URLs. This tells PixieBrix to show the context menu item on any webpage you visit
- Scroll down to the Advanced Configuration. In the Advanced Permission section, click All URLs. This gives PixieBrix access to a page without you first clicking the context menu
2. Add the Convert Currency brick
- We'll first need to add the Convert Currency brick. Click the "Add Button"
- In the Brick Selection modal, search "Convert currency" and click + Add.
- As mentioned at the beginning of this tutorial, we'll use the PixieBrix Right-Click Menu to perform currency conversion on any amount we highlight. We can represent our highlighted text as
@input.selectionText - We'll input the variable
@input.selectionTextin the Amount input field
3. Add the Window Alert brick
- Now that we've added the Convert Currency brick, we'll add the Window Alert brick to display the converted value as an alert. Click the + icon.
- In the Brick Selection modal, search "Window Alert" and click + Add.
- We can represent the output of our Convert Currency brick as the following variable
@transformed2.value - We'll input the variable
@transformed2.valuein the Message input field - Let’s also change the Duration to 5000 milliseconds so
5. Test Your Currency Conversion Action
- To test your mod, highlight $5,964 and, right-click on the page, select the context menu “Convert...”
- You’ll see a form appear allowing you to select which currency it’s converting from and to, then click Submit.
- After submitting, you’ll see a pop-up with the converted amount.
Need some help with building? Head over to the Slack Community, and we’ll be happy to help you!