What is "Chrome"? Description and features of the browser. Creating a Simple Chrome App Useful Extensions and Apps

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

Recently, the company has been releasing Chrome desktop applications developed in JavaScript and HTML5 programming languages. They run in processes separate from the browser and do not require a network connection, although they use the Chrome engine to operate.

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 various 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. At the end of compilation, the source code of the program is compressed, after which it is able to work offline 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 launcher applications. 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 automatically, without asking or notifying the user about the actions.

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).

The chrome app launcher syncs your bookmarks, navigation history, saved passwords, etc. when you have an active internet connection. If you accidentally deleted the google chrome settings app, go to https://chrome.google.com/webstore/launcher and download his.

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 a graphic editor that is not capable of creating screenshots on its own and functioning without the Internet (the plugin that takes screenshots requires a network connection to work).

Pocket

Having entered 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 on social networks or send by email.

This article is intended for Chrome Enterprise administrators and developers with experience building and publishing Chrome app packages.

If the Chrome Web Store doesn't have a product with the functionality you need, you can create your own app or extension and users can add it to their Chrome OS devices or Chrome browser. For example, as an administrator, you can automatically install a private bookmarking app on users' devices that links to the HR website.

Preparation

• If the manifest file specifies the target site that the app or extension links to, verify ownership of that site.
• If your app or extension is hosted on a private server, you can control who has permission to publish it to the Chrome Web Store. You can disable ownership verification for third party sites that the application links to.

Step 1: Create an app or extension

Below we use a bookmark application as an example. For instructions on creating more complex Chrome apps and extensions, see the getting started guide.

1. Create a folder on your computer where the application or extension files will be stored. Give it an application name.
2. Create a manifest file.
   1. Create a JavaScript ® Object Notation (JSON) file in a text editor. See an example JSON file for a bookmark app.
   2. Check if the code in the JSON file is formatted correctly using a tool like JSONLint.
3. Place the file manifest.json to the application or extension folder.
4. Create a logo.
   1. The image must be 128 x 128 pixels in size.
   2. Save the logo file as 128.png in the application folder.

Step 2: Test the app or extension

Developers can test their apps and extensions in the Chrome browser or on Chrome OS devices.

To troubleshoot an app or extension, use Chrome logs.

Step 3: Create an app collection (optional)

An admin can create an app gallery for an organization to recommend Chrome apps and extensions for users to install.

Step 4: Publish your app or extension to the Chrome Web Store

A developer can make an application or extension publicly available or restrict access to it. When publishing to the Chrome Web Store, you have three options to choose from.

• Public: Anyone can find and install the application.
• Access via link: You can install an application or extension only via a link. It is not included in search results in the Chrome Web Store. You can send the link to users both inside and outside your organization's domain.
• Private: Only users in your domain can find and install the app or extension. In addition, you can restrict access to the product only to trusted testers whose names are listed in the developer toolbar.

To add an app or extension to the Chrome Web Store, create a ZIP archive of the appropriate folder, and then publish the product.

Step 5. Set up rules for working with the application or extension

The Google Admin Panel lets you manage how you use apps and extensions on Chrome devices and the Chrome Browser on Windows, Mac, and Linux computers in your organization. Chrome rules can be customized

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); addListener(init);

Background page runs in the 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; bottom: 0px; right: 0px; 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 provide it in fragments, the full code is 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 the 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.

Google is constantly improving the Google Chrome mobile browser for Android, adding useful features to it. Many users are not aware of certain functions that will make surfing the Internet easier, faster and more convenient.

Important: Some features may not be available on some smartphones due to outdated Chrome (we recommend updating via Google Play) or OS version.

1. Simplified search from the page

It often happens that while searching for the necessary information on the Internet, you come to a site where there is exactly what you need, but the text uses unclear terms or simply contains things that you have not encountered before. Typically, the user opens a new tab, enters an unknown word into the search bar, searches for it, then returns to the main material. But this process can be made much easier and faster.

Right in the text we evict an unfamiliar word/phrase, and a panel with a Google search appears at the bottom. We pull it higher, we see the search results. Feel free to follow the link, and click on “Back” to return to the page where we started.

2. Forced scaling

Many sites do not allow you to use the zoom function. Some people do this deliberately, some resources are limited by their own engine. Whatever the reasons, Chrome allows you to bypass this ban. Go to “Settings”, “Accessibility”, check the box “Force resizing”.

