# Right-click Currency Conversion

{% hint style="info" %}
🍎 Before you begin this tutorial, make sure you've completed the [Developer Quick Start Guide](https://docs.pixiebrix.com/quick-start/mod-developer).
{% endhint %}

This tutorial will use the PixieBrix Context Menu to convert currency for any amount we highlight. We'll use this [Thrillist](https://www.thrillist.com/news/nation/worlds-most-expensive-burger-robbert-jan-de-veen) article to develop our mod.

If you get stuck, you can [install a prebuilt version of this mod from the marketplace](https://www.pixiebrix.com/marketplace/c65afa44-298f-4340-8c47-4da5ebff44ce/currency-conversion-tutorial/).

### 1. Context Menu

#### Open the Page Editor

Start by navigating your browser to [Thrillist](https://www.thrillist.com/news/nation/worlds-most-expensive-burger-robbert-jan-de-veen). Then, open the PixieBrix Page Editor.

{% hint style="info" %}
📘 Need help opening the Page Editor? Follow the steps here: [open-the-page-editor](https://docs.pixiebrix.com/platform-overview/page-editor/open-the-page-editor "mention")
{% endhint %}

#### 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\
  ![](https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FGigRuEMgzx3x1dDGxBJs%2Fimage.png?alt=media\&token=e5aef56e-f241-4b18-8dd0-018f4e7db85f)

{% hint style="warning" %}
🚨 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.
{% endhint %}

#### Add a Context Menu

* Click **New Mod** in the top left of the Page Editor and choose **Context Menu.**<br>

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FQQz2dI1CCmTsFn5PEPgg%2FCleanShot%202024-10-16%20at%2009.25.34.png?alt=media&#x26;token=3a78df34-37c8-4b44-b1c2-0310312d9e82" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
&#x20;💡 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.
{% endhint %}

* 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

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FM8pDVFY0LmNkl7DiaS8r%2Fimage.png?alt=media&#x26;token=ad7defe6-46b8-453d-bdc0-76c8b101d708" alt=""><figcaption></figcaption></figure>

#### 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<br>

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F9VJZmcyptXzGwJH0VNjh%2Fimage.png?alt=media&#x26;token=08da2075-d5d9-487c-9f8a-8c50fc223a2e" alt=""><figcaption></figcaption></figure>

### 2. Add the Convert Currency brick

* We'll first need to add the Convert Currency brick. Click the "Add Button"

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FNU3BWilCNy4g09E3oLa5%2Fimage.png?alt=media&#x26;token=132642ad-87b3-4fde-9061-eb3f002f53c1" alt=""><figcaption></figcaption></figure>
* In the Brick Selection modal, search "Convert currency" and click **+ Add.**<br>

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fjp6OIAoaZ5XLfv1TNutY%2Fimage.png?alt=media&#x26;token=1ca33349-cc0f-4ef4-a706-160365dee263" alt=""><figcaption></figcaption></figure>
* 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<br>

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F4k725WlzpGTvLbGLIr7j%2Fimage.png?alt=media&#x26;token=8318a380-63b6-44de-b7e2-c81f74a1011a" alt=""><figcaption></figcaption></figure>

### 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.**<br>
* 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

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FqkWSuQR65dv6u4Q7DlmT%2Fimage.png?alt=media&#x26;token=595e6e09-85bf-4811-ac1a-9e4e0bf0e951" alt=""><figcaption></figcaption></figure>

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

![](https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fq9npnZSVNwtioeLOZkVu%2Fcurrency-converter-demo.gif?alt=media\&token=174c92d2-4eb4-4902-bfb4-ea2deba57869)

{% hint style="info" %}
&#x20;🙋 Need some help with building? [Head over to the Slack Community](https://slack.pixiebrix.com/), and we’ll be happy to help you!
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pixiebrix.com/tutorials/developer-tutorials/beginner/right-click-currency-conversion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
