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!!

Voice Recognition Search in Salesforce (VF-Page)

icon128

Hi All,

Recently i have posted “Create Chrome Extension for Voice Recognition Search in Salesforce“. Some devs are little confused about how is it working. So i am writing this post for implement this feature on visualforce pages to get it better.

How is it working on salesforce standard search bar ?
First of all we need to right click on search bar and then select “Inspect Element”. After that we need to understand id and classes for this box.

Capture

In this javascript we will use searchBoxClearContainer,phSearchInput,phSearchInput and phSearchButton.

<apex:page>
<h1>Click on search bar...</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(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');
    //It works for only text box which is located in 'searchBoxClearContainer'
    [].forEach.call(speechInputWrappers, function(speechInputWrapper) { 

        //Getting text from phSearchInput textbox
        var inputEl = document.getElementById('phSearchInput');

        //Handle click event on inputBox
        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);
        }

        //Changing the placeholder text inside textbox
        recognition.onstart = function() {
            oldPlaceholder = inputEl.placeholder;
            inputEl.placeholder = talkMsg;
            recognizing = true;
            micBtn.classList.add('listening');
            restartTimer();
        };

        //When someone stop to speaking, it will run
        recognition.onend = function() {
            //Checking for is textbox contains ant string or not
            if( document.getElementById('phSearchInput').value != '' ){
                //It click the default search button
                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();
        };

        //Handling click event on Textbox -  we can make it for button as well but right now we have no mic button as google have so i am giving this event on textbox
        micBtn.addEventListener('click', function(event) {
            event.preventDefault();
            if (recognizing) {
                recognition.stop();
                return;
            }
            inputEl.value = finalTranscript = '';
            recognition.start();
        }, false);
    });
})();
</script>
</apex:page>

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. 🙂