使用本地文件与浏览器扩展（卷五框架）

我工作的一个“浏览器扩展”使用“卷五框架”（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是我唯一的选择）。我没有找到符合我需要的样本，因为他们网站上唯一可用的例子是链接到外部内容（圣诞树）。

来源

2012-07-24 user1548936

我从来没有使用卷五，我不能在此刻尝试，因为我没有安装Python的... .But ...你想链接到弹出窗口中的css文件吗？在这种情况下，它看起来就会起作用。或者你是否试图使用内容脚本来修改页面，在这种情况下，它看起来不像kango对于chromes'chrome.extension那样的任何内容。getURL'，但它确实允许你使用'kango.xhr.send'从你的扩展中获得一个文件，这样你就可以通过这种方式获得一个文件内容，然后向页面添加一个样式标签并将文件的内容插入到其中。 – PAEz 2012-07-24 14:39:55

你有没有试过Crossrider？它是一个免费的基于JavaScript的框架，可以快速轻松地为IE，Firefox，Chrome和Safari开发跨浏览器扩展。它的优点是有一个在线IDE，您可以在线开发您的扩展程序，而无需下载任何开发SDK！我想你会发现这非常简单并且有很好的记录。 – gkof 2012-07-25 18:58:13

Yansky，你说的不对 - 它是Popup API相关的代码。所有内容脚本都在沙箱中运行。 – KAdot 2012-07-25 19:07:05

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

获取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-25 07:19:01 KAdot

非常感谢，它效果很好！我如何做同样的注入本地图像？ tree.js示例有一个远程图像。 CSS文件包含多个用于背景的图像链接，你会怎么做？非常感谢你的帮助！ – user1548936 2012-07-25 18:45:47

您不能包含来自本地资源的图像，但此功能将在下一版本中实施。您应该立即使用远程图像。 – KAdot 2012-07-25 19:02:14

根据您要定位的IE版本，您可以使用数据网址将图像置于css文件中。他们不工作在IE 7及以下版本，而IE 8每张图片的最大值为32k，但IE9 +没有这样的限制。 http://en.wikipedia.org/wiki/Data_URI_scheme，http://css-tricks.com/data-uris/，http://dataurl.net/#about – PAEz 2012-07-26 10:13:13

进样CSS代码，我做的另一种方式。我有一个JSON包含指定的网站的样式，当我应该改变CSS。使用jQuery的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-16 13:03:55

作为每卷五框架结构，资源必须放置在common/res目录。

在src /常用文件夹中创建“资源”文件夹

添加CSS文件到它，然后使用

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

您必须添加此文件到head元素访问该文件的DOM。

这是通过以下方式完成的。

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

然后你就可以调用常用函数与卷五API添加本地的css文件

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

来源

2016-05-30 05:33:47

使用本地文件与浏览器扩展（卷五框架）

回答

相关问题