通過瀏覽器擴展程序在網絡上每個頁面的頂部插入一個欄

Question

我正在編寫一個瀏覽器擴展程序，該擴展程序將在用戶訪問的每個頁面的頂部插入橫幅。 標語不得具有粘性，也不得阻止任何現有內容。 （ 我的Chrome擴展名 ）

目前，我是通過在每個頁面上插入的contentscript中的以下javascript將標語內容添加到DOM來實現的：

$content = $('<div id="lb-banner'>blah blah</div>');
$('html:first').addClass('lb-banner-added').prepend($content);

我要在正文之前添加內容，以使橫幅不受網站樣式的影響。 然后，為了在不影響任何潛在網站布局的情況下向下推頁面的主要內容，我使用以下樣式：

html.lb-banner-added {
   position: relative;
   margin-top: 32px;
}
#lb-banner {
   height: 32px;
   width: 100%;
   position: absolute;
   top: -32px;
   display: none;
   ... other styles...
}
.lb-banner-added #lb-banner { display: block; }

這將整個html向下推，而橫幅廣告的絕對位置要填充空白區域（在本例中為32px）。

我嘗試了其他方法將橫幅添加到每個頁面的頂部。 但是，此方法與到目前為止的大多數站點（甚至許多帶有粘性標頭的站點）兼容。

但是，這絕對不是最好的解決方案，因為我無法在Facebook，Twitter，linkedin（有效，但正在阻止某些內容），gmail / gcalendar / gdoc（有效，但導致某些內容移至窗口外）上運行，並且還有很多。 此外，此方法要求我指定內容的高度，目前還可以，但我希望使用更動態的方法。

---

筆記：

沒有上面顯示的樣式，橫幅仍將出現在每頁頂部。 但是，這樣做也會破壞許多網站（例如google.com）的布局。 例如，在Google上，橫幅將僅覆蓋黑色導航欄，並且在搜索結果之前將有多余的空格。

這是有問題的Chrome擴展程序https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima

Answer 1

如果將UI直接注入到DOM中，則不管您做什么，都永遠無法將其完全沙盒化，避免不必要的干擾。 例如，給定的頁面可能在頁面加載后異步加載元素，您幾乎無法做些阻止它使UI分流的事情。 同樣，除非您為UI元素顯式聲明每種CSS樣式，否則它們始終可以被外部定義的樣式覆蓋。

瀏覽器擴展中使用的一種常見方法是將UI嵌入到框架中，然后將其植入DOM的頂部。 這不是一個很好的解決方案，但是它將使您的樣式與不必要的干擾隔離。

在頁面內容中插入<iframe>可以嗎？