Geekly Articles each Day
📜 ⬆️ ⬇️

Writing an extension for Google Chrome (and publish it)



Ladies and gentlemen! Today we will try to write and publish an extension for Google Chrome. It will translate the text entered by the user from English to Russian and vice versa.


The king issued a manifesto ...


(I advise you to create a directory so that the files are not lost.)
So where does the expansion start? Yes, from the manifesto (did you say that?). Manifesto is a file formatted in JSON format, in which all application or extension resources are specified, different permissions (so permissions are translated? I’ll go check on my translator ...), name, description, etc. Now you will see the manifesto of our application, and then we will analyze it. Name this file manifest.json
') 
01{ 02 "manifest_version": 2, 03 04 "name": " ", 05 "version": "1.0", 06 07 "icons": { 08 "16": "16x16.png", 09 "32": "32x32.png", 10 "48": "48x48.png", 11 "128": "128x128.png" 12 }, 13 131 "permissions": [ 132 "http://translate.yandex.net/*" 133 ], 134 14 "browser_action": { 15 "default_title": " ", 16 "default_icon": "48x48.png", 17 "default_popup": "popup.html" 18 } 19 }

So:
2. Specify the manifest version (at the moment 2 is the latest version, 1 is no longer supported)
4. Display name of the application
5. Version of the application (does not include letters, only numbers and points. You are free to choose any format. 1 and 1.1, and 1.0.0.1 - everything is correct)
7-12. We describe the icons used in the application. All of course must be in the specified directory. “16” means that the icon has a size of 16x16. I took the icons from the site iconsearch.ru, but you can take any others.
UPD: 131-133 - we ask permission to access the address of the translation. This was not in the article initially, as it worked without it. Most likely, this is a bug, which means you need to train yourself to use permissions, because somewhere it may work (as in this case), but somewhere it will not.
14. In this line, we indicate that our application is an extension and it has an icon next to the address bar.
15. The text of the tooltip when hovering over the icon.
16. Standard icon. It should have a size of 49x49, but since it is very specific, it is difficult to find an icon of this size, I use the icon 48x48 and Chrome itself will change its size. Great, right?
17. Here we indicate which html document will pop up when a button is clicked.

So, with the manifesto done, it's time to write html

Let's mark the territory ...


Our document will be very simple. One area for entering text, a submit button and a block for text output. Unfortunately, the study of html is beyond the scope of our review, but I think that many of my readers are already familiar with it. If you are not one of them, then simply copy this content of the Chinese diploma into your project. Name this file popup.html
 <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script src="popup.js"></script> <title></title> </head> <body> <textarea id="input"></textarea><br> <input id="btn_submit" type="submit"><br> <div id="result"></div> </body> </html>



What about interactivity?


Now let's move on to what our extension would not make sense to do - go to JavaScript! I will use the jQuery library, despite the fact that it was possible to do without it in this project. Download jquery.js from jquery.com and put it in the directory of our project (do not forget to rename it to jquery.js!).
So, the actual code for the popup.js file is the heart of our extension.
 01 $(document).ready(function(){ 02 $('#btn_submit').click(function(e){ 03 e.preventDefault(); 04 05 var input = $('#input').val(); 06 07 var url = "http://translate.yandex.net/api/v1/tr.json/translate"; 08 09 var parent = /[-]/i; 10 11 var language = (parent.test(input))? 'ru-en':'en-ru'; 12 13 $.getJSON(url, {lang: language, text: input}, function(res){ 14 $('#result').text(""); 15 for (var i in res.text) { 16 $('#result').text($('#result').text() + res.text[i] + " "); 17 } 18 }); 19 }); 20 });


I will not dwell on everything, since learning JavaScript again is not our goal right now. I will stop only on the main.
7. In the variable write the address to which we can apply for translation. It can be found in the Yandex API documentation.
9-11. Using all our knowledge in RegExp-ah, we determine the presence of Russian letters in the string. If they are present, then we consider the text Russian.
13. We form JSON for sending. It includes the actual text and input language.
14. We reset the text in the output block. Suddenly there is something already written?
15-17. For the output, we need a cycle, because we will return the MASSIF lines of text. This data can also be found in the API.

With the code too finished. Now you can check the extension on the local machine. Open Chrome, Menu -> Tools -> Extensions. At the very top, check the Developer Mode box, click Download unpacked extension, and indicate the path to our directory. Voila! You can use! But how to bring this work of art to the masses? ..

Distributor required


Especially for us, Google came up with the Chrome Web Store, as well as a developer panel. All so that we feel comfortable. True, the service will have to pay $ 5. Art requires sacrifice ...
So, the developer toolbar is located at this address. Go to your Google account, and click the big button Add a new product.


We pack our directory (it is its very, not the contents) in a zip file. We send it to the server.
Before us appears a page of great beauty. Fill in the fields, all recommendations appear on the right. I will give advice only about advertising images. If possible, make the smallest image, because the larger the images, the higher the search will be displayed on the Web Store page.



So thank you all. A curtain!

Gained knowledge


Today we got acquainted with the basics of developing extensions for Chrome. Here are the links that will help you in this difficult task:

Chrome Extensions Help
Web Store Help
Help Translate Api
Javascript tutorial

Source: https://habr.com/ru/post/170765/

More articles:


All Articles