PixieBrix Docs
CommunityTemplates
  • Welcome to PixieBrix!
  • Quick Start
    • Productivity Enthusiasts
    • Mod Developer
    • Team Member
    • Enterprise Admin
  • Activating Mods
    • Linking Your PixieBrix Account
    • Using the Marketplace
      • Finding Mods
      • Activating From the Marketplace
    • Activating Your Assigned Mods
    • Updating Mods
    • Troubleshooting
  • Developing Mods
    • Building Your First Mod
    • Developer Concepts
      • Types of Mods
        • Context Menu Item
        • Button
          • Troubleshooting Buttons
        • Sidebar Panel
        • Trigger
          • Working with Custom Events
        • Quick Bar Action
        • AI Copilot
        • What Are URL Match Patterns?
      • Text Template Guide
        • Basic Text Templates
        • Transforming Data with Filters
        • Writing Conditional Statements
        • Template Examples
      • Using Bricks
        • Brick Input Data Types
        • Bricks for Scraping Data
          • Retrieving Attributes from Elements
        • Bricks for Interacting with the DOM
        • Bricks for AI
          • Passing Custom Data to an LLM
      • Data Context
        • Types of Variables
        • Using Mod Variables
        • Using Page State (Advanced)
        • Referencing Variables
      • User Input
        • Show a Modal or Sidebar Form
        • Prompt for Input
      • Working With APIs
        • API Providers
        • Encoding URL Parts
        • Selecting and Transforming API Results
      • Working with Markdown
      • Control Flow
        • Conditional Field on Bricks
        • Control Flow Bricks
          • When to Use Control Flow Bricks
          • Control Flow Brick Output
          • Raising Exceptions/Errors
          • FAQs
      • Transforming Data
        • Using JQ in PixieBrix
        • Using JavaScript in PixieBrix
      • Building Interfaces
        • Understanding the Preview Panel
        • Styling Elements
        • Adding Advanced Elements
        • Custom Themes/CSS
      • Mod Product Telemetry
      • Advanced: Brick Runtime
    • Customizing Existing Mods
    • Sharing Mods
      • Packaging a Mod
      • Exposing Activation-Time Mod Options
      • Sharing a Mod With Your Team
      • Updating Published Mods
    • Troubleshooting
    • Mod Development Best Practices
    • Advanced: Workshop
  • Platform Overview
    • Page Editor
      • Open the Page Editor
      • Page Editor Components
        • Mod Listing Panel
        • Brick Actions Panel
        • Brick Configuration Panel
        • Data Panel
    • Admin Console
      • Campaigns
    • Extension Console
  • Managing Teams
    • Creating a Team
    • Inviting Members
    • Access Control
      • Roles
      • Groups
    • Managing Team Integrations
    • Assigning Mods
    • Billing
    • Advanced: Isolating Development, Test, and Production Environments
  • Deploying Mods
    • Deployment Keys
  • Integrations
    • Configuring Integrations
    • Integration Scenarios
    • Embed Web Apps via IFrames
    • Integrate with Desktop Apps via Custom URL Schemes
    • Airtable
    • Atlassian
    • Automation Anywhere
      • Configure Automation Anywhere Integration in PixieBrix
      • Embedding the Automation Co-Pilot
      • Running AA Bots via Control Room
      • Creating AARI Requests
      • Enhancing AARI Table Fields
      • Enhancing AARI Forms
      • AARI Extensions Enterprise IT Setup Guide
        • Point PixieBrix Extension to Staging AuthConfig App
      • Create a Control Room Certificate on Windows
    • Google Drive
      • Creating Google Drive Integration
      • Google Drive Bricks
      • Migrating from Google Sheet to Google Drive Integration
      • Reactivating Your Google Sheet Mods
      • Troubleshooting Google Integration Errors
      • Sheety: Sharing Google Sheets without Google Workspace
      • [LEGACY] Configure Google Sheets Integration
      • [LEGACY] Adding a Google Sheet to Mod Input
    • Guru
    • Hunter.io
    • HTTP Basic Authentication
    • Microsoft
      • Connect to Custom Azure Applications/APIs
      • Add a Power BI chart to the Sidebar
      • Microsoft Power Automate
      • Microsoft Office
        • Microsoft OneDrive / Files
        • Microsoft Excel
        • Microsoft Sharepoint
        • Microsoft Teams
        • FAQs & Troubleshooting
    • Notion
      • Public (OAuth2)
      • Internal (API Token)
    • OAuth2 Client Credentials
    • Ollama
    • OpenAI/ChatGPT
    • Pipedrive
    • Retool
      • Embed a Retool App
      • Trigger Retool Workflows
    • Robocorp Control Room Integration
    • Salesforce
    • SerpAPI
    • ServiceNow
    • Slack
    • Streamlit
    • Trello
      • Configure Trello integration
      • Find board and list IDs in Trello
    • UiPath
      • Running unattended bots via UiPath Cloud Orchestrator
      • Embed a UiPath App
      • Running local bots via UiPath Assistant
    • Val Town
    • Zapier
    • Zendesk
    • Advanced: Custom Integrations
  • Storing Data with Team Databases
  • Enterprise IT Setup
    • Authentication
      • Enabling Login with Microsoft
      • Enabling Login with Google
      • Setting Up SAML/SSO
    • Browser Extension Installation and Configuration
      • Browser Extension Installation Policy
        • Google Workspace Policy
        • Windows Group Policy/ADMX
        • Windows Registry
        • Citrix Profile Configuration
        • Advanced: Create a Windows Installer EXE
      • Browser Extension Configuration Policy
        • Extension Authentication Configuration
        • Microsoft Edge Mini Menu Configuration
        • Microphone and Audio Capture Configuration
        • Extension Logo Configuration
        • Managed Storage Schema
      • Browser Extension Security
    • Network/Email Firewall Configuration
    • Custom Branding and Themes
    • Security and Compliance
    • Performance
    • Version Control and Backups
    • Web Application Platform Configuration
    • Enterprise Troubleshooting
  • Developer API
    • Service Accounts
    • Making an API Request
    • Team Management APIs
    • Package Management APIs
    • Deployment APIs
    • Database APIs
    • Health Check APIs
    • OpenAPI Specification
    • Deprecated Resources
  • How To
    • Installing the PixieBrix Chrome Browser Extension
    • Changing the Quick Bar Shortcut
    • Pinning the Chrome Extension
    • Updating the Browser Extension
    • Installing a PixieBrix Pre-Release Build
    • Editing Pages with iFrames
    • Adding bricks to mods
    • Opening the PixieBrix Sidebar
    • Troubleshooting
      • Troubleshooting Bad API Requests
      • Troubleshooting Network Errors
      • Troubleshooting IndexedDB Errors
      • Troubleshooting Browser Extension Performance and Crashes
      • Troubleshooting extension corruption errors
    • Extend my PixieBrix Trial
  • Release Notes
    • 🏗️Release 2.3.1
    • ✅Release 2.3.0
    • 📜Release Notes Archive
      • ✅Release 2.2.10
      • ✅Release 2.2.9
      • ✅Release 2.2.8
      • ✅Release 2.2.7
      • ✅Release 2.2.6
      • ✅Release 2.2.5
      • ✅Release 2.2.4
      • ✅Release 2.2.3
      • ✅Release 2.2.2
      • ✅Release 2.2.1
      • ✅Release 2.2.0
      • ✅Release 2.1.7
      • ❌Release 2.1.6
      • ✅Release 2.1.5
      • ✅Release 2.1.4 (Hotfix)
      • ✅Release 2.1.3
      • ✅Release 2.1.2
      • ✅Release 2.1.1
      • ✅Release 2.1.0
      • ✅Release 2.0.7
      • ✅Release 2.0.6
      • ✅Release 2.0.5
      • ✅Release 2.0.4
      • ✅Release 2.0.3
      • ✅Release 2.0.2
      • ✅Release 2.0.1 (Hotfix)
      • ✅Release 2.0.0
      • PixieBrix Browser Extension 2.0.0 Migration Guide
      • ✅Release 1.8.14
      • ✅Release 1.8.13
      • ✅Release 1.8.12
      • ✅Release 1.8.11
      • ✅Release 1.8.10
      • ✅Release 1.8.9
      • ✅Release 1.8.8
      • ✅Release 1.8.7
      • ✅Release 1.8.6
      • ✅Release 1.8.5
      • ✅Release 1.8.4
      • ✅Release 1.8.3
      • ✅Release 1.8.2
      • ✅Release 1.8.1
      • ✅Release 1.8.0
      • ✅Release 1.7.41
      • ✅Release 1.7.40
      • ✅Release 1.7.39
      • ✅Release 1.7.38
      • 🚫Release 1.7.37
      • ✅Release 1.7.36
      • ✅Release 1.7.35
      • ✅Release 1.7.34
      • ✅Release 1.7.33
      • ✅Release 1.7.32
      • 🚫Release 1.7.31
      • ✅Release 1.7.30
      • ✅Release 1.7.29
      • ✅Release 1.7.28
      • ✅Release 1.7.27
      • ✅Release 1.7.26
      • ✅Release 1.7.25
      • ✅Release 1.7.24
      • ✅Release 1.7.23
      • ✅Release 1.7.22
      • ✅Release 1.7.21
      • ✅Release 1.7.20
      • ✅Release 1.7.19
      • ✅Release 1.7.18
      • ✅Release 1.7.17
      • ✅Release 1.7.16
      • ✅Release 1.7.15
      • ✅Release 1.7.14
      • ✅Release 1.7.13
      • ✅Release 1.7.12
      • ✅Release 1.7.11
      • ✅Release 1.7.10
      • ✅Release 1.7.9
      • ✅Release 1.7.8
      • ✅Release 1.7.7
      • ✅Release 1.7.6
      • 🚫Release 1.7.5
      • ✅Release 1.7.4
      • ✅Release 1.7.3
      • ✅Release 1.7.2
      • ✅Release 1.7.1
      • ✅Release 1.7.0
      • ✅Release 1.6.4
      • ✅Release 1.6.3
      • ✅Release 1.6.2
      • ✅Release 1.6.1
      • ✅Release 1.6.0
      • ✅Release 1.5.11
      • ✅Release 1.5.10
      • ✅Release 1.5.9
      • ✅Release 1.5.8
      • ✅Release 1.5.7
      • ✅Release 1.5.6
      • ✅Release 1.5.5
      • ✅Release 1.5.4
      • ✅Release 1.5.3
      • ✅Release 1.5.2
      • ✅Release 1.5.1
      • ✅Release 1.5.0
      • ✅Release 1.4.12
      • ✅Release 1.4.11
      • ✅Release 1.4.10
      • ✅Release 1.4.9
      • ✅Release 1.4.8
      • ✅Release 1.4.7
      • ✅Release 1.4.6
      • 🚫Release 1.4.5
      • ✅Release 1.4.4
      • 🚫Release 1.4.3
      • 🚫Release 1.4.2
      • ✅Release 1.4.1
      • ✅Release 1.4.0
      • 🚫Release 1.3.2
      • ✅Release 1.3.1
      • ✅Release 1.3.0
      • ✅Release 1.2.11
      • ✅Release 1.2.10
      • ✅Release 1.2.9
      • ✅Release 1.2.8
      • ✅Release 1.2.7
      • ✅Release 1.2.5
      • ✅Release 1.2.4
      • ✅Release 1.2.3
      • ✅Release 1.2.2
      • ✅Release 1.2.1
      • ✅Release 1.2.0
      • ✅Release 1.1.12
      • ✅Release 1.1.11
      • ✅Release 1.1.10
      • ✅Release 1.1.9
      • ✅Release 1.1.8
      • ✅Release: 1.1.7
      • ✅Release: 1.1.6
      • ✅Release: 1.1.5
      • ✅Release: 1.1.4
      • ✅Release: 1.1.3
      • ✅Release: 1.1.2
      • ✅Release: 1.1.1
      • ✅Release: 1.1.0
      • ✅Release: 1.0.3
      • ✅Release: 1.0.2
      • ✅Release: 1.0.1
      • ✅Release: 1.0.0
      • ✅Release: 0.2.2
      • ✅Release: 0.2.1
  • Tutorials
    • Developer Tutorials
      • Beginner
        • Search Yelp Reviews from OpenTable
        • Right-click Currency Conversion
        • Web Highlighter Tutorial
        • Trello Status Sidebar
        • Right-click Google Scholar Search
        • Google Dorking
        • Tweet a Link
        • Ask AI To Generate a LinkedIn Connection Request
        • How to Customize the AI Rate and Fix Mod
        • Right-click Translate Language
        • Basic Translation Tutorial
        • AI Bot Sidebar
        • Search and Highlight Words on a Page
      • Intermediate
        • Create a status nudge button in Github
