使用Firefox擴展插入CSS

我正在構建一個Firefox擴展，它將HTML元素添加到網站的某些頁面。我想讓它插入一個自定義CSS文件來設置這些元素的樣式。如果我在頁面上插入具有CSS權限的標籤，它就可以工作，但這不是理想的解決方案。使用Firefox擴展插入CSS

有沒有辦法讓它加載和解析一個CSS文件，就好像我在標頭中使用了標籤，還是我堅持以某種方式內聯？

2010-04-21 MattBelanger

Firefox Extension Developers Toolbar允許您在CSS菜單項中「添加用戶樣式表」，並立即將樣式應用到加載的頁面。這似乎是你想要的功能。也許你可以在那裏偷偷溜走。 https://addons.mozilla.org/de/firefox/addon/60 – 2010-04-22 10:39:50

如果你內嵌它，那麼瀏覽器會自動加載並解析它。如果它給你想要的效果，我不會看到這種方法的問題。順便說一下，這是一個可能的重複http://stackoverflow.com/questions/2731736/how-can-a-firefox-extension-inject-a-local-css-file-into-a-webpage – MatrixFrog 2010-09-24 23:01:38

chrome：//將無法正常工作，因爲您插入的頁面不允許訪問其域外的文件（包括chrome URI）。即使您是插入鏈接的鏈接也是如此，因爲鏈接仍在目標頁面的上下文中執行。相反，您有兩種選擇：

您可以在清單中定義資源協議別名，然後使用資源URI訪問CSS。例如，下面的chrome.manifest用於將允許你插入的CSS爲resource://myextresource/myfile.css：
content myext content/
resource myextresource content/css/
更多信息，請參見MDN Chrome registration。有關類似問題，請參閱How can a Firefox extension inject a local css file into a webpage?。

或者，您可以使用以下方式將CSS添加爲USER_SHEET。這將使您的CSS在所有頁面上都可用，因此請確保使用非常獨特的選擇器。這種方法的一個警告是頁面CSS優先於用戶表單。您可以使用！important來覆蓋它，但如果使用！頁面，CSS仍然可以勝過你！

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"] 
    .getService(Components.interfaces.nsIStyleSheetService); 
var ios = Components.classes["@mozilla.org/network/io-service;1"] 
    .getService(Components.interfaces.nsIIOService); 
var uri = ios.newURI(url, null, null); 
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

來源

2011-03-22 17:36:32 studgeek

什麼是' url'in'var uri = ios.newURI（url，null，null）;'。我想要實現的是在特定頁面中插入jQuery UI自定義CSS。我能否使用你所建議的第二個選項來做到這一點？我可以使用FF插件生成器（不使用SDK）嗎？ – 2012-03-05 06:53:23

url是本地CSS文件的路徑。我相信你可以使用resource：//，chrome：//，file：//，因爲你是從可信的代碼調用它的。 – studgeek 2012-10-09 12:05:35

我沒有親自使用過插件生成器，但它聲明你可以在本頁底部調用XPCOM API（這是我在第二個例子中展示的） - https://addons.mozilla.org/ EN-US /開發商/文檔/ SDK /最新的/ dev引導/引導/ SDK-VS-xul.html。 – studgeek 2012-10-09 12:10:06

使用Firefox擴展插入CSS

回答

相關問題