Json 使用具有浏览器扩展名的本地文件（kango framework）

我正在使用“Kango框架”开发“浏览器扩展”(http://kangoextensions.com/)

当我想链接一个css文件时，我必须使用外部源（href=）http://mysite.com/folder/mysite.css)，我应该如何更改href使其成为插件文件夹中的源文件？（例如：href='mylocalpluginfolder/localfile.css'）

我尝试了“localfile.css”，并将该文件放在与JS文件相同的文件夹中。 $（“标题”）。附加（“”）

如何更改json文件以使其正常工作？我应该将文件声明为“扩展脚本”还是“内容脚本”

我很难找到对这个框架的支持，尽管管理员非常棒！

---

谢谢你的帮助。（请不要建议使用其他解决方案，因为我无法为IE编写插件，Kango是我唯一的选择）。我没有找到任何符合我需要的示例，因为他们网站上唯一可用的示例是链接到外部内容（圣诞树）。

如果你想从内容脚本在页面中添加CSS，你应该：

获取CSS文件内容

在页面中插入CSS代码

function addStyle（cssCode，id）{
if（id&&document.getElementById（id））
回来
var styleElement=document.createElement（“样式”）；
styleElement.type=“text/css”；
如果（id）
styleElement.id=id；
if（styleElement.styleSheet）{
styleElement.styleSheet.cssText=cssCode；
}否则{
appendChild（document.createTextNode（cssCode））；
}
var=null；
var heads=document.getElementsByTagName（“head”）；
如果（头长度>0）{
父亲=头[0]；
}否则{
if（document.documentElement的类型！=“未定义”）{
父元素=document.documentElement
}否则{
var body=document.getElementsByTagName（“body”）；
如果（体长>0）{
父亲=身体[0]；
}
}
}
if（父亲！=null）
父.子（styleElement）；
}
变量详细信息={
url:'styles.css'，
方法：“GET”，
async:true，
contentType:“文本”
};
kango.xhr.send（细节、函数（数据）{
var内容=数据。响应；
cango.console.log（内容）；
添加样式（内容）；
});

如果您想从内容脚本在页面中添加CSS，您应该：

获取CSS文件内容

在页面中插入CSS代码

function addStyle（cssCode，id）{
if（id&&document.getElementById（id））
回来
var styleElement=document.createElement（“样式”）；
styleElement.type=“text/css”；
如果（id）
styleElement.id=id；
if（styleElement.styleSheet）{
styleElement.styleSheet.cssText=cssCode；
}否则{
appendChild（document.createTextNode（cssCode））；
}
var=null；
var heads=document.getElementsByTagName（“head”）；
如果（头长度>0）{
父亲=头[0]；
}否则{
if（document.documentElement的类型！=“未定义”）{
父元素=document.documentElement
}否则{
var body=document.getElementsByTagName（“body”）；
如果（体长>0）{
父亲=身体[0]；
}
}
}
if（父亲！=null）
父.子（styleElement）；
}
变量详细信息={
url:'styles.css'，
方法：“GET”，
async:true，
contentType:“文本”
};
kango.xhr.send（细节、函数（数据）{
var内容=数据。响应；
cango.console.log（内容）；
添加样式（内容）；
});

我用另一种方法。 当我应该更改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"}
    }
}

我用另一种方式。 当我应该更改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"}
    }
}

---

根据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);
}

然后您可以调用common函数，使用KangoAPI添加您的本地css文件

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

---

根据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);
}

然后您可以调用common函数，使用KangoAPI添加您的本地css文件

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

---

我从来没有使用过Kango，我现在无法尝试，因为我没有安装Python……但是……你是想在弹出窗口中链接到css文件吗？在这种情况下，它看起来只会起作用。或者您正在尝试使用内容脚本修改页面，在这种情况下，kango似乎没有任何类似chromes

chrome.extension.getURL

，但它确实允许您使用

kango.xhr.send

从扩展名获取文件，这样您就可以通过这种方式获取文件内容，然后向页面添加样式标记并将文件内容插入其中。您尝试过Crossrider吗？它是一个免费的基于JavaScript的框架，可以快速轻松地为IE Fire开发跨浏览器扩展