我正在編寫一個(gè)瀏覽器擴(kuò)展，在用戶訪問(wèn)的每個(gè)頁(yè)面上插入一個(gè)橫幅。橫幅不得有粘性，不得阻擋任何現(xiàn)有內(nèi)容。(我的chrome擴(kuò)展)

目前，我正在通過(guò)contentscript中的以下javascript將橫幅內(nèi)容添加到DOM中，content script被插入到每個(gè)頁(yè)面中:

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

我把內(nèi)容放在正文之前，這樣橫幅就不會(huì)受到網(wǎng)站風(fēng)格的影響。然后，為了在不影響任何潛在的站點(diǎn)布局的同時(shí)，將頁(yè)面的主要內(nèi)容向下推，我使用了以下樣式:

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; }

這將整個(gè)html向下推，而橫幅則完全位于空白區(qū)域(在本例中為32px)。

我嘗試了其他方法在每個(gè)頁(yè)面的頂部添加橫幅。然而，這種方法與迄今為止的大多數(shù)網(wǎng)站兼容(甚至是許多帶有粘性標(biāo)題的網(wǎng)站)。

然而，這肯定不是最好的解決方案，因?yàn)槲覠o(wú)法在facebook、twitter、linkedin(可以工作，但屏蔽了一些內(nèi)容)、gmail/gcalendar/gdoc(可以工作，但導(dǎo)致一些內(nèi)容被移出了窗口)以及許多其他網(wǎng)站上使用它。 此外，這種方法要求我指定內(nèi)容的高度，目前這還可以，但我更喜歡更動(dòng)態(tài)的方法。

注意事項(xiàng):

如果沒(méi)有我上面展示的樣式，橫幅仍然會(huì)出現(xiàn)在每個(gè)頁(yè)面的頂部。然而，這樣做也將打破布局在許多網(wǎng)站，如google.com。例如，在谷歌上，橫幅將只覆蓋黑色導(dǎo)航條，在搜索結(jié)果之前會(huì)有額外的空間。

這是有問(wèn)題的chrome擴(kuò)展https://chrome . Google . com/web store/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima

如果您將UI直接注入到DOM中，無(wú)論您做什么，您都無(wú)法完全避免不必要的干擾。例如，一個(gè)給定的頁(yè)面可能會(huì)在頁(yè)面加載后異步加載元素，您幾乎無(wú)法阻止它妨礙您的UI。此外，除非您為UI元素顯式聲明每個(gè)CSS樣式，否則它們總是可以被外部定義的樣式覆蓋。

瀏覽器擴(kuò)展中使用的一種常見方法是將UI嵌入到框架中，并將其放在DOM的頂部。這不是一個(gè)很好的解決方案，但它會(huì)使你的造型免受不必要的干擾。

可以插入一個(gè)& ltiframe & gt進(jìn)入頁(yè)面& # 39；s內(nèi)容？

將你自己的css注入到一個(gè)網(wǎng)站中會(huì)引起問(wèn)題，如果你的css代碼中的東西和網(wǎng)站中的其他東西同名，這將會(huì)造成干擾，我建議使用非常獨(dú)特的名字，比如& quotawesome-facts-bjkhd-l b-banner & quot；