阻止頁面CSS影響Chrome擴展CSS

我有一個Chrome插件，它向每個頁面注入一個DIV，並且使用擴展中包含的樣式表格來設置DIV的樣式。在一些頁面上，注入的DIV看起來是有意的，但在其他頁面上則沒有。例如，一個StackOverflow站點，我的元素的box-shadow屬性被覆蓋，儘管它在我的CSS中被指定爲! important。阻止頁面CSS影響Chrome擴展CSS

當我檢查有問題的元素時，Chrome告訴我box-shadow屬性未應用（它顯示爲直通），但它沒有告訴我爲什麼：級聯樣式中沒有任何內容指定該屬性。

當我將box-shadow屬性直接添加到元素（沒有CSS類的好處）時，CSS檢查器視圖顯示屬性與元素相關聯，但效果仍然不存在。

修訂：代碼片段：

以下是我在我的代碼說明：

var $bar = $('<div>').addClass('pp_bar').css({ 
     'box-shadow': '-1px 0px 2px 1px #444', 
     '-moz-box-shadow': '-1px 0px 2px 1px #444', 
     '-webkit-box-shadow': '-1px 0px 2px 1px #444' 
    });

這裏是CSS：

.pp_bar { 
    height: 80%; 
    right: -4px; 
    top: 0px; 
    position: absolute; 
    box-shadow: -1px 0px 2px 1px #444 ! important; 
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! important; 
    -moz-box-shadow: -1px 1px 2px 1px #444 ! important; 
}

下面是Chrome會顯示爲計算式：

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px; 
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px 
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

您可以看到使用的值（#444 0px 0px 1.2000000476837158px 0px）與元素樣式（在我的代碼中分配;元素樣式會覆蓋類的值（它們是相同的）。如果沒有元素樣式設置，則會顯示類值。

的網站在此工作正常，瀏覽器報告在計算樣式如下：

-webkit-box-shadow: #444 -1px 1px 2px 1px; 
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px 
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

我應該嘗試下？

來源

2012-10-18 Gene Golovchinsky

我已經開始看到類似的東西，但對我來說，樣式表甚至沒有加載，只在某些網站上。你能否告訴你的div是否有應用於它的用戶樣式表？查看計算樣式下的樣式表列表：是否列出了您的CSS？ – Eyal

[如何真正隔離Google Chrome擴展中的樣式表？]（http://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension） – anderspitman

使用!important標誌設置元素本身的樣式。然後，您可以確定該風格正在應用於具有最高優先級的元素。

例子：

var div = document.createElement('div'); 
// Pick any of these (the first two lines have identical results) 
div.style.setProperty('box-shadow', '0 0 3px red', 'important'); 
div.style.cssText += 'box-shadow: 0 0 3px red !important'; 

// If the HTML is generated from a string: 
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';

非例子（不不工作！）：

div.style.boxShadow = '0 0 3px red !important'; // Does not work!

如果你不能設置內嵌樣式，嘗試實現了更高的specifity您CSS選擇器，例如通過包含一個ID。

來源

2012-10-18 09:02:49

我的理解是內聯樣式已經具有最高優先級，並且瀏覽器確實顯示內聯樣式沒有被刪除。（但沒有采取任何行動。）我對發生的事情感到困惑。 –

@GeneGolovchinsky顯示一個演示你的問題的小例子。我沒有時間從頭開始重新創建您的問題。 –

我添加了代碼片段。我不確定放置整個擴展是否實用，但如果有必要，我可以添加一個錯誤行爲的屏幕截圖。請注意，這種奇怪的行爲發生在多個網站上; stackoverflow就是一個例子。 –

阻止頁面CSS影響Chrome擴展CSS

回答

相關問題