Right-click Translate Language
Last updated
Last updated
🍎 Before you begin this tutorial, make sure you've completed the Developer Quick Start Guide.
In this tutorial, you'll build a mod that translates the language of text you highlight.
You’ll build the mod on this page: la Repubblica (an Italian newspaper)
Start by navigating your browser to la Repubblica. Then, open the PixieBrix Page Editor.
PixieBrix does not have access to any of the web pages you view by default.
Therefore, the first time you open the Page Editor on any new webpage, you need to grant PixieBrix access to the page.
You can grant access by clicking Enable PixieBrix on [Webpage] in the Page Editor:
Click New Mod in the top left of the Page Editor and choose Context Menu
In the Brick Configuration Panel, change the Name to “Quick Start Guide”.
Then, in the Mods Panel, click save icon:
Clicking the Save icon will bring up a modal for Packaging a Mod. Set an alias (like a username) if you haven't already and give the mod a unique ID and description, then click Create.
In the brick configuration Title input, replace Context Menu Item with Translate: %s
💡The "%s" placeholder configure the caption so that 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; do not click it yet - as nothing will happen until we add more bricks.
In the Sites field, click All URLs. This tells PixieBrix to show the context menu item on any webpage you visit.
You can remove the match pattern configuration that defaulted to https://www.repubblica.it/* given it’s included in All URLs. Do this by clicking the ABC entry mode dropdown and choosing Remove
💡When creating a Context Menu, configuring Automatic Permissions grants PixieBrix access to pages without you first clicking the context menu. For context menus, this helps ensure PixieBrix knows which text you have selected
Scroll down to the Advanced configuration. In the Automatic Permissions section, click All URLs
Once again, remove the match pattern configuration that defaulted to https://www.repubblica.it/* as you did above
The Page Editor Configuration should now look like this:
We'll first need to add the Translate brick. Click the "Add Button"
Search "translate" and +Add the Translate brick
In the Integration dropdown, choose "Google Translate (RapidAPI) - ✨ Built-In"
💡Integrations can have multiple configurations (e.g., because you have multiple accounts with the service). The integration dropdown lets you choose the appropriate configuration for a given a given actions or enhancement.
Learn more about Configuring Integrations.
You build mods by composing bricks, adding one brick after another to create the desired workflow.
Each brick passes information to the next brick. In other words, an “Output” from the proceeding brick can be referenced as as the “Input” to a subsequent brick.
To understand this concept, it’s helpful to become familiar with the Data Panel. The Data Panel is on the right-hand side of the Page Editor.
By default, the Data Panel is blank. To populate it, you’ll need to run your context menu.
You can run the context menu by highlighting any text on the webpage, such as "oro e record del mondo nei 400 ostacoli," right-click, and then click the PixieBrix context menu action.
Now the Data Panel’s tabs are populated with information to help you configure the brick
You can use the Data Panel’s Context tab to show the available inputs for the brick.
Click the Context tab, and you should see two input keys:
Click the @input key to see all the available values.
For this tutorial, you’ll use selectionText, which contains the text you highlighted. Scroll down to find it:
Click the page icon next to selectionText to copy its property path to your clipboard: @input.selectionText
💡Notice the “@” in @input.selectionText. In PixieBrix, the “@” denotes a variable. Therefore, @input.selectionText is a variable whose value will change dynamically based on the text you highlight.
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 the target to "en" which is the two-letter abbreviation for English.
Click Save.
💡Here's Wikipedia's list of two letter language abbreviations: List of ISO 639-1 codes
Highlight any text on the web page, such as "oro e record del mondo nei 400 ostacoli," right-click, and then click the PixieBrix context menu action.
The Data Panel will refresh. Navigate to its Output tab, and you should see that your highlighted text has been translated to English
Let’s display the translated text in a Window Alert.
Click Add Brick, search "window alert" and +Add it
Once again, execute the mod to populate the Data Panel
Go to the Context tab, and click the @transformed key to expand it
Click the page icon next to translatedText to copy its property path to your clipboard: @transformed.translatedText (Look familiar? We just saw this when viewing the brick output in the prior step)
Finally, Save your mod…
You’ve created a mod made up of three bricks:
Context Menu: used to select text from the page
Translate: translates the text from a source to a target language
Window Alert: displays the translation in a popup alert
Since you saved the mod, you can close the Page Editor and test it out!
Highlight any text on the page, such as “Prestazione pazzesca del norvegese”
Right-click, and select the PixieBrix context menu
PixieBrix should show a pop-up with the translated text
🙋Need some help with building? Head over to the Slack Community, and we’ll gladly help you!
