Salesforce Voice Search Chrome Extension Release

icon128

You must have read the article where i wrote how can we create voice search extension. It is good for dev guys.

But all are not Dev’s so i released this. Now just install it and make your words stronger than hands. 🙂

This extension provides Speech to Text functionality. Right now you can search by typing text. It’s little time-consuming.

How does it work?
You just have to click on salesforce search bar and speak here, you will be redirected to search result as salesforce providing.

After Installing the extension refresh or open new salesforce page, click on the search bar.

Then it will ask for permission. Here allow it to Use your microphone. It is just one time setup.

Install it from here

If you like this extension then please don’t forget to give your review and feedback.🙂

Speak and Cheers!!
Happy Salesforce!!

Create Chrome Extension for Voice Recognition Search in Salesforce

icon128

Hi All,

After this post you can search using voice recognition system in salesforce search bar. Right now you can search by typing text. Its little time-consuming. This extension provides Speech to Text functionality.
This post also gives you basic things for how to create a chrome extension.
Please read “Voice Recognition Search in Salesforce (VF-Page)” post to understand this post better.
How it works ?
You just have to click on salesforce search bar, after this speak and you will redirected to search result as salesforce providing.

Search enable

Implementation of Extension :
We need five components :
1. manifest.json
2. inject.js
3. jquery.min.js
4. background.js (Read here)
5. icon.png

manifest.json

Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information. Read more about manifest file. In this file we defines that on which domain extension will work, in this example it works for *.salesforce.com . we can enable for salesforce community as well.

{
 "name": "Salesforce Voice Search",
 "version": "1.0",
 "description": "A utility do search by speech.",
 "icons": {
 "128": "icon.png"
 },
 "permissions": [
 "tabs", "https://*.salesforce.com/*"
 ],
 "background": {
 "scripts": [
 "jquery.min.js",
 "background.js"
 ]
 },
 "content_scripts": [
 {
 "matches": [
 "https://*.salesforce.com/*" 
 ],
 "js": [
 "jquery.min.js",
 "inject.js"
 ]
 }
 ],
 "manifest_version": 2
}

inject.js

This file contains javascript which will injected on salesforce pages.

//Creating script for enable voice recognition 
var ScriptStr = '(function() {'+
					'\'use strict\';'+
					'if (! (\'webkitSpeechRecognition\' in window) ) return;'+
					'var talkMsg = \'Speak now\';'+
					'var patience = 6;'+
					'function capitalize(str) {'+
						'return str.length ? str[0].toUpperCase() + str.slice(1) : str;'+
					'}'+
					'var speechInputWrappers = document.getElementsByClassName(\'searchBoxClearContainer\');'+
					'[].forEach.call(speechInputWrappers, function(speechInputWrapper) {							'+
						' var inputEl = document.getElementById(\'phSearchInput\');'+
						'var micBtn = document.getElementById(\'phSearchInput\');	'+
						'var inputHeight = inputEl.offsetHeight;'+
						'var inputRightBorder = parseInt(getComputedStyle(inputEl).borderRightWidth, 10);'+
						'var buttonSize = 0.8 * inputHeight;'+
						'var finalTranscript = \'\';'+
						'var recognizing = false;'+
						'var timeout;'+
						'var oldPlaceholder = null;'+
						'var recognition = new webkitSpeechRecognition();'+
						'recognition.continuous = true;'+
						'function restartTimer() {'+
							'timeout = setTimeout(function() {'+
								'recognition.stop();'+
							'}, patience * 500);'+
						'}'+
						'recognition.onstart = function() {'+
							'oldPlaceholder = inputEl.placeholder;'+
							'inputEl.placeholder = talkMsg;'+
							'recognizing = true;'+
							'micBtn.classList.add(\'listening\');'+
							'restartTimer();'+
						'};'+
						'recognition.onend = function() {'+						
							'if( document.getElementById(\'phSearchInput\').value != \'\' ){'+
								'document.getElementById(\'phSearchButton\').click();'+
							'}						'+
							'recognizing = false;'+
							'clearTimeout(timeout);'+
							'micBtn.classList.remove(\'listening\');'+
							'if (oldPlaceholder !== null) inputEl.placeholder = oldPlaceholder;'+
						'};'+
						'recognition.onresult = function(event) {'+
							'clearTimeout(timeout);'+
							'for (var i = event.resultIndex; i < event.results.length; ++i) {'+
								'if (event.results[i].isFinal) {'+
									'finalTranscript += event.results[i][0].transcript;'+
								'}'+
							'}'+
							'finalTranscript = capitalize(finalTranscript);'+
							'inputEl.value = finalTranscript;'+
							'restartTimer();'+
						'};'+
						'micBtn.addEventListener(\'click\', function(event) {'+
							'event.preventDefault();'+
							'if (recognizing) {'+								
								'recognition.stop();'+
								'return;'+
							'}'+
							'inputEl.value = finalTranscript = \'\';'+
							'recognition.start();'+
						'}, false);'+
					'});'+
				'})();';
//Injecting script on page
	var elem = document.createElement("script");
	elem.type = "text/javascript";
	elem.innerHTML = ScriptStr;
	document.head.appendChild(elem);

How install it in google chrome ?
1. Create a folder name as “Salesforce Now”
2. Put all files in this folder
3. Type chrome://extensions/ in your browser
4. Check the Developer Mode CheckBox
5. Click on Load unpacked extension..
6. It will open a window, in this window define path of your chrome extension folder.

After all setup it will appears in your extension list.
Capture

Whenever your browser will opens, it ask for continue with developer mode that time select continue.

Now refresh or open new saleforce page, click on search bar. Allow it to Use your microphone.
Capture

Email me on vishnukumarramawat@gmail.com for complete code.

If you have any suggestion, will be appreciated. 🙂