How to create and publish Chrome apps and extensions. Google Chrome web apps, what are they? What is a chrome app

With the help of numerous applications, you can not only significantly expand the capabilities of the browser, but also customize it in your own way. This is precisely the idea that Google is guided by, which is why it is trying to make various Google apps Chrome so that they suit all users.

To begin with, it is worth answering the question, why do we need apps at all? Google Chrome ? Modern websites have various dynamic features that were previously only available to programs installed on computers. But today there is no need to use all these numerous programs. It is enough just to install the application, which takes up much less disk space and should not cause failures (as the developers guarantee).

But you should always distinguish between bookmarks and true applications. Bookmarks to various sites on this moment so many. But they cannot be called true applications. But it is the latter that we are talking about. What types of Google Chrome applications are there, and what are they capable of?

One of the most useful applications Google Chrome has numerous notepads. Yes, notepad Quick Note is similar to text Microsoft document Word. Only to call the latter should you specifically launch the program. But the notepad is immediately available in the applications section. You can write everything into it without leaving the browser. You don't even need to save anything! Everything happens automatically. This Google Chrome app works even if your internet connection is down.

TweetDeck is a very useful application for all users who often conduct conversations on numerous social networks. With its help, you can always stay up to date with events and all conversations on Twitter, Facebook, LinkedIn, Google Buzz, Foursquare, MySpace.

Google Talk is more of an extension than an app. But still this useful function should also be mentioned. With Google Talk, you can always stay in touch with the people in your Google+ contacts. What's especially nice is that the chat window always remains open and active, even if you move from one tab to another.

Agree that Google Chrome apps should be useful for all users. Think how many times have you had to run a calculator to calculate something?? Switching between a browser window and a calculator that does not have all the functions that you may sometimes need is tiring. And functions that are not in a standard calculator have to be looked for on the Internet. But thanks to the Google Chrome calculator app, all this is no longer required. There are a lot of different calculators at the moment. They differ in functionality and design.

Calculate- exactly this better app for all users who need to calculate complex mathematical problems. Numerics Calculator easier to use and has a very beautiful interface. In addition, it has a function for converting values.

What other useful Google Chrome apps are there? Among the numerous applications, dictionaries should be highlighted. So that you don’t have to constantly look for a translation of a word, you can simply use good app. Among the numerous dictionaries, you can choose the one that you like the most. The choice is unlimited. You can use either a simple En-Ru Translator or Yandex.Dictionaries. Or maybe you are interested in automotive topics? And for this case there is a useful application! Everything related to cars can be found in the Cars dictionary.

Other numerous useful Google Chrome applications include: various clocks and alarms. Among the numerous alarm clocks and clocks, you can choose exactly the application that suits you best in terms of functionality.

By the way, games are also Google Chrome applications. Among the numerous games, we should note the most popular application, which is very popular with many people around the world. Some may think that pesky birds and green pigs are no longer so popular, but in fact Angry Birds app is considered one of the best of all those that came out in 2011. By the way, thanks to this game, the developers were able to draw the attention of all users to the gaming capabilities of the Google Chrome platform.

If you follow popular technologies such as blogs or Techcrunch Download Squad, you may have noticed teaser messages about web applications Google Chrome, new feature Chromium which the developers Google Chrome have been developing for some time. Company plan Google is providing web applications V new version Chrome Web Store. There are free and paid applications which users Chrome can be installed in a web browser.

Chrome Web Apps listed in the browser extension manager, there are only some differences between extensions and Chrome web apps. Chrome Web Apps installed by default and displayed on the tab new page, where they can be easily accessed, provided they are installed on the computer.

Google Chrome web apps.

Press web application and it opens to the left of the TabBar. Tab icons look at first glance similar to pinned tabs with the exception that they are high resolution as they do not use icons but rather have local icons.

Chrome web apps.
The screenshot above shows two Chrome web apps and one in the tab. Gmail and Google Calendar are web applications. Clicking on them opens the service's web page in the browser. I'm honestly unable to figure out the existing differences between web apps and tab holds at this point, other than better tab icons and the fact that web apps are listed under new bookmarks. I believe this is an example of the concept. For example, Techcrunch articles show a screenshot of a game that is likely running locally rather than on a website.

