spice up your omnibox with deepl and more!

#tutorial #beginners #html

Do you find yourself translating sentences quite often or are you just a fan of deepl.com?
Today we are going to use the custom Search Engine functionality built into most browsers to trigger a translation right from the omnibox!
Translating in Deepl results in the original text being added to the current url, like so:

We can create a new Search Engine in the Chrome Settings, and set it up like so:

Here is the URL String you will have to enter:

http://deepl.com/translator#en/de/%s

The %s is a placeholder for any text you would like to add later on.

Now, whenever we type "en-de" in the omnibox and press tab, we can enter the english text that we'd like to have translated by deepl. Pressing enter brings us right to the deepl page with the translation!

You can also use this as a note-taking shortcut:


data:text/html, 
<html contenteditable><body>%s</body>
<style>
    html {
        font-family: system-ui; 
        background: %23f5f3f0;
        padding: 1em;
    }
    body {
        margin: 2em auto;
        max-width: 40em; 
        background: %23fff;
        padding: 1em;box-shadow: 5px 5px 0 rgb(0 0 0 / 10%);
    }
</style>
<script>window.onbeforeunload = function(){  return 'Are you sure you want to leave?';};</script>
</html>