在 Chrome 扩展程序中打开和关闭一个简单的弹出窗口答案

【问题标题】：Open and Close a Simple Popup Window in Chrome Extension在 Chrome 扩展程序中打开和关闭一个简单的弹出窗口
【发布时间】：2016-01-27 05:17:34
【问题描述】：

我有一个 Chrome 扩展程序应该允许用户通过弹出窗口登录 Google，因为它不会显示在 iframe 中。我使用window.open() 执行此操作，效果很好，只是在用户登录后我无法关闭弹出窗口。

我一直在尝试使用chrome.windows.create 而不是window.open，但没有成功，希望一旦通过 URL 检测到他们已成功登录，我就能够关闭弹出窗口。

在popup_google.js我有简单的功能：

function login(login_url) {
    // var win = window.open(login_url, "windowname1", 'width=800, height=600');
    chrome.windows.create({'url': 'http://stackoverflow.com/', 'type': 'popup'}, function(window) { });
}

通过"onclick" 调用登录函数，如下所示：

<a href='#' onClick='login("https://accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=http%3A%2F%2Fdev.sbceoportal.org%2Fcastest%2Fwp-login.php&client_id=191567976061-9uksb59gedrtlsmoeo1fouov94370j96.apps.googleusercontent.com&scope=openid+email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&access_type=online&approval_prompt=auto&state=d96bdddc11%257Chttp%253A%252F%252Fdev.sbceoportal.org%252Fcastest%252Fportal%252F");' id="loginText"> Click here to login </a>

我这辈子都无法让chrome.windows.create 打开一个新的弹出窗口，即使是你在这里看到的最简单的形式，但window.open 就像一个魅力（我只是似乎无法得到它在 Chrome 中关闭）。

【问题讨论】：

您是否将选项卡权限添加到清单中？
不要在 html 中使用内联 js 处理程序，如果它位于扩展程序的弹出页面中。将其移动到单独的 popup.js 文件中，并将其加载到 popup.html 中，并在关闭 </body> 标记之前使用 <script src="popup.js"></script>。
好的，我可以添加标签权限并添加：
"optional_permissions": ["tabs"], "permissions": ["tabs"]，我仍然无法让这一行工作：chrome.windows.create({'url': 'stackoverflow.com', 'type': 'popup'}, function(window) { });

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

看起来您的 popup_google.js 文件是一个内容脚本。内容脚本不能使用 chrome.*API，除了少数 exceptions。这就是你根本不能使用 chrome.window API 的原因。在类似的说明中，向权限添加“选项卡”会利用 chrome.Tabs API，这不是为数不多的允许用于内容脚本的 chrome API 之一。尝试使用 matches: [/url pattern/] 字段来限制内容脚本将运行的 url，如 content script API 所示。

内容脚本可以完全访问 DOM，但不能访问网页定义的任何变量或函数。虽然您可以使用 window.open 创建自己的弹出窗口，但当您希望调用 window.close() 时，内容脚本无法确保它引用了正确的“窗口”变量，因为脚本会看到两个窗口：一个它使用 window.open() 创建并在页面的 DOM 上加载窗口。

尝试使用弹出窗口查看 Chrome 的 examples 并修改它们以实现您想要的功能。或者查看其他很棒的 SO explanations 来开发一个有效的弹出登录。

【讨论】：

感谢您的回复，我阅读了有关内容和背景脚本的更多信息。鉴于所有这些，我正在查看一些与我想做的事情相关的示例 - 定义一个可以检测何时单击 Google 登录链接的侦听器。不幸的是，当我安装我找到的两个示例的示例代码时，它不再起作用。这些是我检查过的：stackoverflow.com/questions/11996053/… 和 stackoverflow.com/questions/26390322/…
您知道这些示例做错了什么或需要更新/更改什么吗？谢谢！
呃，没有看到任何错误，我看到有关未定义函数之一的属性的错误“content_script.js:6 Uncaught TypeError: Cannot read property 'click' of undefined”在这个：stackoverflow.com/questions/26390322/… 你可以在这里看到我如何查找错误的截屏视频。就像我说的，我是新手，所以也许我没有找对地方。 screencast.com/t/1DyF0K7rewD 谢谢！
今晚我才能看你的截屏视频。但听起来您正在查看 Chrome 中的开发者工具控制台（按 F12 可访问），这是检查错误的正确方法。
听起来您尝试构建的功能比一个内容脚本可以处理的更复杂。我认为除了内容脚本之外，您还需要使用事件页面（即具有持久性：false 的背景页面）和消息传递，因为一旦关闭弹出窗口，内容脚本中的所有 JS 执行都将停止。遵循这个更简单的例子：stackoverflow.com/a/21340548/5463701 我自己做了没有错误。从那里，我认为您将能够构建您正在制作的弹出登录屏幕所需的功能。