At the beginning of the year, I’ve worked with a big organization that wanted to avoid the automatic suggestions Chrome is making in the omnibox (=the top field in Chrome, where you type searches and see the url).
Their main requirement was the need to allow employees to type a word and get the internal site that they are use to see. For example, the user will type ‘sale’ and Chrome will redirect them to the internal portal of sales. If you won’t modify Chrome it will run a google search on ‘sale’ and the results will be something like:
The good news is that with this little extension you will be able to control the redirect of the users to the right internal location. Let’s jump into code.
This is the code of our manifest file that describe the extension
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "Omnibox customization example", | |
"description" : "To use, type 'get' plus a search term into the Omnibox.", | |
"version": "1.1", | |
"background": { | |
"scripts": ["background.js"] | |
}, | |
"omnibox": { "keyword" : "get" }, | |
"manifest_version": 2 | |
} |
Important to notice is that we setting the keyword ‘get’ in order to activate this extension. You can choose something shorter if you like. Another aspect is the “manifest_version”: 2 which making sure we are compatible with the latest spec.
This is the code of our background page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// each time the user updates the text in the omnibox this event | |
// is fired and we will use it to suggest search terms for | |
// our internal users. | |
chrome.omnibox.onInputChanged.addListener( | |
function(text, suggest) { | |
suggest([ | |
{content: "CRM" , description: " fetch the internal CRM"}, | |
{content: "ERP" , description: " fetch the internal ERP"}, | |
{content: "sales", description: " fetch the lastest sales report"} | |
]); | |
}); | |
// This event is fired with the user accepts the input in the omnibox. | |
chrome.omnibox.onInputEntered.addListener( | |
function(text) { | |
if (text.indexOf("/") < 1) { | |
text += "/"; | |
} | |
if (text.indexOf("http") < 0) { | |
text = "http://our-internal-portal/" + text; | |
} | |
alert('We are taking you to: "' + text + '"'); | |
navigate(text); | |
}); | |
function navigate(url) { | |
chrome.tabs.getSelected(null, function(tab) { | |
chrome.tabs.update(tab.id, {url: url}); | |
}); | |
} |
Here we will listen to the events of omnibox.onInputChanged and omnibox.onInputEntered in order to execute our logic.
Another point you might want to consider is to go to:
chrome://settings/ -> Advanced ->Â and then to disable these options:
- Use a web service to help resolve navigation errors
- Use a prediction service to help complete searches and URLs typed in the address bar
- Predict network actions to improve page load performance
It doesn’t matter if you are working in a startup of few people or a big organization with 2.2M employees (e.g. Walmart). In both cases, you probably have internal network and  internal systems that your users will love to access with few keywords like: CRM, ERP, Sale, Marketing, QA etc’.
Happy coding & Happy Passover.