Extensions for Google Chrome. Part one. Getting started
Good afternoon, Habr.
I want to write a series of articles on creating extensions for Google Chrome. This is what motivates me, firstly, the practical use of the development process and subsequent use: you yourself decide what other tasks you want to solve without leaving the browser and, secondly, the absence of any intelligible guides, tutorials and reference books in Russian , with the exception, perhaps, of this and this article on Habré. The main goal of the cycle is to systematize the scattered information and facilitate the search for potential developers, the benefit is that Habr is indexed well :)
In the first (this, I mean) article, on the example of the simplest extension, all the main points related to the development, debugging and use of the extension, the configuration file manifest.json and the beginning of the chrome. * API will be considered. The first article, I think, will not be very useful for experienced developers (this is a disclaimer).
The best theory is practice, and therefore, without delaying them, we create the hello_world folder, and in it the text document manifest.json and type the following code there:
This is the minimum program. If you go to “Wrench → Tools → Extensions”, set the “Developer mode” checkbox, click the “Download unpacked extension ...” button and specify our “Hello world” folder, the extension will appear in the installed list, but of course it will not be anything yet, because it does not know how.
')
And if he does not know how, he must be taught. Edit manifest.json:
And create a file background.html in which the script will be written, executed in the background. For example, such:
The script in background.html will be executed once, at the start of the browser and the extension, that is, when you open another tab or window, the script will not be re-executed. In our case, it will write a sacramental phrase to the console every 10 seconds, and this, by the way, should be checked.
For debugging, it is convenient to use the chrome: // extensions / service page with the included developer mode.
In principle, it duplicates the functionality of the extension management page from the “Wrench”, but I, subjectively, like it more. Somehow more compact, or what?
Here we are interested in two positions: the string “ID” with the internal extension identifier and the subsection “Check active viewing modes” in which we see the background.html created by us and by clicking on it we can control the executed script.
We look and see that the script regularly writes to the hell world console:
Pay attention to the chrome-extension format header: // ID / filename . Knowing the extension identifier in this way you can get to any of its files. Again it is convenient in the process of debugging extensions.
For the time being, our extension represents such a thing in itself, executing a scenario in the background. In order for it to start interacting with the browser and its components, you need to become familiar with the chrome. * API. So, for example, to interact with the browser window, the chrome.browserAction methods are used, and the default values ​​are set in manifest.json as follows:
Do not forget to create popup.html (for now, leave it blank) and put the icon in the img folder, click on “Reload” on the chrome: // extensions / page and look at the result. The icon of our extension appeared on the extensions panel, and when you click on it, an empty pop-up window appears.
Icon for those who walk in steps:
All this is manageable using the chrome.browserAction scripts methods:
To practice, let's make background.html do something useful, instead of just shitting the console. Here, at least the clock. The number of minutes will be displayed over the icon, while hovering the time will be displayed in the format HH: MM: SS, and in the pop-up window - a clock with arrows.
background.html
popup.html
Save, restart, check - beauty!
Actually, we made a simple extension (and at the same time, canvas remembered). For Getting Started, anyway, is enough. It remains only to bring it to a suitable form for distribution - to pack. To do this, on the same page chrome: // extensions / we click on “Packaging extensions ...”, specify the root directory (the one where manifest.json is), click “OK” and get the output * .crx file. This is our packaged extension. Opening it with Chrome, we will install the extension.
Packed example from the article for installation
Source archive
In the next article of the cycle, I plan to analyze in detail the chrome. * API, and in the future - interaction with various sites and the use of local data stores. If you think that I have missed something in the basics or you have any wishes regarding the next articles in the series, please write them in the comments.
See ya!
I want to write a series of articles on creating extensions for Google Chrome. This is what motivates me, firstly, the practical use of the development process and subsequent use: you yourself decide what other tasks you want to solve without leaving the browser and, secondly, the absence of any intelligible guides, tutorials and reference books in Russian , with the exception, perhaps, of this and this article on Habré. The main goal of the cycle is to systematize the scattered information and facilitate the search for potential developers, the benefit is that Habr is indexed well :)
In the first (this, I mean) article, on the example of the simplest extension, all the main points related to the development, debugging and use of the extension, the configuration file manifest.json and the beginning of the chrome. * API will be considered. The first article, I think, will not be very useful for experienced developers (this is a disclaimer).
Hello world
The best theory is practice, and therefore, without delaying them, we create the hello_world folder, and in it the text document manifest.json and type the following code there:
{ "name" : "Hello world", // "version" : "1.0", // "description" : "This is a simple chrome extention" // } This is the minimum program. If you go to “Wrench → Tools → Extensions”, set the “Developer mode” checkbox, click the “Download unpacked extension ...” button and specify our “Hello world” folder, the extension will appear in the installed list, but of course it will not be anything yet, because it does not know how.
')
Learn and debug
And if he does not know how, he must be taught. Edit manifest.json:
{ "name" : "Hello world", "version" : "1.0", "description" : "This is a simple chrome extention", "background_page" : "background.html" }
And create a file background.html in which the script will be written, executed in the background. For example, such:
<script type="application/javascript"> window.onload = function() { window.setInterval( function() { console.log("Hello world"); }, 10000); } </script>
The script in background.html will be executed once, at the start of the browser and the extension, that is, when you open another tab or window, the script will not be re-executed. In our case, it will write a sacramental phrase to the console every 10 seconds, and this, by the way, should be checked.
For debugging, it is convenient to use the chrome: // extensions / service page with the included developer mode.
In principle, it duplicates the functionality of the extension management page from the “Wrench”, but I, subjectively, like it more. Somehow more compact, or what?
Here we are interested in two positions: the string “ID” with the internal extension identifier and the subsection “Check active viewing modes” in which we see the background.html created by us and by clicking on it we can control the executed script.
We look and see that the script regularly writes to the hell world console:
Pay attention to the chrome-extension format header: // ID / filename . Knowing the extension identifier in this way you can get to any of its files. Again it is convenient in the process of debugging extensions.
Browser interaction
For the time being, our extension represents such a thing in itself, executing a scenario in the background. In order for it to start interacting with the browser and its components, you need to become familiar with the chrome. * API. So, for example, to interact with the browser window, the chrome.browserAction methods are used, and the default values ​​are set in manifest.json as follows:
{ "name" : "Hello world", "version" : "1.0", "description" : "This is a simple chrome extention", "background_page" : "background.html", "browser_action" : { "default_title" : "Hello world!!!", //, ( , ) "default_icon" : "img/icon_world.png", // ( ) "default_popup" : "popup.html" // } }
Do not forget to create popup.html (for now, leave it blank) and put the icon in the img folder, click on “Reload” on the chrome: // extensions / page and look at the result. The icon of our extension appeared on the extensions panel, and when you click on it, an empty pop-up window appears.
Icon for those who walk in steps:
All this is manageable using the chrome.browserAction scripts methods:
<script type="text/javascript"> chrome.browserAction.setTitle({title:"New title"}); // chrome.browserAction.setPopup({popup:"new_popup.html"}); // chrome.browserAction.setIcon({path:"new_icon.png"}); // chrome.browserAction.setBadgeText({text:"text"}); // chrome.browserAction.setBadgeBackgroundColor({color:[0,0,0]}); // </script>
To practice, let's make background.html do something useful, instead of just shitting the console. Here, at least the clock. The number of minutes will be displayed over the icon, while hovering the time will be displayed in the format HH: MM: SS, and in the pop-up window - a clock with arrows.
background.html
<script type="application/javascript"> window.onload = function() { window.setInterval( function() { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var badge_text = (m < 10 ? "0" + m : m).toString(); var title_text = (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); chrome.browserAction.setBadgeText({text: badge_text}); chrome.browserAction.setTitle({title: title_text}); }, 1000); } </script>
popup.html
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } body { background: #000; } </style> <script type="text/javascript"> Clock = function() { this.canvas = false; this.pi = Math.PI; } Clock.prototype = { get_time: function() { var now = new Date(); var result = { milliseconds: now.getMilliseconds(), seconds: now.getSeconds(), minutes: now.getMinutes(), hours: now.getHours() } return result; }, init: function() { this.canvas = document.getElementById("clock").getContext("2d"); }, draw: function() { var now = this.get_time(); var hangle = (this.pi/6)*now.hours + (this.pi/360)*now.minutes + (this.pi/21600)*now.seconds + (this.pi/21600000)*now.milliseconds; var mangle = (this.pi/30)*now.minutes + (this.pi/1800)*now.seconds + (this.pi/1800000)*now.milliseconds; var sangle = (this.pi/30)*now.seconds + (this.pi/30000)*now.milliseconds; this.canvas.save(); this.canvas.fillStyle = "#000"; this.canvas.strokeStyle = "#000"; this.canvas.clearRect(0,0,200,200); this.canvas.fillRect(0,0,200,200); this.canvas.translate(100,100); this.canvas.rotate(-this.pi/2); this.canvas.save(); this.canvas.rotate(hangle); this.canvas.lineWidth = 8; this.canvas.strokeStyle = "#ffffff"; this.canvas.fillStyle = "#ffffff"; this.canvas.lineCap = "round"; this.canvas.beginPath(); this.canvas.moveTo(-10,0); this.canvas.lineTo(50,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.rotate(mangle); this.canvas.lineWidth = 4; this.canvas.strokeStyle = "#ffffff"; this.canvas.lineCap = "square"; this.canvas.beginPath(); this.canvas.moveTo(-20,0); this.canvas.lineTo(75,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 2; this.canvas.strokeStyle = "#ffffff"; this.canvas.fillStyle = "#333"; this.canvas.beginPath(); this.canvas.arc(0,0,8,0,this.pi*2,true); this.canvas.fill(); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.rotate(sangle); this.canvas.lineWidth = 2; this.canvas.strokeStyle = "#ff0000"; this.canvas.lineCap = "square"; this.canvas.beginPath(); this.canvas.moveTo(-30,0); this.canvas.lineTo(85,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 6; this.canvas.fillStyle = "#ff0000"; this.canvas.beginPath(); this.canvas.arc(0,0,3,0,this.pi*2,true); this.canvas.fill(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 6; this.canvas.strokeStyle = "#ffffff"; this.canvas.beginPath(); this.canvas.arc(0,0,95,0,this.pi*2,true); this.canvas.stroke(); this.canvas.restore(); this.canvas.restore(); } } window.onload = function() { var clock = new Clock(); clock.init(); window.setInterval(function() { clock.draw(); }, 10); } </script> </head> <body> <canvas id="clock" width="200" height="200"></canvas> </body> </html>
Save, restart, check - beauty!
Actually, we made a simple extension (and at the same time, canvas remembered). For Getting Started, anyway, is enough. It remains only to bring it to a suitable form for distribution - to pack. To do this, on the same page chrome: // extensions / we click on “Packaging extensions ...”, specify the root directory (the one where manifest.json is), click “OK” and get the output * .crx file. This is our packaged extension. Opening it with Chrome, we will install the extension.
Packed example from the article for installation
Source archive
In the next article of the cycle, I plan to analyze in detail the chrome. * API, and in the future - interaction with various sites and the use of local data stores. If you think that I have missed something in the basics or you have any wishes regarding the next articles in the series, please write them in the comments.
See ya!
Source: https://habr.com/ru/post/133776/
All Articles