Chrome web apps games
As you can see in the screenshot above there is no URL in the address line, assuming it is running locally (or that the URL has been removed from the screen).
How to Enable Chrome Web Apps in Google Chrome Dev.
Chrome Web Apps may be included in G oogle Chrome - Chromium. Download Squad has instructions:
Google Chrome comes with three web applications for testing. They provide the functionality of Google Docs, Gmail and Google Calendar.
Applications are located in C:\Users\username\AppData\Local\Google\Chrome\Application\6.0.453.1\Resources\ on Windows. Please note that the version changes with each new release Chrome.
You need to add the launch-enable-applications setting in the browser. The easiest way to do this is to create a shortcut, right click on the shortcut and select properties. The target should look like this at the end C:\Users\username\AppData\Local\Google\Chrome\Application\chrome.exe enable applications
Now open the extensions menu by clicking on the wrench icon in the toolbar Chrome, there you will see tools and extensions.
Select unpack extensions and navigate to the resources folder. Each web application Chrome must be installed separately.
Web Applications immediately appear on the New Tab page, where they can be launched. What do you think about this? Let me know in the comments.

Users who use Google Chrome as their default browser are probably familiar with the app store. Those who have worked with them know that applications are just links to the Internet pages of the corresponding online services. They are located in a separate browser panel at the address: “chrome://apps” (see the screenshot for an example).
Google Chrome apps

IN Lately the company produces Chrome applications for computers developed in languages JavaScript programming and HTML5. They run in separate processes from the browser and do not require network connection, although they use the Chrome engine for their work.

New Google Chrome Apps

The Chrome browser application is a stand-alone program written in programming languages ​​(in order of popularity):

  1. JavaScript – used to write scripts for browsers;
  2. HTML – hypertext markup language for web pages;
  3. Native Client - allows you to run applications in different browsers, regardless of OS;
  4. Emscripten is a C++ compiler that produces JavaScript code as output.

Sometimes other less popular engines are used to develop web applications, but without the use of Flash technology from Adobe. Upon completion of compilation source The program is compressed, after which it is able to work autonomously without the Internet. The Application Store offers to install Google Keep on your PC, graphic editors Sketchpad or Pixlr, Writer notepad or the domestic game Cut the Rope, and launch them as classic programs through the application launcher. By the way, it is not a property of Windows, and also functions on Linux and MacOS.

Chrome is a platform for running applications

Please note that when using applications, the google chrome online store will install a panel to launch programs in automatic mode, without asking or notifying the user about the action.

Fig 1. Panel with applications

Upon completion of installation, a shortcut is created in the taskbar that launches the launcher, which displays a list of Chrome applications used on the computer. Through it, programs are launched or uninstalled without requiring the functioning of an Internet browser. Old applications that are recommended to be replaced with updated ones are indicated by an arrow, like shortcuts (in fact, that’s what they are - they lead to the corresponding sites).

Chrome app launcher, when there is an active Internet connection, synchronizes bookmarks, navigation history, saved passwords, etc. If you accidentally deleted an app google settings chrome, go to https://chrome.google.com/webstore/launcher and download it.

Examples of Chrome desktop apps

The google chrome store offers many programs for PCs, including multifunctional graphic and text editors, unit converters, note-taking utilities, many games, clients for social networks and other services. Programs for Google Chrome are complete and can easily replace your daily applications, especially since they work offline. Using Google programs has several advantages:

  • access to services is always possible:
  • synchronization with the browser on all devices after authorization;
  • do not cause critical errors in Windows operation.

TechSmith Snagit

Fig 2. TechSmith Snagit graphic editor

As a result we get graphics editor, unable to independently create screenshots and function without the Internet (the plugin that takes screenshots requires a network connection to work).

Pocket

When visiting the Google store, many people paid attention to an application for Google Chrome called Pocket, a client of the service of the same name. It is designed to store articles that are interesting to the user, which he plans to read later. The program displays a list of saved articles in the form of thumbnails and allows you to search for the necessary publications by their title. During the saving process, Internet pages are cleared of advertising.
Additionally, Pocket allows you to save publications to an archive or share the most interesting ones with friends in in social networks or send by email.

To test the application you are developing, you will need to add it to your browser. To do this, on the chrome://extensions page you need to check the “Developer mode” checkbox. After this, it will be possible to add your extension or application.

manifest.json

The code of any Chrome application, like any extension, begins with a manifest.json file. It describes all the meta information of the application. Here's the editor's manifesto in its entirety:

( "name": "Simple Text", "description": "An extremely simple text editor (sample Chrome app)", "version": "0.1", "icons": ( "48": "icon/48.png ", "128": "icon/128.png" ), "manifest_version": 2, "minimum_chrome_version": "31.0", "offline_enabled": true, "app": ( "background": ( "scripts": [ "js/background.js"] )), "permissions": [ ("fileSystem": ["write"]) ], "file_handlers": ( "text": ( "title": "Simple Text", "types ": ["application/javascript", "application/json", "application/xml", "text/*"], "extensions": ["c", "cc", "cpp", "css", " h", "hs", "html", "js", "json", "md", "py", "textile", "txt", "xml", "yaml"] ) ) )

