Right-click Currency Conversion
🍎 Before you begin this tutorial, make sure you've completed the Developer 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: Open the Page Editor
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
🚨 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
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.selectionText
in 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.value
in the Message input fieldLet’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!
Last updated