Powered by GitBook
On this page
  • 1. Open the Page Editor
  • 2. Add a Context Menu
  • 3. Add the Google Translate API Integration
  • 4. Display the Translation in a Window Alert
  • 5. Test your mod

Was this helpful?

  1. Tutorials
  2. Developer Tutorials
  3. Beginner

Right-click Translate Language

PreviousHow to Customize the AI Rate and Fix ModNextBasic Translation Tutorial

Last updated 7 months ago

Was this helpful?

🍎 Before you begin this tutorial, make sure you've completed the .

In this tutorial, you'll build a mod that translates the language of text you highlight.

You’ll build the mod on this page: (an Italian newspaper)

1. Open the Page Editor

Start by navigating your browser to . Then, .

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:

2. Add a Context Menu

Click New Mod 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:

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.

Configure the Menu Item Title

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.

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.

  • 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

💡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:

👏👏👏 Nice job! You’ve configured your first context menu! Let’s keep going…

3. 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"

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

Configure the Brick Inputs

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.

The Data Panel

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

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

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

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

4. 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)

Finally, Save your mod…

5. Test your mod

You’ve created a mod made up of three bricks:

  1. Context Menu: used to select text from the page

  2. Translate: translates the text from a source to a target language

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

Learn more about .

💡Here's Wikipedia's list of two letter language abbreviations:

🙋Need some help with building? , and we’ll gladly help you!

Configuring Integrations
List of ISO 639-1 codes
Head over to the Slack Community
Developer Quick Start Guide
la Repubblica
la Repubblica
open the PixieBrix Page Editor