StumbleUpon chrome擴展插件如何在google首頁導航欄上方插入div？

Question

我正在開發一個擴展，它將在所有網頁的頂部插入一個水平div。它適用於大多數頁面，但對於http://google.com，Google的導航欄顯示在我的頂部。 stumble的Chrome擴展有一個類似的功能，除了他們的橫向div顯示在谷歌的導航欄上方。我正在使用內容腳本來插入div。我試過body.prepend（），它似乎沒有做這項工作。 此外，我希望酒吧被固定在頂部，無論滾動位置。我把它作爲位置：固定，頂部：0％，但仍然沒有運氣。 任何幫助或指向正確的方向將不勝感激。

Answer 1

在處理這種情況時，請務必使用webkit檢查器中的計算式樣式框。可能需要一些時間才能找到正確的元素，造成造成問題的樣式，但這是值得的。

我前面加上一個div的身體在http://google.com和應用以下樣式：

element.style { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 35px; 
    width: 100%; 
    background-color: red; 
} 

我注意到，紅色是從落後於谷歌的導航欄戳出來，所以我想它可能是一個Z指數的問題。

我我的預謀div的z-index的設置爲99999，並出現瞭如預期。經過進一步調查，我發現Google的div＃gbx3的z-index爲990，其中的導航鏈接的z-index爲991.你不想掩蓋Google導航欄，所以我們將不得不設置一些自定義樣式。

如果你的風格谷歌的DIV #mngb到

element.style { 
    position: absolute; 
    top: 35px; 
} 

這將推動谷歌的導航欄下來，但不會移動任何頁面上的其他人。

這應該足以讓你開始。這不是完美的，它不能處理任何其他內容，也不適用於任何其他網站，但這對您而言是一個好的開始。