Google Chrome Extensions: a quick do-it-yourself translator

Recently I noticed that even if my English is not so bad, I still often get distracted by the translation of certain unfamiliar words. And since I was tired of spending my time on it, I decided to write an extension-translator. Can say

But there are already!

Yes, there is, but, firstly, I did not write browser extensions before and wanted to try, secondly, it’s always more fun to create something myself than to use ready-made ones. So to whom it is interesting as well as me - welcome under cat.



And I decided to write the article itself, because I had to collect a lot of information in parts from the far corners of the Internet and I decided to combine everything a little.



So, sit down closer to the fireplace open Notepad ++, VS Code or any other convenient editor and start.

')

1. Preparing the necessary files

We will need:

1. Manifest.json - version of our extension, name, list of used files, permissions will be stored here.
2. Popup.html is the face of our extension, here we will write a popup page that will be displayed when clicking on the icon of our extension
3. Background.html are all background processes of our extension.
4. 4 icons: 16x16, 36x36, 48x48, 128x128 - this is the icon of your application, chrome and can itself customize the icon to the desired size, but you can set different icons and depending on this they will be different in the context menu, near the address bar, in the menu extensions, etc.

2. Parable about the manifest and popup

And the programmer created a manifesto and the programmer saw that it was good.

Our manifest.json should look like

Now in order:

• manifest_version is the version of our manifest, now version 2 is relevant.
• name - extension name
• version - version of the extension, there should be only numbers, but in any format: 1.0 or 1.0.0.1 or 1.1.2, you can write as you like.
• icons - the list of icons of our extension
• permissions - permissions of our extension, the link gives access to a specific resource, contextMenus gives access to the context menu.
• browser_action: default_title - the text that will appear when you hover the mouse over the extension icon, default_icon is the default application icon, default_popup is the default popup window.
• background - here you can connect the background page, if it exists or background scripts.

With the manifesto figured out, now you can go to a more interesting lesson. Before we begin to create a View of our extension - we need to download additional files of all colors and colors. In general, this is optional and someone can write an extension on pure JS, without third-party styles, but I wanted to use Jquery and Bootstrap .



I decided especially not to bother with the look and quickly rolled up a more or less nice window decent looking translator.





I do not know how personally you, the reader, are in html, js and css, but at this level I do not set out to explain the principles of these languages ​​to you, everything that I use and do not explain is rather primitive and easy to google.



Styles are not at all necessary, you can do without them, but with them everything looks a little friendlier and more beautiful.



Create a popup.css file and add some styles:





Now our extension should look something like this:





Now you can go to the very logic of the translator, create a file

Save and load our extension in chrome. Sometimes the button to update the extension does not help and then you need to delete the extension and reload it.



We check the work, we should get something like this:





It seems to have tried well, but something is missing. Add a reaction to the Enter key.





Check and see that you can now press enter, and not click on the button. But you need to add at least one more function that is present in most translators - this is copying the translated text to the clipboard.





Well, we did a good job on the view, now we have a good translator, moreover, written by us! But not everyone will be satisfied with such a result, for the same tireless adventure seekers who are trying to bring the instrument to perfection, but at least to make it as convenient as possible - we will not stop there!

Saga of background.js

The translator is, of course, good, but after all, taking, copying and pasting text is also tiring, so we need to make sure that our extension translates the text we select.



Background.html - background page and one of its features is to add an item to the context menu. In the background.html itself, we just connect the scripts, we need them.





But with the background.js we have more fun. Create a point of our application in the menu:





Now, when we reload the extension and select some text by right-clicking - we will see that a new item has appeared in the context menu:





Now you need to figure out how to translate this text. At first, I wanted our popup window to open when the text was selected and the translation was there, but I was faced with the fact that Google limited the possibility of opening the window only by clicking on the icon. Then I picked up the sword decided to make a translation in the context menu, as it was done in the Yandex browser:





But I could not find information on how to change the context menu in this way. I don’t want to open new tabs, so here we are a little shallow.



In background.js in place of the old empty function, insert this line:





And add the translate function separately:





Let's check the work and see that when we select the text and click the translate button in the context menu, this window appears:





Well, that's all, friends! If someone tells you the best way to implement the translation using the context menu, I will be glad to hear.

---

For information on the implementation of such things, I express my gratitude to the articles on Habrahabr and the responses to StackOverflow.