使用本地文件與瀏覽器擴展（卷五框架）

我工作的一個「瀏覽器擴展」使用「卷五框架」（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

使用本地文件與瀏覽器擴展（卷五框架）

回答

相關問題