|
Author: David Masri Founder & CEO |
This article will walk you through my experience coding a simple Chrome extension (inNote) as a learning exercise. It allows you to enter notes against LinkedIn Contacts and Companies. You can download it here for free.
In my book, when discussing integrations, I categorize integrations in one of 2 ways, as either a "Data integration" or an "Application UI automation integration", and define them as follows:
Data integrations: When the integration is centered around a data interchange. Data moves back and forth and may or may not be saved to Salesforce, but the data is displayed using the native Salesforce UI.
Application UI automation integrations: When the integration is centered around surfacing another system's UI in Salesforce or automating the application in some way driven off Salesforce actions or data.
Just about every project I have worked on, there was some data integration component, it's much more common than Application UI automation integrations. This is probably because of the perceived complexities of application automation. Regardless, I do think that application automation is very underutilized as an integration option, particularly for cases where data movements are not enough, users need to work in two systems, and are constantly toggling (or swivel chairing) between systems. Even if you can only automate the record lookup in the target system UI, that has the potential to save hours a day.
I have written quite a few application UI automation integrations, most of these have been MS office automations or plugins (custom buttons on the toolbar). I have written a few browser automation scripts to automate web apps, and I have even written a few for apps build on proprietary platforms, then happen to have an SDK for automation. But I have never written a browser plugin, that is until now.
So, I wanted to write a browser plugin just to learn how powerful (or powerless) they can be in facilitating integrations, and to get a better understanding of how they work. So, I set aside a few hours on Christmas day to work on it (Being Jewish makes Christmas a great time to do such things.) This article will walk you through the good the bad and the ugly of coding a Chrome browser app (without delving in to the specifics of the code). This article outlines my approach and experience.
This was easy, coming from the CRM world, I always wanted a way to take notes against my LinkedIn contacts, and there was no way I was going to pay for a LinkedIn sales navigator license just for this feature. So that's the App.
Time to completion: 0 Min.
This was also incredibly easy, I did a google search for "build a google chrome extension" and this article came up 20 minutes later. I had an extension that worked, though it did nothing. It had an Icon next to the address bar that when clicked pop up an html page. Very nice.
Time to completion: 20 Min.
Here's what I came up with:
Time to completion: 5 Min.
Requirement #1: The Extension is only active if the user is looking at a Contact or Company page.
I already had the code shell in place, all I had to do was tell it when it should be active. I decided the best way to do this was to look at the URL, if it contained with "linkedin.com/in/"" it's Contact record, if it contained "linkedin.com/Company/"" it is a company record. The extension will be disabled for all other URLs.
A quick look into the chrome docs and I see there is a simple way to do this using the
A quick look into the chrome.declarativeContent API.
Time to completion: 1 Hour. (Not bad for a Noob)
Requirement #2: If they click on the extension, a popup will show and allow the user to enter Notes preferably in rich text. The pop up was already done! Great, add a simple Html form to my popup and and Done.
Time to completion: 20M Min.
Great, let's add the rich text - I add my favorite rich text control libraries (TintyMCE) update the popup HTML code, and give it a test. Code is rejected because of some security issue. I'm not going to modify a standard library to make it chrome extension compatible. So, I guess I'll just have to try a different one, and same security error...try 6 more... search google...all fail. I give up on the rich text requirement.
Time wasted looking for a Chrome Extension Compatible rich text editor: 3.5 Hours
Requirement #3: Ability to Save the note.
First step was to parse out the "LinkedIn record Id" from the URL, I would then store the notes as a key value pair with the LinkedIn Record Id as the key and the note as the value.
I really, really, wanted to save the note to the users google drive account into a JSON file, or to some reliable place that was owned by the user. This proved to be an incredibly difficult thing to find. I wound up using Chrome Storage. Unfortunately, Chrome Storage is quite limited by default, so I set the permission all to allow for Unlimited Storage to get around that. I really hate that there is no good way to backup Chrome Storage. If I really wanted to productionize this extension I would need to pay for proper cloud storage (ie AWS S3), but even then, I have no interest in being responsible for securing user’s notes.
Time wasted looking for a storage options: 2 Hours; Time to code in Chrome Storage: 1.5 hours
Requirement #4: When viewing a Contact or Company page, if it has a note, show an indication.
This requirement was the first requirement that I found difficult to do from a coding perspective, and that difficultly arose from my fundamental misunderstanding of how extensions work. I kind of assumed that the extension was only running on the browser tab I was looking at, but I was wrong, it looks at all open tabs at once and I had to code logic to check what tab was showing. Once I figured this out, the rest was simple.
Time to code: 2.5 hours
Requirement #5: Publish my extension in the chrome store to the world, for free!
This was a royal pain, sure it's simple to get it listed but getting it listed right with all the proper art work is a huge headache. I'm a data guy, not a graphics guy! Anyhow, Google seems to implement some sort of AI to check if your images are good and that AI seems to be completely broken. These images are required to have the Extension show up in the chrome store. (I thought maybe google has people reviewing the images, but then I should see a pending review status, not an error.)
Here is the Image (Same image resized for both the Small and Large Tiles):
Here is the Error Message:
I'm stuck here and gave up. The App won't come up in search and I no longer care. (grrr...)
Time fiddling with images: 4 Hours
It took me less than a day and a half to build a decent chrome extension coming from no experience with them (and as a mostly data developer). If you wanted to use one for an integration it's not a bad option, but you will need to couple it with some outside services, say a call to Salesforce Rest APIs, some other APIs or even a local service that can get past the security restrictions of put in place by chrome. You can install the extension from the Chrome Store here.
This article is (very loosely) adapted from my book: Developing Data Migrations and Integrations with Salesforce.
Edit 1/1/2019: I got around the chrome store issue by publishing the same code as a new extension (and unpublished the original one), it seems that once the images a flagged as bad Google never goes back and checks if the pictures have been fixed or changed. So it seems that you only get one shot at the art work. (I have also updated the links in this article to point to the new extension).
I'm including the exact text of the error message below so this shows up when people search for the error message:
Small tile -440x280: View Current
The small tile image has been rejected due to the following reasons:
* Too much text
Please review the guidelines, upload a new image and republish.
Large tile -920x680: View Current
The large tile image has been rejected due to the following reasons:
* Too much text
* Text is too small
* Too much detail
Please review the guidelines, upload a new image and republish.