>>A quick guide on programming the address bar of Chrome using JavaScript>
To address the ongoing need for cross-platform applications, Google is attempting to emulate smartphone
apps to build more user friendly web applications running directly from a browser. An application running inside a browser typically has its own dedicated UI coupled with rich user interaction. These could include games, photo editors or even video players that run inside the browser.‘Chrome Packaged Apps’ or ‘Chrome Apps’ are installable web apps that are available for download on the Chrome Web Store
and behave like a fusion of extensions and hosted apps. Packaged Apps don’t share the Chrome interface (unlike extensions) and allow hardware devices, such as your camera, to be utilised over TCP/IP (Network), USB and Bluetooth by giving additional privileges to the application, making web apps behave like desktop apps. The capabilities of Chrome apps include desktop notifications – hard to imagine with a browser as the platform even just a few years ago.Without diving into any more detail, let’s get into the essence of this article and make our first packaged app for Google Chrome. The app will show programmability of the Omni box – Chrome’s address bar. It will also demonstrate how the Omni box uses keywords such as “wiki” and “Facebook” to allow access to the search engines of these respective sites and provide suggestions to the user.
What you will need:
1. An active internet connection;
2. Text editor: Sublime Text 2 with Chrome Apps plug-in;
3. Basic JavaScript knowledge;
4. $5 or `310;
5. A Google account (preferably a dedicated account for development
purposes);
Let’s start!
1. Launch Sublime Text 2
2. Go to Tools > Command Palette… [Ctrl]+[Shift]+[P]
3. Search “install”
4. Click “Package Control” and install Package
5. Search “Chrome” in the Package Control dialogue box
6. Click “Chrome Apps and Extensions”
7. Notice a new tab on the right side of Help called “Chrome”
8. Go to Chrome > New App… > Hello World!
9. Three files are created. Save each of them in the same directory to enable colour-coding. (These three files are typical to any packaged app on Chrome.
For our purposes, we’ll need only two files: manifest.json and background.js)
have its own dedicated UI. The two functions called in the code are essentially event listeners that are triggered when the input is changed or entered into the Omni-box. Both the functions are defined using anonymous function definitions. “console.log()” function is used to show output on the development console and not to the user. “suggest()” function accepts an array and can be programmed to receive its data from a large website equipped with search engine capabilities. It accepts data with two parameters, that is ‘text’ – the corresponding replacement text for each suggestion in the Omni-box that changes the input in the address
bar when any suggestion is hovered over and ‘description’– the suggestion option that appear in the Omni-box, which could even be the title of a webpage. When the user accepts the search text by hitting [enter]. The alert() function displays a pop-up confirming that the Omni-box is accepting the input from the user.
10. Once you've completed saving the two files in a folder, open the Chrome browser
11. Go to Options -> Tools -> Extensions or type “chrome://extensions/” in the address bar
12. Make sure Developer Mode is checked
13. Load Unpacked Extension…
14. Browse to the folder containing the files and Click “OK”
15. Refresh the browser and launch the application
16. Open a new tab and test your application
17. To upload the app on the Chrome Web Store, go to https://chrome.google.com/webstore/developer/dashboard and sign in using your developer account.
18. The folder containing the files of the application needs to be converted to .zip format. Use any freeware such as WinRAR or 7-Zip to do this.
19. On the dashboard of the website, click on “Add New Item”.
20. Accept the Terms & Conditions.
21. Click on “Choose File” and upload the .zip file.
22. Your application will be uploaded on the Chrome Web Store following payment of a one-time developer’s fee of $5. You can also distribute your application in the .crx format for free by using the option “Pack Extension…” at chrome:// extensions/ To install a .crx file, just drag-and-drop the file onto Chrome.
24.If you intend on earning through your application, get a
Google Checkout Merchant Account by following the steps
at: https://support.google.com/chrome_webstore/answer/96832. Read the branding guidelines at:
https://developer.chrome.com/webstore/branding
25. Before uploading your application on the store, you’ll need to provide a detailed description of your app, screenshots or a video explaining the app, a primary category for the app and a small tile icon (16px square) for the Chrome Web Store wall.
26. Once your application is uploaded onto the Chrome Web Store you’ll get an App ID and a file with the private key of your application for authentication purposes.
27. Follow the guidelines for publishing to test accounts and publishing to the world at https://developer.chrome.com/webstore/publish. For more information about updating and uploading the app on the Chrome Web Store, go through the article on packaging at
https://developer.chrome.com/extensions/packaging. There‘s also an exhaustive step-by-step guide along with a checklist available at https://developer.chrome.com/webstore/launching for launching your application.
*Some resources for support
>> Quick Chrome Apps tutorials (https://developer.chrome.com/apps/app_codelab) – Once
you’re comfortable with the idea of developing Chrome Apps, you can learn more about creating them at Google’s Codelab. You can make your own “to-do” app using HTML5 and cloud storage.
>> Other JavaScript APIs (https://developer.chrome.com/extensions/api_index) – Also, do check
out other APIs within the Chrome environment (chrome.* APIs) to learn more about the modules provided by Chrome for application development.
>> Other Web APIs (https://developer.chrome.com/extensions/api_other) – You can also use
external APIs such as JQuery by bundling them with the application. Find more information on other APIs at the given link.
>> Developer’s guide for Chrome Apps (https://developer.chrome.com/extensions/devguide) – Here information about all current modules can be found.
>> Sample code for Packaged Apps (http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/ and
https://developer.chrome.com/apps/samples) –
Sample codes can be found on the Chromium website.
>> Query support (http://stackoverflow.com/questions/tagged/google-chrome-app) – You can post any queries at the Stack Overflow forum.
Final word of advice
Google’s own applications such as Google Keep and Google Hangouts, and popular applications such as ANY.Do, Wunderlist and Pocket have been developed using this technology and are now available for offline purposes as Packaged Apps only on Chrome. Chrome Apps are surely going to be under heavy development over the next few years or so. So, waste no more time and start coding to get a piece of the action before there’s way too much to learn.
To address the ongoing need for cross-platform applications, Google is attempting to emulate smartphone
apps to build more user friendly web applications running directly from a browser. An application running inside a browser typically has its own dedicated UI coupled with rich user interaction. These could include games, photo editors or even video players that run inside the browser.‘Chrome Packaged Apps’ or ‘Chrome Apps’ are installable web apps that are available for download on the Chrome Web Store
and behave like a fusion of extensions and hosted apps. Packaged Apps don’t share the Chrome interface (unlike extensions) and allow hardware devices, such as your camera, to be utilised over TCP/IP (Network), USB and Bluetooth by giving additional privileges to the application, making web apps behave like desktop apps. The capabilities of Chrome apps include desktop notifications – hard to imagine with a browser as the platform even just a few years ago.Without diving into any more detail, let’s get into the essence of this article and make our first packaged app for Google Chrome. The app will show programmability of the Omni box – Chrome’s address bar. It will also demonstrate how the Omni box uses keywords such as “wiki” and “Facebook” to allow access to the search engines of these respective sites and provide suggestions to the user.
What you will need:
1. An active internet connection;
2. Text editor: Sublime Text 2 with Chrome Apps plug-in;
3. Basic JavaScript knowledge;
4. $5 or `310;
5. A Google account (preferably a dedicated account for development
purposes);
Let’s start!
1. Launch Sublime Text 2
2. Go to Tools > Command Palette… [Ctrl]+[Shift]+[P]
3. Search “install”
4. Click “Package Control” and install Package
5. Search “Chrome” in the Package Control dialogue box
6. Click “Chrome Apps and Extensions”
7. Notice a new tab on the right side of Help called “Chrome”
8. Go to Chrome > New App… > Hello World!
9. Three files are created. Save each of them in the same directory to enable colour-coding. (These three files are typical to any packaged app on Chrome.
For our purposes, we’ll need only two files: manifest.json and background.js)
manifest.json:{The manifest describes meta-information about your application such as name, one-line description, version number (to avoid duplicity between updates) and additional information on how to launch your app and privileges associated with it. Manifest version 1 has been deprecated and is no longer available for use.
“name” : “Digit”,
“description” : “To use, type ‘digit’ [space] &
a search term into the address bar.”,
“version” : “1.0”,
“background”:
{
“scripts” : [“background.js”]
},
“omnibox” : { “keyword” : “digit” },
“manifest_version” : 2
}
background.js://This event is triggered when the user changesThe Omni-box module is utilised in this code to run as a background script, since the application doesn't
the input in the omnibox.
chrome.omnibox.onInputChanged
addListener(function(search, suggest)
{
console.log(‘Input Changed: ‘ + search);
suggest
([
{content: text + “ change1”, description:
“first suggestion”},
{content: text + “ change2”, description:
“second suggestion”}
]);
});
//This event is triggered when
the user accepts the input in
the Omnibox.
chrome.omnibox.onInputEntered.
addListener(
function(text)
{
console.log(‘Input Entered:
‘ + text);
alert(‘You searched for “’ +
text + ‘”’);
});
have its own dedicated UI. The two functions called in the code are essentially event listeners that are triggered when the input is changed or entered into the Omni-box. Both the functions are defined using anonymous function definitions. “console.log()” function is used to show output on the development console and not to the user. “suggest()” function accepts an array and can be programmed to receive its data from a large website equipped with search engine capabilities. It accepts data with two parameters, that is ‘text’ – the corresponding replacement text for each suggestion in the Omni-box that changes the input in the address
bar when any suggestion is hovered over and ‘description’– the suggestion option that appear in the Omni-box, which could even be the title of a webpage. When the user accepts the search text by hitting [enter]. The alert() function displays a pop-up confirming that the Omni-box is accepting the input from the user.
10. Once you've completed saving the two files in a folder, open the Chrome browser
11. Go to Options -> Tools -> Extensions or type “chrome://extensions/” in the address bar
12. Make sure Developer Mode is checked
13. Load Unpacked Extension…
14. Browse to the folder containing the files and Click “OK”
15. Refresh the browser and launch the application
16. Open a new tab and test your application
17. To upload the app on the Chrome Web Store, go to https://chrome.google.com/webstore/developer/dashboard and sign in using your developer account.
18. The folder containing the files of the application needs to be converted to .zip format. Use any freeware such as WinRAR or 7-Zip to do this.
19. On the dashboard of the website, click on “Add New Item”.
20. Accept the Terms & Conditions.
21. Click on “Choose File” and upload the .zip file.
22. Your application will be uploaded on the Chrome Web Store following payment of a one-time developer’s fee of $5. You can also distribute your application in the .crx format for free by using the option “Pack Extension…” at chrome:// extensions/ To install a .crx file, just drag-and-drop the file onto Chrome.
24.If you intend on earning through your application, get a
Google Checkout Merchant Account by following the steps
at: https://support.google.com/chrome_webstore/answer/96832. Read the branding guidelines at:
https://developer.chrome.com/webstore/branding
25. Before uploading your application on the store, you’ll need to provide a detailed description of your app, screenshots or a video explaining the app, a primary category for the app and a small tile icon (16px square) for the Chrome Web Store wall.
26. Once your application is uploaded onto the Chrome Web Store you’ll get an App ID and a file with the private key of your application for authentication purposes.
27. Follow the guidelines for publishing to test accounts and publishing to the world at https://developer.chrome.com/webstore/publish. For more information about updating and uploading the app on the Chrome Web Store, go through the article on packaging at
https://developer.chrome.com/extensions/packaging. There‘s also an exhaustive step-by-step guide along with a checklist available at https://developer.chrome.com/webstore/launching for launching your application.
*Some resources for support
>> Quick Chrome Apps tutorials (https://developer.chrome.com/apps/app_codelab) – Once
you’re comfortable with the idea of developing Chrome Apps, you can learn more about creating them at Google’s Codelab. You can make your own “to-do” app using HTML5 and cloud storage.
>> Other JavaScript APIs (https://developer.chrome.com/extensions/api_index) – Also, do check
out other APIs within the Chrome environment (chrome.* APIs) to learn more about the modules provided by Chrome for application development.
>> Other Web APIs (https://developer.chrome.com/extensions/api_other) – You can also use
external APIs such as JQuery by bundling them with the application. Find more information on other APIs at the given link.
>> Developer’s guide for Chrome Apps (https://developer.chrome.com/extensions/devguide) – Here information about all current modules can be found.
>> Sample code for Packaged Apps (http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/ and
https://developer.chrome.com/apps/samples) –
Sample codes can be found on the Chromium website.
>> Query support (http://stackoverflow.com/questions/tagged/google-chrome-app) – You can post any queries at the Stack Overflow forum.
Final word of advice
Google’s own applications such as Google Keep and Google Hangouts, and popular applications such as ANY.Do, Wunderlist and Pocket have been developed using this technology and are now available for offline purposes as Packaged Apps only on Chrome. Chrome Apps are surely going to be under heavy development over the next few years or so. So, waste no more time and start coding to get a piece of the action before there’s way too much to learn.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon