如何弹出Chrome扩展程序

Question

我在Chrome扩展中嵌入了一个Google表单。然而，因为：https://developer.chrome.com/extensions/faq#faq-persist-popups 每当有人点击扩展弹出窗口外部时，它就会关闭扩展。有没有办法让我的对话框弹出，以便用户可以自由地点击活动选项卡并在表单中进行记录？

- Arpan Das

Answer 1

最好的方法是使用内容脚本插入自定义iframe，其中包含与常规弹出窗口相同的脚本/HTML。 iframe将使您能够将html和样式表与现有网站网页的交互隔离开来。
在manifest.json中，应将iframe html文件列为web可访问资源。

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

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

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

1）在您的manifest.json文件中定义浏览器操作（不要指定popup属性），并使popup.html成为可访问的网页：

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

2) 创建popup.html文件，其中包含弹出窗口的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();

- Dmitri Pavlutin

---

谢谢Dmitri。你能帮我提供一些示例代码吗？ - Arpan Das

嗨，Dmitri， 我尝试使用这个，但不知何故它不起作用。我点击浏览器按钮，但它没有创建iFrame。 - Arpan Das

Answer 2

考虑使用内容脚本而非弹窗。点击扩展图标后，脚本将向活动标签页的DOM插入一个表单。请注意保留HTML标记。

- Anton Gusar

Answer 3

你可以使用chrome.windows.create创建一个独立的窗口，其中type: "popup"。

但是请注意，没有办法使其保持在顶部。

- Xan