Additional Blogs by Members
cancel
Showing results for 
Search instead for 
Did you mean: 
MattHarding
Active Contributor
739

Chrome extensions - Interesting...

Okay - It's the coffee corner, so I can be a bit more relaxed and go with Comic Sans font to begin with...So what is this quick blog all about? Glad you asked. It's about coming across a handy SAP Note extension by Li Huang (http://hackbo.com/2011/06/chrome-extension-for-finding-sap-notes/) sitting on a Basis' Chrome browser and wondering how hard a Chrome Extension would be; and whether I would actually use it if I tailor made it to my requirements!

So how hard is it

So I went to Google Chrome Extension developer page (https://developer.chrome.com/extensions/getstarted.html) and then started playing with the Hello World equivalent extension which showed me way too many pictures of people's cats and kittens. I quickly looked at the embedded HTML and Javascript (along with CSS, there's not much more to it); cleared out the contents, and created a mini page with 1 field and 1 label. My plan - To create a quick extension to allow me to do a Google search across all of SAP by using the search parameter site:sap.com. Quite a common thing I do actually.

This is where I discovered:

  1. JavaScript must be handled in a special way using eventing (no embedded JavaScript in the HTML page)
  2. You need to know about Chrome's API's to even open a tab page since permissions in the Extension are required to be called out.

So the quick answer is; if you're a hard core web programmer - this is trivial. For those who know the basics of HTML/JavaScript/CSS - you'll be fine but some Google searches will be required. For me - I'll place myself in the middle and say I spent more time playing around with CSS, finding icons and SAP hex colours than I did with code (way too much time actually considering I just wanted to spend a couple of hours doing this).

So what does the final code look like

I looked at publishing this on the Google Web Store but then realised; why do this when anyone can take this code and leverage it to tailor it specifically for themselves. That, and it would cost me $5 to register myself in order to publish it, and I would need to create my own icon (just wasn't going to happen). 

So then I thought, where can I put this code so everyone can see it. Yep - SCN first came to mind, but then lots of people are wisely using GitHub, so that's where I went instead. https://github.com/mattieharding/Chrome-Extension--sap.com-Search

Now a bonus of doing this is that since I did all of this in Notepad (I'm so old school); by putting it in GitHub, I ended up getting a formatted version of what I did for this blog!

So here's the mandatory manifest file describing the app:

{

    "name": "Search sap.com, get notes or just go to Service Marketplace",

    "version": "1.0",

    "manifest_version": 2,

    "description": "Search sap.com quickly",

    "browser_action": {

        "default_icon": "icon.png",

        "default_popup": "popup.html"

    },

    "permissions": [

        "tabs"

    ]

}


The only thing really interesting in this file is the permissions since that is a special statement saying that this extension requires access to tabs (so I can create a new tab for the search results).

Here's the popup.html file:

<html>

<head><script src="popup.js"></script>

<style>

body {

  background:#00267F;

  font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;

  font-size:14px;

  min-width: 170px;

}

label {

  color: #FFFFFF;

  display: block;

  font-weight: bold;

  text-align:center;

}

input {

  border: 2px solid white;

  border-radius:5px;

  outline: none;

  padding: 5px;

  text-align:center;

}

.notes {

  color: #FFFFFF;

  font-size:8px;

}

</style>

</head>

<body>

<div>

<label for="sapsearch">Google all of sap.com</label>

<input id="sapsearch" tabindex="1" value=""/>

</div>

<div>

<label for="notesearch">Search for note</label>

<input id="notesearch" tabindex="2" value=""/></div>

</div>

<div class="notes">Press Enter to Search</div>

</body>

</html>

Now if we remove all the style which is just to make it look less plain (it's not a great look anyway - BTW - Any visual designers want to go into GitHub and improve this?) - it really just consists of 2 labels and 2 fields (plus an explanation text). Note - I added an additional field to search for SAP Notes too, plus a description telling people to Press Enter as one of my design requirements was to not require the use of keyboard at all to run these queries.

Now the magic sauce is in the JavaScript which looks like this:

function onKeyPress(e) {

  if (e.keyCode == 13) {

    if (search.value != "") searchSAP();

    else searchNote();

  }

}

function searchSAP() {

  window.open("https://google.com/search?q=site:sap.com+" + encodeURIComponent(search.value));

}

function searchNote() {

  if (notesearch.value == "")

    window.open("https://service.sap.com/notes");

  else

    window.open("https://service.sap.com/sap/support/notes/" + notesearch.value +"?nlang=E" + encodeURIComponent(notesearch.value));

}

document.addEventListener('DOMContentLoaded', function () {

  search = document.querySelector('#sapsearch');

  notesearch = document.querySelector('#notesearch');

  document.body.addEventListener("keyup", onKeyPress, false);

  search.focus();

});

To read this, start at document.addEventListener. This step simply sets up a function which runs in place once the HTML page is loaded. Then we get a handle to the sap search field and the notesearch field. We register to listen for keyup events to enable us to detect the enter key (which calls onKeyPress function); then finally we make sure the cursor is moved to the search field.

So the pseudo code for the javascript is:

If enter is pressed {

     If text is entered in search field {

          open new tab and search Google with text and limit to site:sap.com.

     }

      else if note number is entered {

          open new tab and display note within Service Marketplace

     }

      else

     {

          just launch a new tab pointing at service.sap.com/notes

     }

}

Now you need an icon to really polish this, and since it's just my personal Chrome browser; I just searched on SAP for a 16x16pixel icon (png format) - and used that.

So once you have all that, you have a directory on your drive that contains the following; then you are right to load this into Chrome.

To load this into Chrome; type chrome:extensions into your address bar in Chrome, select developer mode; then select Load Unpacked Extension...

Final step (which is really important) is to add a short-cut key to open the extension. I used Alt-S as mine as I'm pretty sure I'll never use that and it's easy to remember because it is S for SAPSearch,

So how well does it work

So here's my blog as I work on it, now I press Alt+s


Suddenly feels very inception like in this blog, but moving on...So per design, I either enter a search term and press enter, tab across to the second field and time a note number, or just press search to go search in notes. I entered the term Chrome Extension and pressed enter and got a surprising number of results!

Hmm - Maybe I should have searched on this before I blogged...

That's it - Copy away and make your own handy short-cut search or whatever in Chrome

What are you still reading for...go and copy that text into your own notepad (or powerful web editor) and make life just that little bit easier for yourself. Thanks for reading.



6 Comments