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或过渡的左/右位置来将元素滑动到页面中。