javascript - window.open 在 chrome 扩展中返回 undefined

Question

我有基于内容脚本的 Chrome 扩展程序。我通过内容脚本中的弹出窗口启动登录过程。

我使用下面的代码打开一个弹出窗口，然后等到它关闭。

但是，我从 window.open 方法中得到一个“undefined”。有人知道为什么会这样吗？

loginwin 在下面的代码中是 undefined 尽管弹出窗口可以正常打开指定的 login_url。下面的代码是从我的内容脚本中调用的。

var loginWin = window.open(login_url, 'LoginWindow', "width=655,height=490");
console.log(loginWin);
// Check every 100 ms if the popup is closed.
var finishedInterval = setInterval(function() {
    console.log('checking if loginWin closed');
    if (loginWin.closed) {
        clearInterval(finishedInterval);
        console.log('popup is now closed');
        Backbone.history.navigate('index', true);
    }
}, 1000);

Answer 1

Note: This answer is obsolete. window.open() in a Chrome extension always returns either null (when the popup is blocked) or a window object. The information below only applies to very old (2012) versions of Chrome.

---

内容脚本无权访问页面的全局 window目的。对于内容脚本，以下内容适用:

• window 变量不引用页面的全局对象。相反，它指的是一个新的上下文，页面上的一个“层”。页面的 DOM 是完全可访问的。 ^{#execution-environment}

给定一个文档，包含 ‖ <iframe id="frameName" src="http://domain/"></iframe> :

• 对框架内容的访问受 Same origin policy 限制。页面的；您的扩展程序的权限不会放宽政策。
• frames[0]和 frames['frameName'] , (通常指包含全局 window 对象的框架)是 undefined .
• var iframe = document.getElementById('frameName');
  • iframe.contentDocument 返回一个 document 包含框架的对象，因为内容脚本可以访问页面的 DOM。此属性为 null 当应用同源政策时。
  • iframe.contentDocument.defaultView (指与文档关联的 window 对象)未定义。
  • iframe.contentWindow 未定义。

如您所见，window.open()不返回 Window实例(window.opener 也没有，等等)。

---

备选方案

• Inject the code in the page ，以便它在页面的上下文中运行。注意:仅当您正在操作的页面可以信任时才使用此方法。要在注入(inject)脚本和内容脚本之间进行通信，您可以使用:

  var login_url = 'http://example.com/';
  var event_name = 'robwuniq' + Math.random().toString(16); // Unique name
  document.addEventListener(event_name, function localName() {
      document.removeEventListener(event_name, localName); // Clean-up
      // Your logic:
      Backbone.history.navigate('index', true);
  });
  // Method 2b: Inject code which runs in the context of the page
  var actualCode = '(' + function(login_url, event_name) {
      var loginWin = window.open(login_url, 'LoginWindow', "width=655,height=490");
      console.log(loginWin);
      // Check every 100 ms if the popup is closed.
      var finishedInterval = setInterval(function() {
          console.log('checking if loginWin closed');
          if (loginWin.closed) {
              clearInterval(finishedInterval);
              console.log('popup is now closed');
              // Notify content script
              var event = document.createEvent('Events');
              event.initEvent(event_name, false, false);
              document.dispatchEvent(event);
          }
      }, 1000);
  } + ')(' + JSON.stringify(login_url+'') + ', "' + event_name + '")';
  var script = document.createElement('script');
  script.textContent = actualCode;
  (document.head||document.documentElement).appendChild(script);
  script.parentNode.removeChild(script);
  

• 使用 window.open() 从后台页面启动窗口.这将返回 window具有可靠 closed 的对象属性(property)。有关通信流程的更多详细信息，请参阅下一个要点。

• 来自内容脚本，pass a message到 background page .在后台页面中，使用 chrome.windows.create 打开一个窗口。在回调中，分配一个 chrome.tabs.onRemoved 和/或 chrome.tabs.onUpdated 事件。当这些事件监听器被触发时，它们应该自行删除，并使用 sendResponse 通知原始调用者(内容脚本)。 chrome.extension.onMessage的功能.