1

「Kango Framework」(http://kangoextensions.com/) を使った「ブラウザ拡張」に取り組んでいます。

CSS ファイルをリンクしたい場合、外部ソース (href='http://mysite.com/folder/mysite.css) を使用する必要があります。(例: href='mylocalpluginfolder/localfile.css')

「localfile.css」を試して、ファイルをJSファイルと同じフォルダーに入れました。$("head").append("");

jsonファイルを変更して機能させるにはどうすればよいですか? ファイルを「extended_scripts」または「content_scripts」として宣言する必要がありますか?

管理者は素晴らしいですが、このフレームワークのサポートを見つけるのに苦労しました! ご協力いただきありがとうございます。(IE のプラグインをコーディングすることはできず、Kango が唯一の選択肢であるため、他のソリューションの使用を提案しないでください)。彼らのサイトで利用できる唯一の例は外部コンテンツ (クリスマス ツリー) へのリンクであるため、私のニーズに一致するサンプルは見つかりませんでした。

4

3 に答える 3

4

コンテンツスクリプトからページにCSSを追加する場合は、次のことを行う必要があります。

  1. CSSファイルの内容を取得する
  2. ページにCSSコードを挿入
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);
});
于 2012-07-25T07:19:01.143 に答える
2

私は別の方法でそれを行います。CSS を変更する必要がある場合、指定された Web サイトのスタイルを含む JSON があります。jQuery の CSS を使用すると、CSS を適用する際に利点が得られます。インライン css を適用する css() とインライン css は、デフォルトの Web ページ ファイルで定義されたクラスと ID よりも優先され、インライン CSS の場合はそれらをオーバーライドします。私のニーズには合っていると思います。試してみてください。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"}
    }
}
于 2012-08-16T13:03:55.107 に答える
2

kango フレームワークの構造に従って、リソースはcommon/resディレクトリに配置する必要があります。

src/common フォルダーの下に「res」フォルダーを作成します。

css ファイルを追加し、次を使用してそのファイルにアクセスします。

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

このファイルを DOM の head 要素に追加する必要があります。

これは、次の方法で行われます。

// 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);
}

次に、共通関数を呼び出して、kango api を使用してローカルの css ファイルを追加できます。

// Add css.
addCss(kango.io.getResourceUrl('res/style.css'));
于 2016-05-30T05:33:47.997 に答える