鉻擴展 - 將div附加到不與Facebook一起工作的按鈕

我正在創建一個Chrome擴展，並且迄今已取得成功。作爲最後一項功能，當用戶點擊我的分機面板中的關於該部分時，我正嘗試附加一個div（顯示關於我的個人網站的小型非刺激性廣告）到當前打開的標籤頁的正文。我也得到了它的工作。鉻擴展 - 將div附加到不與Facebook一起工作的按鈕

但問題是，如果該頁面包含Facebook like或twitter follow widget，則此div不會附加到主頁面的主體標記。相反，它會附加到上述小部件的iframe中的body標籤。

當我檢查這些頁面的dom結構時，這些小部件在iframe中創建自己的html> body結構。這就是導致這個問題的原因。

我想這個div安裝到第一機身部件如下：

var mainbody = document.getElementsByTagName('body'); 
mainbody[0].appendChild(adDiv); --> adDiv = new element I created above this code with its own properties

通過上面的第二個說法，我希望它得到重視的第一個標籤，而不是到內標籤。

不幸的是，這也不起作用。我可以看到它連接到facebook/twitter部件而不是主部件。我在做什麼有什麼不對？

編輯

從@斯坦的評論我能夠修復與Facebook/Twitter的控件頁面的問題（即那些藉助iframe）。現在我的代碼如下所示：

document.body.appendChild(adDiv);

- 謝謝Stan。

但現在我正面臨另一個問題。在某些網站（如http://www.glassdoor.com/index.htm）div未出現在頁面中。實際上發生的事情是，div被附着到身體上，但同時它也被移除。只有在html檢查員的幫助下才能看到（在這種情況下，chrome的檢查員）。

div（adDiv）在標記中附着到body並消失。 就好像它無法將自己綁定到身體。結果：沒有任何內容出現在頁面中。

任何想法爲什麼會發生這種情況？它只發生在如上所述的少數網站中。

background.js

chrome.browserAction.onClicked.addListener(function(tab){ 
    chrome.tabs.sendMessage(tab.id,{clicked:1}); 
});

content.js

chrome.extension.onMessage.addListener(function(request,sender,sendResponse){ 
    if(request.clicked==1){ 
     /* Create adDiv and apply style to it using JS */ 
     document.body.appendChild(adDiv); 
    } 
}

來源

2012-10-28 Ivin

您需要提供一些無法正常工作的網站示例，因爲我無法重現它。我試過[this]（http://www.huffingtonpost.com/2012/10/30/hurricane-sandy-storm_n_2042815.html）和[this]（http://twitter.github.com/bootstrap/）但沒有運氣。在每一頁上只找到一個''。我也試着等待頁面完全加載（這樣我確信所有的社交小部件都已加載），但我仍然從document.getElementsByTagName（'body'）'中得到''。 –

你可以嘗試'document.body.appendChild'？ – Stan

@斯坦那伎倆。謝謝！但在某些網站（如http://www.glassdoor.com/index.htm），我可以看到div被連接並在同一瞬間被刪除。我注意到這使用鉻的HTML檢查器。我可以看到div在標記中附着到身體上，但同時被刪除。結果：沒有任何內容出現在頁面中。任何想法爲什麼？ – Ivin

對於你應該嘗試可能的document.body.appendChild問題的1-ST的一部分。 [事實證明，它運作良好。]

對於問題的第二部分，我做了一個測試擴展與您的代碼（只是添加了一些東西來定義div），它在http://www.glassdoor.com/index.htm完美的作品，那是我點擊操作按鈕後在頁面底部看到的div。請確保您的瀏覽器中沒有任何其他擴展程序干預 - 禁用所有其他擴展程序。下面是我如何定義DIV（這可能同樣重要）：

var adDiv = document.createElement('div'); 
adDiv.id = "idadv"; 
adDiv.style.width = "200px"; 
adDiv.style.height = "100px"; 
adDiv.style.display = "block"; 
adDiv.style.backgroundColor = "blue";

正如你說，偶爾出現的問題（我無法要麼重現它），我想這將是很難攔截它。作爲一種變通方法，你可以嘗試看DOM和每一個似乎缺少時間重新創建格，類似的東西：

setInterval(createDivIfDoesNotExist, 1000);

你也應該可能考慮的另一個展示爲你的自我的廣告，例如只顯示一個彈出這是通過清單綁定到瀏覽器動作，並且不會通過browserAction的事件偵聽器更改外部頁面。

來源

2012-11-04 12:37:34 Stan

我無法修復您的修補程序的第二個問題。該問題僅在該頁面上隨機發生。該頁面中唯一發生變化的就是Ad iframe。所以我猜它是由這些廣告小部件造成的。你對這種隨機行爲有什麼想法？ – Ivin

@goose，在答案中增加了一些想法。 – Stan

鉻擴展 - 將div附加到不與Facebook一起工作的按鈕

回答

相關問題