Use local files with Browser extensions (kango framework)

Question

I'm working on a "browser extension" using "Kango Framework" (http://kangoextensions.com/)

When i want to link a css file i have to use external source (href='http://mysite.com/folder/mysite.css), how should i change the href to make is source from the plugin folder ? (ex: href='mylocalpluginfolder/localfile.css')

i've tried 'localfile.css' and putting the file in the same folder as the JS file. $("head").append("");

How should i change the json file to make it work ? Should i declare the files as "extended_scripts" or "content_scripts" ?

I've a hard time finding support for this framework, even though the admins are awesome ! Thanks for your help. (please do not suggest to use other solutions, because i won't be able to code plugins for IE and Kango is my only option for this). I didn't find any samples matching my need as the only example available on their site is linking to outside content (christmas tree).

Ive never used Kango and I cant try it at the moment as I dont have Python installed....But...Are you trying to link to the css file in your popup? In which case it looks like it would just work. Or are you trying to mod a page with a content script, in which case it doesnt look like kango has anything for that like chromes `chrome.extension.getURL`, but it does allow you to get a file from your extension using `kango.xhr.send` so you could get a files contents that way then add a style tag to the page and insert the contents of the file into it. — PAEz, Jul 24 '12 at 14:39
Have you tried Crossrider ? It is a free JavaScript based framework to quickly and easily develop cross-browser extensions for IE, Firefox, Chrome and Safari. The beauty of this is that there is an online IDE where you can develop your extension online without the need to download any development SDK! I think you will find this extremely easy and very well documented. — gkof, Jul 25 '12 at 18:58
Yansky, you are not right - it's Popup API related code. All content scripts runs in sandbox. — KAdot, Jul 25 '12 at 19:07

score 4 · Accepted Answer · answered Jul 25 '12 at 07:19

4

If you want to add CSS in page from content script you should:

Get CSS file contents
Inject CSS code in page

function addStyle(cssCode, id) {
    if (id && document.getElementById(id))
        return;
    var styleElement = document.createElement("style");
    styleElement.type = "text/css";
    if (id)
        styleElement.id = id;
    if (styleElement.styleSheet){
        styleElement.styleSheet.cssText = cssCode;
    }else{
        styleElement.appendChild(document.createTextNode(cssCode));
    }
    var father = null;
    var heads = document.getElementsByTagName("head");
    if (heads.length>0){
        father = heads[0];
    }else{
        if (typeof document.documentElement!='undefined'){
            father = document.documentElement
        }else{
            var bodies = document.getElementsByTagName("body");
            if (bodies.length>0){
                father = bodies[0];
            }
        }
    }
    if (father!=null)
        father.appendChild(styleElement);
}

var details = {
        url: 'styles.css',
        method: 'GET',
        async: true,
        contentType: 'text'
};
kango.xhr.send(details, function(data) {
        var content = data.response;
        kango.console.log(content);
        addStyle(content);
});

answered Jul 25 '12 at 07:19

KAdot

1,997
13
21

Thanks a lot it works great ! How do i do the same to inject local images ? the tree.js sample has a remote image. The CSS file contains multiple link to images for background, how would you do it ? Thanks so much for your help ! – user1548936 Jul 25 '12 at 18:45
You can't include images from local resources, but this feature will be implemented in next versions. You should use remote images right now. – KAdot Jul 25 '12 at 19:02
Depending on what version of IE you are targeting you could put your images in the css file using a data url. They dont work in IE 7 and below and IE 8 has a maximum of 32k for each image, but IE9+ doesnt have such a limit. http://en.wikipedia.org/wiki/Data_URI_scheme , http://css-tricks.com/data-uris/ , http://dataurl.net/#about – PAEz Jul 26 '12 at 10:13
Thanks a lot for the update KAdot, i'm looking forward to the next version :) When will you release it ? Thanks PAEz for the info, for now i cannot afford the IE support, soon i hope, but i've seen that it works great with other Chrome or FF so it's good news, thanks ! – user1548936 Jul 26 '12 at 18:56
Not working for me! I added this code in my content.js file but its not working. – Shivam Srivastava Feb 01 '16 at 05:58

score 2 · Answer 2 · answered Aug 16 '12 at 13:03

I do it another way. I have a JSON containing the styling for specified web sites, when i should change the css. Using jQuery's CSS gives an advantage on applying CSS, as you may know css() applying in-line css and inline css have a priority over classes and IDs defined in default web pages files and in case of inline CSS it will override them. I find it fine for my needs, you should try. Using jQuery:

// i keep info in window so making it globally accessible
function SetCSS(){
    $.each(window.skinInfo.css, function(tagName, cssProps){
      $(tagName).css(cssProps);
    });
    return;
}

// json format
{
    "css":{
        "body":{"backgroundColor":"#f0f0f0"},
        "#main_feed .post":{"borderBottom":"1px solid #000000"}
    }
}

score 0 · Answer 3 · edited May 30 '16 at 05:48

As per kango framework structure, resources must be placed in common/res directory.

Create 'res' folder under src/common folder

Add your css file into it and then access that file using

kango.io.getResourceUrl("res/style.css");

You must add this file into head element of the DOM.

This is done by following way.

// Common function to load local css into head element.
function addToHead (element) {
    'use strict';
    var head = document.getElementsByTagName('head')[0];
    if (head === undefined) {
        head = document.createElement('head');
        document.getElementsByTagName('html')[0].appendChild(head);
    }
    head.appendChild(element);
}

// Common function to create css link element dynamically.
function addCss(url) {
  var css_tag = document.createElement('link');
  css_tag.setAttribute('type', 'text/css');
  css_tag.setAttribute('rel', 'stylesheet');
  css_tag.setAttribute('href', url);
  addToHead(css_tag);
}

And then you can call common function to add your local css file with kango api

// Add css.
addCss(kango.io.getResourceUrl('res/style.css'));

Use local files with Browser extensions (kango framework)

3 Answers3