Let's look at the fields that we encountered here. Everything is clear with the name and description. Version is a required field - the Chrome Web Store will require it to change when you download an update to your app.

Var entryToLoad = null; function init(launchData) ( var fileEntry = null if (launchData && launchData["items"] && launchData["items"].length > 0) ( entryToLoad = launchData["items"]["entry"] ) var options = ( frame: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700 ); chrome.app.window.create("index.html", options); ) chrome.app.runtime.onLaunched. addListener(init);

Background page works in background regardless of application windows. Most of the time it is not loaded into memory. When the system starts, its code is executed and can install handlers for certain events, the most common of which is onLaunched. When handlers are installed, the background page is typically unloaded from memory and only runs back if one of the events it subscribes to has occurred.

When the user clicks on the application icon, or opens a file in it, the onLaunched event is fired in the background page. The call parameters are passed to it, in particular, the file(s) that the application should open. The code entryToLoad = launchData["items"]["entry"] saves the file transferred to the application in a local variable, from where the editor code will later take it. The onLaunched event can also occur when the application is already open. In this case, the code in the background page can decide for itself whether to open a new window or perform some actions in an already open window.

To complete the picture, here's the CSS:

Body ( margin: 0; ) header ( background-color: #CCC; border-bottom: 1px solid #777; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-pack: left; display: -webkit-box; height: 48px; padding: 0px 12px 0px 12px; ) button ( margin: 8px; ) textarea ( border: none; -webkit-box-sizing: border-box; font-family: monospace ; padding: 4px; position: absolute; top: 48px; bottom: 0px; left: 0px; right: 0px; width: 100%; ) textarea:focus ( outline: none !important; )

Basic code: working with files

Since in our example, for simplicity, we will limit ourselves to the minimum set of capabilities, the main editor code will be devoted almost exclusively to working with files. Several APIs are used for this, some of which are already on their way to W3C standardization. The File API and related interfaces are a big topic that deserves a separate article. I recommend it as a good introduction.

So, let's look at the code in js/main.js. I will give it in fragments, full code- on Github.

Function init(entry) ( $("#open").click(open); $("#save").click(save); $("#saveas").click(saveAs); chrome.runtime.getBackgroundPage (function(bg) ( if (bg.entryToLoad) loadEntry(bg.entryToLoad); )); ) $(document).ready(init);

The task of the initialization function is to add handlers to the buttons and get a file from the background page to open. The background page context is obtained from the main window asynchronously using chrome.runtime.getBackgroundPage .

Button click handlers:

Var currentEntry = null; function open() ( chrome.fileSystem.chooseEntry(("type": "openWritableFile"), loadEntry); ) function save() ( if (currentEntry) ( saveToEntry(currentEntry); ) else ( saveAs(); ) ) function saveAs() ( chrome.fileSystem.chooseEntry(("type": "saveFile"), saveToEntry); )

We will store the current FileEntry in the global variable currentEntry.

The only specific feature in the above code is the chrome.fileSystem.chooseEntry method. Using this method, a file selection window opens (its own on each system). Like all other functions for working with file system, this method is asynchronous and receives a callback to continue working (in our case, the loadEntry and saveToEntry functions described below).

Reading a file:

Function setTitle() ( chrome.fileSystem.getDisplayPath(currentEntry, function(path) ( document.title = path + " - Simple Text"; )); ) function loadEntry(entry) ( currentEntry = entry; setTitle(); entry. file(readFile); ) function readFile(file) ( var reader = new FileReader(); reader.onloadend = function(e) ( $("textarea").val(this.result); ); reader.readAsText(file ); )

In the setTitle() function we change the window title to show the path to the current file. How this title appears varies by system. On Chrome OS it doesn't show up at all. chrome.fileSystem.getDisplayPath is the most correct way to get the file path suitable for displaying it to the user. Another path representation is available through entry.fullPath .

The File API has two different objects that describe a file: FileEntry and File. Roughly speaking, FileEntry represents the path to the file, and File represents the data it contains. Therefore, in order to read a file, it is necessary to obtain a File object by Entry. This is achieved using the asynchronous entry.file() method.

The code for this example is kept as short as possible to fit into the article format. If you want to look at more detailed examples of how certain Chrome API features are used, a large set of Chrome apps examples have been published on GitHub. Official documentation for all APIs is at developer.chrome.com. The main place to get answers to specific questions about programming Chrome applications is.