file at http://dgit.in/1fhVdni
background.js:
//This event is triggered when the user changes
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 + ‘”’);
});
The Omnibox module is utilised in this code to run as a background script, since the application doesn’t 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 Omnibox.
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 Omnibox that changes the input in the address bar when any suggestion is hovered over and ‘description’ – the suggestion option that appear in the Omnibox, 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 Omnibox 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 http://dgit. in/1govEh1 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: http://dgit.in/1hCoLxU. Read the branding guidelines at: http://dgit.in/Mh3OtH
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 http://dgit.in/1myIgJR. For more information about updating and uploading the app on the Chrome Web Store, go through the article on packaging at http://dgit.in/1eeo71H. There‘s also an exhaustive step-by-step guide along with a checklist available at http://dgit.in/1h6v4q8 for launching your application.
*Some resources for support
>> Quick Chrome Apps tutorials (http://dgit.in/MJjQgF) – 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 (http://dgit.in/1h6wyAD) – 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 (http://dgit.in/1f4SgQX) – 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 (http://dgit.in/1myFjZQ) – Here information about all current modules can be found.
>> Sample code for Packaged Apps (http://dgit.in/1p2MBnh and http://dgit.in/1fnAqgB) – Sample codes can be found on the Chromium website.
>> Query support (http://dgit.in/1cyEslp) – 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.