On some sites, even with an active setting, the ban cannot be bypassed. A striking example is the mobile version of Yandex.

3. One-handed zooming

Most users, when they want to enlarge an object on a page, place two fingers on the screen and then spread them in different directions. This can only be done when using two hands, and the size of the display does not matter. But there is an alternative that will be especially appreciated by users of large smartphones.

To zoom in, just touch the screen once, lift your finger and quickly put it back, and then slide up and down the screen. No second hand needed! Don’t forget about the smart adjustment of content to the size of the display by double tapping - effective when uninformative blocks appear on the left and right, and the text is located strictly in the center.

This method of zooming in/out is systemic, which means it works in some other programs, for example, Google Maps

4. Quickly switch between tabs

Users of mobile browsers constantly face the same problems as in desktop clients - with a bunch of open tabs. And if site tags are displayed on a computer and tablet, on smartphones you have to use the “Tabs” button. But in Chrome you can do without this; just swipe from left to right or right to left across the address or search query input field to switch to adjacent tabs!

If you need to move much further than one or two tabs, you still don’t have to click on a separate button - just swipe down the search bar to go to the menu of open tabs. And if you swipe one of the tabs from right to left, you can close it immediately, but you can’t save time here, since each of them has a small cross to perform the same action.

5. Close all tabs

It often happens that in a rush of web surfing, dozens of tabs end up open in the browser. If you are sure that there is nothing important there, you can close them all at once. To do this, go to the list of open sites using any of the convenient methods, click the three dots, click on the “Close all tabs” item.

6. Quick menu navigation

Swiping in Chrome is used almost everywhere. For example, you don't need to click on the three dots to get to the menu, just put your finger on them and swipe down. Although at first glance this gesture seems of little use, when you get used to the arrangement of items in this menu, you can switch to individual functions without thinking at all. So, for example, it is effective to switch to the “desktop” version of the site.

7. Menu benefits

Some browser features are on the surface, but we don’t remember them when they become necessary. In particular, the menu offers options such as “Find on Page” (search for specific text on the site you are viewing), “Recent Tabs” (recently viewed but already closed sites) and “Add to Home Screen” - the latter creates a link to the selected page directly on the desktop.

Convenient for cases when you systematically visit the same site, through which you need to go through several levels of immersion to reach the goal. This usually happens with exchange rates or weather (of course, there are specialized applications, but they take up space in the device’s memory).

8. Traffic savings

In the settings there is also a “Traffic Saving” function, which compresses content before downloading to the smartphone. Thus, sites load faster and the amount of traffic consumed is reduced. Please note that this feature does not work with sites whose addresses begin with https. With typical Internet use, savings range from 20-40% of traffic, depending on the resources visited.

9. Guru

Google is pursuing several development branches for the Chrome browser; if you want to try new features before others, then you should switch to the Beta version. Although this branch works stably, do not forget that Google does not guarantee the same quality of work as in the case of the mainstream version of the browser.

Regardless of the version selected, the user may have access to some features that are disabled by default. To do this, enter in the search bar:

A page opens with a long list of experimental features; if you selected Chrome Beta, then there will be more switches in this list. It should be borne in mind that some functions here work very poorly, and therefore, after activating them, immediately check their functionality in several places so that the browser does not “fall” at the most inopportune moment later.

Most of the features will be of no interest to the mass consumer, but you can truly adjust your user experience in detail (including disabling some functions, for example, page auto-refresh).

10. Save page

Google Chrome allows you to save a page as a PDF document on your smartphone, which will not only allow you to access the content without an Internet connection, but also record the current state of the page (you never know why you might need this). To do this, select “Print” from the menu, and then click “Save as PDF”. Ready.

Bonus

Another feature of Chrome is the built-in file manager. To access it, enter in the address bar:

The manager cannot be called super-convenient or extremely functional, but its presence, again, will allow most users not to install a separate program to satisfy basic needs. Remember point 7, this file manager can also be placed on your desktop!

Of course, Chrome also has features such as synchronizing tabs with other devices that use this browser, Incognito mode and others. Do you think that we have unfairly neglected some function? Write about it in the comments!

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 in the new version Chrome Web Store. There are free and paid applications that 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 are installed by default and appear on the new page tab 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 except 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 Chrome web app 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.