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

Advertisements

20 thoughts on “Create Chrome Extension for Voice Recognition Search in Salesforce

  1. Pingback: Voice Recognition Search in Salesforce (VF-Page) | Vishnu Vaishnav

  2. Hi Vishnu,

    Thanks for information.
    I followed the steps. but i am getting following error chrome :

    Failed to load extension from: E:\
    Manifest file is missing or unreadable

    manifest.json, inject.js and icon.png in my E: drive.

    Could you please let me how can i solve this ?

    Thanks
    Nitish

    Like

  3. Thank you …..
    i am getting below error

    Error :

    Failed to load extension from: ~\Desktop\Salesforce Now
    Could not load background script ‘jquery.min.js’.

    Like

  4. Pingback: Salesforce Voice Search Chrome Extension Release | Vishnu Kumar

  5. Hi !

    We are a team of 3 Salesforce Professionals who work as Freelance consultants and have been working on Salesforce platform since last 6 years and have been giving online training simultaneously.

    After getting positive response on platforms like Skillfeed, Udemy etc we have recently started working on our own platform http://getskillsfast.com

    I am writing this email to look for Opportunities of working together in harmony and creating a win – win situation for both of us.

    Our Salesforce school has 3 comprehensive courses , covering complete Salesforce (both Admin and Development) step by step including Salesforce1, Lightning Framework etc and a detailed course on Salesforce Integration.

    Kindly check them here

    http://courses.getskillsfast.com

    The reason I am writing this mail is to check, If you would be Interested in sharing a few lines about my courses on your website or to your List. I have done a similar activity with another Salesforce related blog and it was great.

    We also have an Affiliate program where you can earn 50% commission per sale. You will be provided with your own dashboard to monitor and track your sales and commissions. The Affiliate program is available at the bottom of every course page. Simply sign up as an Affiliate below any course page and start sharing the link. All payments are done automatically on monthly basis in the first week of every month.

    We can also work together and mutually come up with a discounted price specifically to help the readers of your Blog.

    I thought I’d give you first refusal to review my website before contacting other website/Blog Owners. If you could let me know if you’re keen to learn more, I’d appreciate it.

    Thanks a lot for your time.

    With Best regards,
    Priyanka
    GetSkillSFast

    Like

  6. Hi, very good information. I am looking to implement it directly in Salesforce global search box rather using it as a chrome extension. And bring in the VR search in chatter window. is it possible? could you share the code.

    my email – satsix@gmail.com
    rgds, Sathish

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s