🦜

Right-Click Translate Language (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 translate the language of text we highlight. We'll use this la Repubblica 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 la Repubblica. 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 "Translate: %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 "oro e record del mondo nei 400 ostacoli" 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 Translate 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 Google Translate 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 "Google Translate - ✨ 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 Google Translate and Window Alert Actions

Add the Convert Currency Action

  • Go to the Action tab and click Add Brick
  • Search "convert currency" and choose the Translate action
  • image
  • Paste "selectionText" from Step 2 of this Tutorial in the "query" field
  • The "source" and "target" fields represent the source and target languages for the translation. If you leave the "source" field blank, the API will try to detect it. For this tutorial, I'll leave the "source" field blank and change target to "en" which is the two letter abbreviation for English.
πŸ’‘

Here's Wikipedia's list of two letter language abbreviations: List of ISO 639-1 codes

Add the Window Alert Action

  • Click Add Brick
  • Search "window alert" and choose the Window Alert action
image
  • Type "translationedText" into the "message" text box
🚨

translatedText is the output schema of the Google Translate API we're using in this tutorial. Today there's no way of knowing this yourself, but we're adding it soon.

5. Test Your Language Translation Action

  • To test your extension, right-click some text on the page and click
  • PixieBrix should show a pop up form with the translated teext