Description of applications in google chrome. What is "Chrome"? Description and features of the browser. Sample Chrome Apps for Desktop
It happens to everyone. You open a long page and start reading without waiting for it to finish downloading. At this time, the pictures are finally loaded and embedded into the page, as a result of which you lose the place where you left off.
To prevent this from happening again, open the mobile Chrome service settings page located at chrome://flags. Next, you need to find the option "Adjust scroll" and set it to the "Enabled" position.
2. Traffic saving
Chrome browser has a useful savings feature mobile traffic which, for some reason, few people use. It allows you to significantly reduce costs due to data compression. The appearance of the web page practically does not change, but its weight becomes several times smaller.
You can activate traffic compression directly in the program settings. Don't forget to check back here from time to time to see the results of this feature.
3. Opening desktop tabs on mobile
If you use the Chrome browser on all your devices, then you probably know that data is synced between them. Therefore, it is not at all necessary to bookmark the page if you started reading it at the computer and you suddenly needed to leave somewhere. You can simply open the "Recent Tabs" section on your mobile browser on the way, where you will find links to all the pages you have viewed recently, regardless of the computer you are using.
4. Save pages for offline reading
There are many programs for delayed reading, but there is not always a need for them, because Chrome itself can save pages for reading without connecting to the Web. By default, this feature is disabled, but this can be easily fixed.
You can enable this feature on the experimental settings page Google Chrome. Enter in the address bar chrome://flags, and then find and activate the option chrome://flags/#offline-bookmarks.
5. Using hints on the page
If, while reading the article, you come across a term whose meaning needs to be clarified, then do not rush to immediately turn to search engines. You can highlight the desired word, and then in context menu select "Show hints". After that, a panel with buttons will appear below, allowing you to send a request immediately to the desired application or service.
What are the functions mobile version Do you like Google Chrome the most?
It happens to everyone. You open a long page and start reading without waiting for it to finish downloading. At this time, the pictures are finally loaded and embedded into the page, as a result of which you lose the place where you left off.
To prevent this from happening again, open the mobile Chrome service settings page located at chrome://flags. Next, you need to find the option "Adjust scroll" and set it to the "Enabled" position.
2. Traffic saving
The Chrome browser has the most useful function of saving mobile traffic, which for some reason few people use. It allows you to significantly reduce costs due to data compression. The appearance of the web page practically does not change, but its weight becomes several times smaller.
You can activate traffic compression directly in the program settings. Don't forget to check back here from time to time to see the results of this feature.
3. Opening desktop tabs on mobile
If you use the Chrome browser on all your devices, then you probably know that data is synced between them. Therefore, it is not at all necessary to bookmark the page if you started reading it at the computer and you suddenly needed to leave somewhere. You can simply open the "Recent Tabs" section on your mobile browser on the way, where you will find links to all the pages you have viewed recently, regardless of the computer you are using.
4. Save pages for offline reading
There are many programs for delayed reading, but there is not always a need for them, because Chrome itself can save pages for reading without connecting to the Web. By default, this feature is disabled, but this can be easily fixed.
You can enable this feature on the Google Chrome experimental settings page. Enter in the address bar chrome://flags, and then find and activate the option chrome://flags/#offline-bookmarks.
5. Using hints on the page
If, while reading the article, you come across a term whose meaning needs to be clarified, then do not rush to immediately turn to search engines. You can highlight the word you want, and then select Show Suggestions from the context menu. After that, a panel with buttons will appear below, allowing you to send a request immediately to the desired application or service.
And what features of the mobile version of Google Chrome do you like the most?
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 that, it will be possible to add your extension or application.manifest.json
The code for any Chrome app, like any extension, starts with a manifest.json file. It describes all the meta-information of the application. Here's the editor's manifest 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 analyze the fields that met here. With the name and description, everything is clear. The version is a required field - the Chrome Web Store will require it to change when you upload 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 set event handlers for certain events, the most common of which is onLaunched. When the handlers are set, the background page is typically unloaded from memory and fired back only if one of the events to which it is subscribed 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. It is passed call parameters, in particular, the file(s) that the application should open. The entryToLoad = launchData["items"]["entry"] code saves the file passed to the application in a local variable, from which the editor code will then take it. The onLaunched event can also come 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 action in an already open window.
For the sake of completeness, 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; )
Core code: working with files
Since in our example we will limit ourselves to the minimum set of features for simplicity, the main code of the editor will be devoted almost exclusively to working with files. To do this, several APIs are used, some of which are already on the way to W3C standardization. The File API and related interfaces is a big topic that deserves a separate article. I recommend it as a good introduction.So let's break down the code in js/main.js . I will provide fragments of it, 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 asynchronously from the main window 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 currentEntry global variable.
The only specific feature in the code above is the chrome.fileSystem.chooseEntry method. Using this method, a file selection window opens (different 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 title of the window to show the path to the current file. How this title is displayed depends on the system. On Chrome OS, it doesn't show up at all. chrome.fileSystem.getDisplayPath is the most correct way to get the file path appropriate to show it to the user. Another representation of the path is available via 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, you need to get 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 in the article format. If you want to look at more detailed examples of how certain features of the Chrome API are used, there is a large set of examples of Chrome apps published on GitHub. The official documentation for all programming interfaces is at developer.chrome.com. The main place to get answers to specific questions about Chrome app programming is .
Google Chrome seriously simplifies many things, such as creating your own applications. Yes, you can prepare your application for publication in 5 minutes, or even less.
We will need:
- Google Chrome;
- your site or blog, which has already been added to Google Webmaster Tools and has been verified;
- icon size 128x128 pixels;
- a screenshot of your site sized 1280x800 or 640x400 pixels;
- app screenshot 440×280 pixels;
- Google Analytics ID (in UA-XXXXXX-YY format) - optional;
- card with $5 in the account.
We create an application
We'll start by creating a manifest.json file. This example shows the NetRival site manifest. Open any text editor, copy this code into it and change it for your application:
( "name": "NetRival - Technology Blog", "short_name": "NetRival", "description": "NetRival is a Blog Focused on Personal Technology, How-to Tutorials, Gadgets and Telecom", "version": "0.1 ", "manifest_version": 2, "icons": ( "128": "icon_128.png" ), "app": ( "urls": [ "http://www.netrival.com/#utm_source=google_chrome&utm_medium= chrome_app&utm_campaign=google_chrome_app" ], "launch": ( "web_url": "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app" ) ) )
At a minimum, you will need to change the "name" , "short_name" fields, as well as descriptions and links. Rename your application icon to icon_128.png . Create a new directory, put manifest.json and the icon itself there. Now zip the directory into a zip file. You will need it later.
Loading the application in Google Chrome
Open your browser, go to chrome://extensions/ and make sure you have the "Developer Mode" box checked. It is located on the page at the top right (this can be seen in the picture). Then click on the "Load unpacked extensions" button and select the folder where manifest.json and your extension's icon are located. You do not need to download the zip archive, Google Chrome will automatically download the manifest.json file from the specified directory, in this case from E:\NetRival_Chrome_App (this is highlighted in the screenshot).
Checking the created extension
The plugin is already working. To see this, go to chrome://apps/ and you'll see something that looks like a screenshot (clicking on the icon will take you to your website or blog).
We place the extension in the official directory
Now you can place our extension in the Google Chrome Store, where anyone can download it. You need to download the manifest.json and the icon in a zip file (we already did this). But first you need to pay a $5 registration fee that will give you access to the Google Chrome Developer Console (with this $5 you can list 20 of any Chrome apps, extensions or themes in the store).
Go to https://chrome.google.com/webstore/developer/dashboard and pay $5. After payment, click on the "Add a new product" button and select a zip file with the extension. After that, you will need to fill out a short application form and add screenshots.
Many articles have been published on Habré about creating extensions for Chrome, but the topic of developing Chrome applications (aka Chrome apps) has been touched upon much less frequently. Recently, it has become more relevant due to the spread of devices on ChromeOS. In addition, the infrastructure for building apps for Chrome has become more stable and easier to use. In this article I will try to answer the main questions: why write applications for Chrome at all, how they differ from extensions, web services, desktop applications, etc., as well as how they are developed and what restrictions are imposed on them. If this topic arouses interest, the article will have continuations covering more specific issues.
Why
The same functionality can be implemented using completely different technologies: you can write a program for Windows, make a web service, mobile app for Android and/or iOS, etc. What might motivate an author to opt for a Chrome app?- Working on ChromeOS. At the moment, the Chrome app is the main way to bring your program to Chromebook users. Is it worth it? Chromebooks are still smaller than, say, Windows computers, but the trend is changing. Last year, 5 times more Chromebooks were sold in the US than Macbooks.
- Chrome apps run on Windows, Linux, and OS X without any extra effort. Of course, there are many other ways to make an app portable, but most of them turn out to be noticeably more expensive.
- Recently, it has become possible to port Chrome apps to Android and iOS.
- On most systems, Chrome apps look like normal programs to the user. They are launched from the start menu, open normal windows without browser controls, can be used as default programs for opening files, and otherwise behave
as full programs.
Packaged apps and hosted apps
Everyone has seen Search, Gmail, Google Drive icons in the list of apps installed by default in Chrome. If you click on one of them, nothing that looks like an application opens. Instead, the user is simply transferred to the page of the corresponding service.The point is that there are two fundamental different types applications: hosted app and packaged app. Unfortunately, there are no established Russian terms for them. Search, Gmail, etc. are hosted. Such an application consists of a manifest.json file with a URL and security settings, and an icon. In fact, a hosted app is a special tab for an online service.
Unlike hosted, in the case of a packaged app, all the files necessary for the application to work are stored on the user's computer. Such apps tend to work better offline, can manage their own windows, and generally have access to more Chrome APIs.
In the future, we will talk about packaged apps.
Applications and Extensions
From the user's point of view, extensions and applications perform completely different functions: the extension changes how he uses the browser, and the application performs some task separate from the browser. The extension changes the content of the pages and perhaps adds a couple of buttons, and the application usually runs in its own window.At the same time, extensions and applications from the inside are very similar. Both are installed from the Chrome Web Store and are .crx files that are zip archives. The extension/application properties are described in the manifest.json file, and the UI in them is written in HTML5. Many Chrome APIs are available to both extensions and apps.
At the same time, there are significant differences. Applications can use features not available for extensions:
- manage your windows
- work directly with files on the user's computer,
- be assigned by programs to open certain types of files by the operating system,
- open TCP and UDP connections (this, for example, is used by the SSH client for Chrome),
- work with USB.
Development features
I have already mentioned that from the user's point of view, Chrome applications are not much different from ordinary programs. At the same time, from the point of view of a programmer, they are arranged quite differently. Some operations are easier, some are more difficult.Many interfaces used by applications are generally accepted standards and are well known to all web developers. For the UI, HTML and CSS are used, for working with HTTP - XMLHTTPRequest, etc.
The Chrome application implements synchronization between application instances on different computers with little or no additional effort. Working with files, like all other interfaces that depend on external resources, is asynchronous. On the one hand, this somewhat complicates the code for the corresponding operations, on the other hand, it guarantees the responsiveness of the interface and prevents blocking.
Another feature of Chrome is security management. In Chrome, it is arranged differently than in the classic ones. operating systems and more like the security system in Android. Chrome developers have always approached the addition of programming interfaces conservatively. When designing a system, it is easier to relax security restrictions over time than it is to make them more restrictive. As a result, for example, applications do not have unrestricted access to the file system. They mainly work with files either owned by the application or explicitly opened by the user.
What can you use besides HTML + JavaScript
The main programming language for Chrome is, of course, JavaScript. But this does not mean that all your code needs to be rewritten on it. There are several solutions that allow you to use code in other programming languages in your Chrome app. Among them:- native client. The code is compiled to allow both processor execution and browser verification. The NaCl code uses a fairly rich set of Pepper APIs to communicate with the outside world, including, in particular, working with the file system, OpenGL, and sound.
- Emscripten If NaCl doesn't work for you, you can compile your C++ code directly to JavaScript. On modern browsers, the resulting JavaScript is only a few times slower than if it were compiled to native code. Of the benefits - compatibility with all interfaces available from JavaScript.
Example
In conclusion, I will give an example of an application that I myself have worked on (and
working). This is a Text editor. The editor code is available on github. For actual editing, the CodeMirror library is used. The application implements work with files, windows, saving settings and other necessary functions.
