google-chrome-extension - float popup.html div

Question

我注意到 Buffer app对于 chrome，当单击扩展图标时， float 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 或 transition left/right position 来将元素滑入页面。