google-chrome-extension - 浮动 popup.html div

Question

我注意到当单击扩展图标时，用于 chrome 的Buffer 应用程序对浮动 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 或转换左/右位置以将元素滑入页面。