(Scroll the bottom if you’d rather watch a 4 min video instead of read this!)
At Elastic, I’m working on a team that’s building a support portal for our customers. Think like a custom Zen Desk (but way better, in my humble opinion). Because we have customers from all over the world, even though the app is still being developed, we’re heavily focused on making sure it’s an accessible app and works for an international audience.
Without explaining more than you probably want to know about internationalization of text, whenever I introduce new text in our app, I need to translate it to Icelandic because that’s our “secondary” language we have set up for testing if our i18n is actually working. So i’ll copy and paste the text into Google translate, search for Icelandic, and then copy and paste that over to my file. But I realized there’s an easier way with PixieBrix!
I created an extension where all you have to do is highlight text, right click, select the translator, and boom! Right there in my window, didn’t even have to navigate away.
If you want to build it and set it up yourself, here’s how you can do it too! It’s only three bricks and really just requires tiny bits of customization.
Once you’ve got the PixieBrix chrome extension installed, open Chrome and right click on any page and click “Inspect”. Then look for “PixieBrix” in the top bar.
Once you’re there, you’re in the Page Editor! Get ready to start building.
Start by clicking the “add” button in the top left of your page editor. Then click “Context Menu”. This is the brick that creates actions for you to select when you right click. In the Context section, change from “all” to “selection”, then under the Sites section, click “All URLs”.
Your settings should look like this:
If you go back to your browser, right click and select “Translate to IS” under PixieBrix , you should now see some data pop up in the Page Editor again on the preview section. This shows all you have access to. You just need the “selectedText” but we’ll grab that in the next step.
Next, click the plus button under your context brick and search for the “Translate” brick, then add it. This is super easy - all you need to configure are :
- The text you want translated (query)
- What language you want it translated to (target)
To get 1) that’s where we’ll reference the variable from the previous brick. To do that, you just need to change the field type from ABC to @ (at the end of the query row), then type @input.selectionText
To get 2) you’ll just need to figure out what the two letter code is of the language you want to translate to. For instance, if you want it translated to English, you just need to type “En”. I wanted Icelandic, which is IS, so I typed that.
No need to change anything else!
You could do this a variety of ways, but I chose to use the window alert brick because I’m just looking at small amounts of text and I wanted it to just quickly show on my screen.
The only thing you have to set is what you want to show in the window alert, which is… the translated text! It took me a second to figure out how to access the translated text. (Whenever you’re stuck, try running the extension in your browser and seeing what is output at each step. That’s when I figured out how to access the translated text in the previous brick, but I’ll shortcut that for you here: @transformed.translatedText ) Make sure to change the ABC at the end of the message row to “@”.
And viola! Try highlighting some text and running it, and you should see your text translated!
Just want the end result but don’t want to build these steps? I created a public extension that will translate any highlighted text to English. Just activate this extension and you’ll be good to go, no need to grab any bricks, set any variables, or anything at all.
As always, if you get stuck, head to the PixieBrix Communtiy and folks will jump in to help you out!
PS - Made a video about this if you’d prefer to watch and see the process and how it works!