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

我正在編寫一個瀏覽器擴展插件，在用戶訪問的每個頁面的頂部插入橫幅。橫幅廣告不得粘滯，不得阻擋任何現有內容。（my chrome extension）通過瀏覽器擴展在網頁上的每個頁面頂部插入一個欄

目前我通過在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

來源

2013-05-21 Draco

如果你直接注入您的UI到DOM，它不會不管你做什麼，你永遠無法完全不必要的干擾沙盤它。例如，給定頁面可能會在頁面加載後異步加載元素，但您可以做的很少，以防止它將UI排除在外。除非您爲UI元素明確聲明每個CSS樣式，否則它們總是可以由外部定義的樣式覆蓋。

瀏覽器擴展中使用的一種常見方法是將UI嵌入到框架中，並將其植入DOM的頂部。這不是一個漂亮的解決方案，但它會隔離你的造型和不必要的干擾。

Is it okay to insert an <iframe> into the page's content?

來源

2013-05-21 21:49:54 QFDev

我知道沒有最好的解決方案。然而，有沒有比我目前用來支持更多頁面比例的更好的？我曾考慮過使用iframe，但是在iframe中包裝你訪問的每個頁面根本不可行。 – Draco

沒有什麼好方法可以完成你正在做的事情，並使它在每個站點都能正常工作。如果您想看看這是多麼困難，請下載適用於Chrome的Conduit工具欄並查看他們的代碼。他們必須爲數百個網站設置不同的代碼，並且仍然有網站被打破。 –

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

回答

相關問題