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.

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
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.

Click New Mod 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:
1. Highlight $5,964 on the webpage
2. Right-click to expand the context menu. It should look like this

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 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.