1

我正在使用“Kango Framework”（http://kangoextensions.com/）开发“浏览器扩展”

当我想链接一个 css 文件时，我必须使用外部源（href='http://mysite.com/folder/mysite.css），我应该如何更改 href 以使其成为插件文件夹中的源？（例如：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 时，我有一个包含指定网站样式的 JSON。使用 jQuery 的 CSS 在应用 CSS 方面具有优势，因为您可能知道 css() 应用内联 css 和内联 css 优先于默认网页文件中定义的类和 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);
}

然后你可以调用通用函数来添加你的本地 css 文件与 kango api

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