blog-banner

Writing Cross Browser Extension Using Kango Framework

  • CROSS BROWSER
  • EXTENSION
  • KANGO
  • TOOLBAR

I was embroiled when I first decided to write a cross-browser extension. Investigation revealed crossrider and kango are the better options. We chose kango for its simplicity and its responsive technical team.

In this write-up, I am going to cover the basics of writing a cross-browser extension without going into depth into the technical details.

What is Kango?

Kango is a browser extensions development framework that provides a developer-friendly API for cross-domain requests, user interface, browser events, tabs management, etc.

What do you need to know apart from basic HTML, JavaScript, and CSS to get started, well!! there are a couple of things. In Kango's parlance, they are as follows,
  • Background scripts
  • Foreground scripts
  • Content scripts
  • Message communication

How to Start?

  1. Install Python 2.7
  2. Inside the kango directory run, kango.py create knackforge_toolbar
  3. See the folder knackforge_toolbar, all our work will be done in src/common content.
extension_manifest.json: This file is the manifest file that holds details like addon name, version, author, background scripts, content script, and icon.

Background scripts:

Background script act as the backend data supplier. This is executed when you first open the web browser. Let us assume, we use main.js as the background script. You can place your javascript that needs to hold core data that your project depends on. For eg,
 
var mydata = '';
function loadMyData()() {
    kango.console.log('Loading data');
    var url = "MYURL/loadData.json";
    details = {
        url: url,
        method: 'POST',
        async: true,
        contentType: 'application/json',
        dataType: 'json',
        };
    kango.xhr.send(details, function(data) {
        merchantDeals = {
            data: []
            };
        if (data.status == 200 && data.response != null) {
            mydata = JSON.parse(data.response);
        } else {
            //////alert(data.status+"merchant loading problem");
            var e = "data loading problem" + data.response;
            kango.console.log(e);
        }
    });
}
loadMyData();
 
When the browser starts, the above function will get executed and have the data ready. Now the background script needs to supply this data to the foreground script.
 
kango.addMessageListener('giveData', function(event) {
        event.target.dispatchMessage('updateData', mydata);
});
 
This listens for a message event named giveData. Once it receives a call, it once again makes a message event to updateData to pass the data.

Foreground scripts:

The normal HTML file you use (for eg, the first page of the popup) contains included scripts, that I refer to here as foreground scripts. Assuming we have only one foreground file, popup.js which is loaded from popup.html,
 
kango.dispatchMessage('giveData', '');
kango.addMessageListener('updateData', function(event) {
    processData(event.data);
});
function processData(data) {
  var out = '';
  $.each(data, function(i, value) {
    out += "<div>" + value.title + "</div>";
  }
  $('#output').html(out);
}

Content scripts:

Content scripts are used to interact with the loaded web page. Including an entry like this in extension_info.json,
 
"content_scripts": ["content.js"],
 
will load content.js in the web page context. You can alter DOM, and dispatch events to the background script.
 
For eg:
 
var pageInfo = {
  domain: url_domain(document.location.hostname)
};
 
// dispatch a messsage event to background script
kango.dispatchMessage('MyDomain', pageInfo);
 
It sends the current hostname to the background script, which can do the required processing.

Working with local storage:

We have kango support for cookie handling. You can use kango.storage.getItem() and kango.storage.setItem(key, value) to store local data. It can store complex data structures as well.

Translation:

You can use kango.i18n.getMessage("My String") and need to have a locales folder with JSON files.
 
nl.json
{
  'My String' : 'My translated string'
}
 
You need to include "default_locale": "ge" in extension_info.json. Note I have to manually enforce this locale setting like
var info = kango.getExtensionInfo();
if(info['default_locale']) {
  kango.i18n.setCurrentLocale(info['default_locale']);
}
in background script as of kango v1.0.0.
 

Accessing local files:

 
To access local files, use this method,
 
function getUrl(url) {
  /** Firefox and safari don't need the front slash */
  if(url && url.indexOf("/") != 0 && kango.browser.getName() != 'firefox' && kango.browser.getName() != 'safari') {
    url = "/" + url;
  }
  /** Call kango's method to return file path inside extension directory  */
  return kango.io.getExtensionFileUrl(url);
}
 
getUrl('message.html') should open message.html inside your extension folder.
 

Building the code:

 
python kango.py build YOUR_PROJECT
 
You can find the packed extensions inside the out folder.
 

Real-time implementation:

 
You can try kango's samples as a starting point. Also read the official documentation at https://kangoextensions.com/docs//. I would suggest the Google Chrome browser for development. You can load kango's chrome output directory on the chrome extension page and just press "Reload" for every updated codebase. Make sure you are in developer mode in chrome. We have a lot of other things like tab change events, building for IE and safari, etc. that I will cover in my next post.
 

 

Get awesome tech content in your inbox