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或过渡左/右位置将元素滑入页面。

浮动popup.html div

1 个答案: