Question

我在Chrome扩展程序中嵌入了一个google表单。但是，由于：https://developer.chrome.com/extensions/faq#faq-persist-popups

每当有人点击扩展程序外部时，它会关闭扩展程序。有没有办法可以弹出我的对话框，以便用户可以自由点击活动标签并在表单中进行录制？

Answer 1

最好的方法是使用内容脚本插入自定义iframe，它将包含与常规弹出窗口相同的脚本/ html。 iframe会让你隔离html＆amp;样式表来自与现有网站的网页互动 iframe html文件应在manifest.json中列为web accessible resources。

单击浏览器图标时，内容脚本将处理iframe显示。

例如，Evernote web clipper正在使用此方法。

可能对您有帮助的代码示例：

1）在manifest.json文件中定义浏览器操作（不指示弹出属性）并将popup.html设为Web可访问：

{
    "name": "My extension",
    ...
    "browser_action": {
      "default_icon": {                      // optional
        "19": "images/icon19.png",           // optional
        "38": "images/icon38.png"            // optional
      }
    },
    "web_accessible_resources": ["popup.html"]
  }

2）创建包含html＆amp;的popup.html文件。弹出窗口的CSS;

3）创建background.js脚本，该脚本将侦听浏览器操作点击并将消息发送到内容脚本：

chrome.browserAction.onClicked.addListener(function (tab){
  chrome.tabs.sendMessage(tab.id, 'browser_action_click', function(callback_data) {
      });
})

4）在content_script.js收听浏览器操作中点击来自后台的邮件，然后显示/隐藏iframe：

var show = false;

var controller = {
  insertIframe: function (){
    var iFrame  = document.createElement("iframe");
    iFrame.setAttribute('style', '');
    iFrame.setAttribute('id', 'popup_iframe');
    iFrame.src  = chrome.extension.getURL ("popup.html");
    if (document.body) {
      //sometimes document body is not loaded yet. Just skip
      document.body.insertBefore(iFrame, document.body.firstChild);
    }
  },
  getIframe: function() {
    return document.getElementById('popup_iframe');
  },
  hideIframe: function() {
    var iframe = this.getIframe();
    iframe.style.display = 'none';
  },
  showIframe: function() {
    var iframe = this.getIframe();
    iframe.style.display = 'block';
  },
  listenForMessages: function() {
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
      switch(request) {
        case 'browser_action_click':
          show = !show;
          show ? this.showIframe() : this.hideIframe();
      }
      return true;
    }.bind(this));
  }
};

controller.insertIframe();
controller.listenForMessages();

Answer 2

考虑在没有弹出窗口的情况下制作它，但使用content script。

我们的想法是，点击您的扩展程序图标脚本会将表单插入到活动标签页的DOM中。

Answer 3

您可以使用chrome.windows.create与type: "popup"建立单独的窗口。

但请注意，没有办法让它保持最佳状态。

如何弹出chrome扩展

3 个答案: