CODEWITHSUNDEEP
jsongoogle-chrome-extensioncross-browserfirefox-addonkango-framework
user1548936
user1548936

Reputation: 51

Use local files with Browser extensions (kango framework)

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).

Upvotes: 1

Views: 1809

Answers (3)

Abhijit Dhobale
Abhijit Dhobale

Reputation: 31

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'));

Upvotes: 0

Valentin Rusk
Valentin Rusk

Reputation: 670

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"}
    }
}

Upvotes: 2

KAdot
KAdot

Reputation: 2087

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

  1. Get CSS file contents
  2. 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);
});

Upvotes: 4

Related Questions