πŸ’±

Right-Click Currency Conversion (4 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.

There's a video at the end of the tutorial demonstrating what’s covered in the text.

1. Right-Click Menu

Open the Page Editor

Start by navigating your browser to Thrillist. Then, open the PixieBrix Page Editor, and grant PixieBrix access to the page.

Add a Context Menu

  • Click Add in the top left of the Page Editor and choose Context Menu, and + Create New
  • In the Menu Item tab, 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

  • Go to the Location tab
  • In the Document URL Pattern section, 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 Automatic Permissions Match Pattern section, click All URLs. This gives PixieBrix access to a page without you first clicking the context menu

2. Identify the Target Data

  • Go to the Data tab
  • Scroll down to where you see two pieces of information:
  • image
  • In a later step we'll configure a Convert Currency action by integrating with a third-party API
πŸ’‘

You can click the πŸ“ƒ icon next to the property path to copy it to your clipboard. This will come in handy when configuring the Convert Currency action later in this tutorial.

3. Add the Exchange Rate API Integration

  • Go to the Integrations tab and click + Add Integration
  • Search "exchange rate" and choose the RapidAPI Exchange Rate API
image
  • In the Service dropdown menu choose "Exchange Rates - ✨ Built-In"
πŸ’‘

Integrations can have multiple credentials associated with them, in which case the Service dropdown lets you choose the appropriate credentials for a given integration. This is most relevant when using the PixieBrix with teams.

4. Add the Currency Conversion and Window Alert Actions

Add the Convert Currency Action

  • Go to the Action tab and click Add a Block
  • Search "convert currency" and choose the Convert Currency action
  • image
  • Paste "selectionText" from Step 2 of this Tutorial in the "amount" field

Add the Window Alert Action

  • Click Add a Block
  • Search "window alert" and choose the Window Alert action
image
  • Type "{{ value }}" into the "message" text box
🚨

We surround myVariable with two sets of braces because the Window Alert brick requires the input value to be a string.

5. Test Your Currency Conversion Action

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