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?
Install Python 2.7
Inside the kango directory run, kango.py create knackforge_toolbar
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) {
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.
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,
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
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.