Javascript 如何弹出chrome扩展

我在chrome扩展中嵌入了一个google表单。然而，由于：

每当有人在分机弹出窗口外单击时，它就会关闭分机。

---

是否有一种方法可以弹出我的对话框，以便用户可以自由单击活动选项卡并在表单中进行录制？

考虑不使用弹出窗口，而是使用内容脚本进行录制

---

其想法是，通过单击扩展的图标脚本，将向活动选项卡的DOM插入一个表单。

您可以使用

chrome.windows创建一个单独的窗口。使用
创建
，键入：“popup”

但是请注意，没有办法使其保持在顶部。
最好的方法是使用内容脚本插入一个自定义iframe，它将包含与常规弹出窗口相同的脚本/html。iframe将允许您将html和样式表与现有网站的网页交互隔离开来。

iframe html文件应列在
manifest.json
中

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

例如，正在使用这种方法

可帮助您的代码示例：

1） 在
manifest.json
文件中定义浏览器操作（不要指明popup属性），并将
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） 创建
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\u 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，我试过用这个，但不知怎么的，它不起作用。我单击浏览器按钮，但它没有创建iFrame。