In this tutorial, you'll build a mos that translates the language of text you highlight.
You’ll build the mod on this page: la Repubblica (an Italian newspaper)
Check out the video to watch the build, as well as the full step-by-step tutorial that follows.
Open the Page Editor
Start by navigating your browser to la Repubblica. Then open the PixieBrix Page Editor.
Grant PixieBrix Access to the Page
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:
Add a Context Menu
Click Add in the top left of the Page Editor and choose Context Menu
Give your action a Name
In the Brick Configuration Panel, change the Name to “Quick Start Guide”.
Then, in the Mods Panel, click save icon:
Configure the Menu Item Title
In the brick configuration Title input, replace "Context Menu Item" with "Translate: %s"
{{ 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 exciting will happen until we add the logic.
Configure where the Context Menu Appears
URL Match Patterns
- 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
Automatic Permissions
- 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:
👏👏👏 Nice job! You’ve configured your first context menu! Let’s keep going…
Add the Google Translate API Integration
Add the Integration
We'll first need to add the Translate brick. Click the "Add Button"
Search "translate" and +Add the Translate brick
Choose the Integration Configuration
In the Integration dropdown, choose "Google Translate (RapidAPI) - ✨ Built-In"
Configure the Brick Inputs
As you’re starting to learn, you build in PixieBrix by composing Bricks, adding one brick after another to create the desired functionality.
Each brick passes information on to the next brick. In other words, an “Output” from the proceeding brick is used as the “Input” to a subsequent brick.
Let’s put this into context…
The goal of this mod is to translate the language of text you highlight.
Therefore, the output of the “Context Menu” brick (which we use to highlight text), will become the input to the “Translate” brick (which translates the text).
Let’s give this a try…
The Data Panel
Now that we’re working with brick inputs and outputs, it’s helpful to become familiar with the Data Panel. The Data Panel is on the right hand side of the Page Editor.
Populate the Data Panel
- 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
Use the Context tab to view available brick inputs
- 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.
Use selectionText to configure the query input
- 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
- Next, paste the copied text into the "query" Input of the brick configuration
@input.selectionText. In PixieBrix, the “@” denotes a variable. Therefore, @input.selectionText is a variable who’s value will change dynamically based on the text you highlight. Configure the “target” language
- 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.
Test the Google Translate API integration
- 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
Display the Translation in a Window Alert
Add the Window Alert brick
- Let’s display the translated text in a Window Alert.
- Click Add Brick, search "window alert" and +Add it
Configure the Window Alert
- 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)
- Next, paste the copied text into the "message" Input of the brick configuration
Finally, Save your mod…
Test your mod
You’ve created an 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!
Drumroll please 🥁🥁🥁 …
- 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 form with the translated text
Looks like Norway won Olympic Gold and set a world record in the 400 hurdles.