將css樣式表應用於Firefox擴展

我遇到了將CSS樣式應用於我的Firefox擴展元素的問題。將css樣式表應用於Firefox擴展

chrome 
    -content ->attach.xul,cap.js 
    -skin->overlay.css

在cap.js我創建一個表，並將其附加到頁面的主體。我試圖設計這張桌子。但是，當我測試這個擴展時，我發現擴展中的表格和按鈕元素根據我訪問的網站而改變。我已經將它用作內聯樣式;但設計仍在改變。

我試圖爲這個擴展註冊一個皮膚，但樣式沒有應用。

在attach.xul我有這樣的：

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://capture/skin/overlay.css" type="text/css"?>

清單文件，我有這樣的：

content  capture chrome/content/ 
overlay chrome://browser/content/browser.xul chrome://capture/content/attach.xul

來源

2012-03-26 VKGS

我理解正確嗎？你應用'overlay.css'到瀏覽器XUL（間接地，通過'attach.xul'），但期望它適用於內容頁面？ – 2012-03-26 08:18:18

如果你的目標是造型內容的網頁，而不是添加樣式的用戶界面，您擴展名，nsIStyleSheetService是你的朋友。事情是這樣的：

Components.utils.import("resource://gre/modules/Services.jsm"); 
var styleSheetService = Components.classes["@mozilla.org/content/style-sheet-service;1"] 
            .getService(Components.interfaces.nsIStyleSheetService); 
var uri = Services.io.newURI("chrome://capture/skin/overlay.css", null, null); 
styleSheetService.loadAndRegisterSheet(uri, styleSheetService.USER_SHEET);

確保讓應用的樣式overlay.css使用@-moz-document只有他們屬於網頁 - 這些規則將適用於所有網頁（甚至是瀏覽器的XUL），否則。

來源

2012-03-26 08:23:01

謝謝弗拉基米爾，但我試圖爲我的擴展元素應用樣式。這個擴展包含表格，輸入和按鈕。所以我有樣式表中的元素樣式[overlay.css]，我想使用它，因爲我試過上面的方法，它沒有奏效。 – VKGS 2012-03-26 09:19:32

@Sekar：從您的描述中可以看出您正在將該表格注入網頁 - 然後它不再是「我的擴展元素」。 – 2012-03-26 09:55:17

我是這個類別的新手[開發擴展]。所以我選擇了這種方法。但通過做這種影響我的餐桌設計的外部網站設計，即使我給內聯樣式。是否有任何方法可用來創建表格.. – VKGS 2012-03-27 04:59:43

將css樣式表應用於Firefox擴展

回答

相關問題