floating popup.html div

Question

我注意到，Chrome瀏覽器的Buffer app與單擊擴展圖標時浮動div有點不同。這是如何實現的？

我不相信他們會在新窗口中執行此操作，因爲我沒有看到添加窗口正在生成。

基本上我需要的是當單擊圖標時顯示的厚盒。

任何有關如何做到這一點的洞察力將不勝感激。

Answer 1

他們正在使用來自該背景頁面的api，以偵聽瀏覽器操作按鈕被點擊時的點擊事件。

下面是該API頁面的鏈接：

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(tab.id, {'file': 'createPopup.js'}, function callBackStub(){}) 
}); 

createPopup.js

你的HTML將是一個字符串。我個人建議是這樣寫的：

var widgetHtml = 
    '<div id="main">    '+ 
    ' <p>some stuff goes here</p>'+ 
    '</div>'; 

然後爲你的HTML的增長，你可以做開頭引用的列編輯和結束'+

好吧，你會想要做的就是把現在該怎麼辦你的html在iframe中，但沒有設置src屬性。像這樣：

var iframe = document.createElement('iframe'); 
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2 
iframe.contentDocument.body.innerHTML = widgetHtml; 

爲什麼？所以你的東西不會從頁面的其餘部分採取樣式。

嗯，然後你可以做一個translateX或過渡的左/右位置來將元素滑動到頁面中。