💱

Right-Click Currency Conversion (5 min)

🍎

Before you begin this tutorial, make sure you've completed the Quick Start Guide

In this tutorial, we'll use the PixieBrix Right-Click Menu to perform a currency conversion on any amount we highlight. We'll use this Thrillist article to develop our extension.

1. Right-Click 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:

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
  • image

🚨

If you had the Page Editor open before navigating to the Thrillist page, you'll need to close the Page Editor by clicking the X in the top right corner, and then re-open it to provide access.

Add a Context Menu

  • Click Add in the top left of the Page Editor and choose Context Menu, and + Create New Context Menu
  • image

  • In the Title field, replace "Context Menu Item" with "Convert: %s"
💡

The "%s" portion will configure the caption so it dynamically changes based on the text you highlight. Note this convention is different than the mustache braces {{ used in other places in PixieBrix. It's because for context menu items, Chrome is filling in the selected text, not PixieBrix.

  • To test your context menu configuration:
    • Highlight $5,964 on the webpage
    • Right click to expand the context menu. It should look like this
image

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 Exchange Rate API Integration

  • We'll first need to add the Exchange Rate brick. Click the "Add Button"
  • In the Brick Selection modal, search "Exchange Rate" and click + Add Brick

3. Add the Convert Currency brick

  • Now that we've added the Exchange Rate brick, we'll add the Convert Currency brick. Click the "Add Button"
  • In the Brick Selection modal, search "Convert currency" and click + Add Brick
  • As mentioned at the beginning of this tutorial, we'll use the PixieBrix Right-Click Menu to perform a 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
  • image

4. 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 "Add Button"
  • In the Brick Selection modal, search "Window Alert" and click + Add Brick
  • 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
image

5. Test Your Currency Conversion Action

  • To test your extension, right-click $5,964 and click
  • Change the "To Currency" to another currency such as "EUR" and click Submit
  • PixieBrix should show a pop up form indicating the converted amount