javascript - 从 popup.html 和 popup.js 打开两个新选项卡

Question

我有一些代码，它允许用户检查复选框并在提交时打开与新选项卡中的复选框关联的网址。如果两个复选框都被选中，则会打开两个选项卡。它的工作原理与预期一致，看起来像:

document.getElementById('cbx').addEventListener(

    'submit', function checkForm(event) {
	
    //Prevents default action that would normally happen onsubmit
  	event.preventDefault();
    
    //Define the form element
    var form = document.getElementById("cbx");

    if (form.cb1.checked) {
        window.open('http://google.com/', '_blank');
    }
    if (form.cb2.checked) {
        window.open('http://yahoo.com/', '_blank');
    }

    return true;

});

<form id="cbx">
	
	<label for="cb1">G</label>
	<input name="cb1" type="checkbox">
	
	<label for="cb2">Y</label>
	<input name="cb2" type="checkbox">
	
	<input type="submit" value="Submit">
	
</form>

现在我想在我的 Chrome 扩展程序中包含此功能:

• HTML 部分位于 popup.html 中，
• Javascript 部分位于 popup.js 中。

问题是:如果两个复选框都被选中，则只会打开第一个带有 url 的 cb1 选项卡。

为什么会这样呢？如果选中所有复选框，则如何才能打开具有所有相应网址的选项卡？

Answer 1

打开并聚焦新选项卡将自动关闭弹出窗口。

有两种解决方案:

1. 打开除第一个非事件标签之外的所有标签

   const urls = [
     form.cb1.checked && 'http://google.com/',
     form.cb2.checked && 'http://yahoo.com/',
   ].filter(Boolean);
   urls.reduceRight((_, url, index) => chrome.tabs.create({url, active: !index}), 0);
   

2. 使用background script :从弹出窗口发送一条包含 URL 的消息，以便后台脚本通过 chrome.tabs.create 打开它们。这更可靠，因为另一个扩展可以激活通过第一种方法打开的非事件选项卡，从而关闭弹出窗口，这可能(也可能不会)在创建第二个选项卡之前发生。