Kango framework supports Greasemonkey-like user scripts. Content scripts run in the context of web pages and have access to Document Object Model (DOM). You can insert/modify/remove any element on web page, etc.
Content script can access some Kango APIs.
Simply create new JS file, open extension_info.json in your project common directory and add content_scripts section. Now your extension_info.json should look like:
{
"name": "ChristmasTree",
"version": "1.1.0",
"description": "Displays Christmas tree on each loaded web page",
"creator": "KangoExtensions",
"homepage_url": "http://kangoextensions.com/",
"content_scripts": [
"tree.js"
]
}
Content script supports user script headers (include and exclude rules). Add this header at the beginning of tree.js:
// ==UserScript==
// @name ChristmasTree
// @include http://*
// @include https://*
// @require jquery-1.9.1.min.js
// ==/UserScript==
You content script will be executed if it matches any include rule and not matches any exclude rule.
You can load jQuery in your content script simply adding @require key in user script header.
Let’s write code that inserts Christmas tree on each loaded web page:
var $ = window.$.noConflict(true); // Required for IE
var tree = $(document.createElement('img')).attr({
src: 'http://kangoextensions.com/misc/tree.png',
title: 'Christmas tree'
}).css({
position: 'absolute',
top: '10px',
left: document.body.clientWidth - 280 + 'px',
'z-index': '10000'
}).appendTo(document.body);
tree.click(function() {
alert('Tree click');
});
After building and installing extension in browser you can see Christmas tree on each loaded http web page.