循环中 chrome.tabs.create 的错误答案

【问题标题】：Bug with chrome.tabs.create in a loop循环中 chrome.tabs.create 的错误
【发布时间】：2013-10-21 19:43:58
【问题描述】：

在我的 Chrome 扩展程序 Copy All Urls 上，我开发了一种“粘贴”功能，可以打开剪贴板中的所有 URL，每个 URL 有一个标签。

但是这个功能不能正常工作，有时它工作正常，有时它只打开它应该打开的所有 URL 的几个子集。

我怀疑 Chrome API，更具体地说是 chrome.tabs.create 对这个错误负责，所以我写了一小段代码来测试它：

popup.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vendor/jquery-1.7.2_min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
</head>
<body>
    <button id="actionTest">Test</button>
</body>
</html>

popup.js：

jQuery(function($){
    $('#actionTest').click(function(e){
        var urlList = ["http://stackoverflow.com/","http://en.wikipedia.org/wiki/Main_Page","http://www.codinghorror.com/blog/","http://nodejs.org/","https://github.com/","http://wallbase.cc/","http://www.chromium.org/Home","http://www.photoshoptuto.com/?s=test+chrome+tabs","http://www.youtube.com/","https://www.tumblr.com/","http://www.imdb.com/","http://www.flickr.com/","http://kickass.to/","https://www.dropbox.com/","http://fr.slideshare.net/","http://www.deviantart.com/","http://www.livejournal.com/","http://ohnotheydidnt.livejournal.com/82624099.html","http://www.etsy.com/","http://www.mediafire.com/","http://www.foxnews.com/","http://www.foxnews.com/politics/2013/10/21/obama-addresses-problems-with-health-care-website/"];
        $.each(urlList, function(key, val){
            chrome.tabs.create({ url: val}, function(tab){
                // console.log('openned: '+tab.url);
            });
        });
    });
});

如您所见，urlList 包含 22 个 URL，但是当我按下测试按钮时，我并不总是打开 22 个新标签。

怎么了？谢谢

【问题讨论】：

请同时发布您的清单内容。您是否在控制台上收到任何错误（在您的后台或弹出窗口中）？
对不起，我忘了告诉源代码在 github 上可用：github.com/finalclap/CopyAllUrl_Chrome。这是 manifest.json：github.com/finalclap/CopyAllUrl_Chrome/blob/master/…
好的，我看看再回来:) 同时，我建议您考虑将背景页面转换为事件页面（更多信息 here)。

标签： jquery google-chrome loops google-chrome-extension tabs

【解决方案1】：

我自己没有测试过（由于时间不够），但我认为问题是这样的：

问题
您正在从 popup.js 创建选项卡。一旦新选项卡获得焦点，弹出窗口 (popup.html) 就会关闭/隐藏，并且任何 JavaScript 执行都会停止。这意味着将打开许多标签页，因为许多popup.js 设法创建在第一个标签页获得焦点。所以，有时会是全部，有时会是一些等等。

解决方案
解决方案是在后台页面（或更好的事件页面）中添加“标签创建”代码。例如：

// ...in popup.js
...
    chrome.runtime.getBackgroundPage(function(bgPage) {
        bgPage.openAllURLsInTabs();
    });
...

（当然，有很多可能的方法，例如消息传递等）

演示
出于演示目的，我整理了一个小扩展，可以打开您的 22 个 URL 是新选项卡。为简单起见，它没有弹出窗口，只是一个浏览器操作。
文件结构是这样的：

TestCX
     |__background.js
     |__jquery-1.7.2_min.js
     |__manifest.json

background.js：

var urlList = [
    "http://stackoverflow.com/",
    "http://en.wikipedia.org/wiki/Main_Page",
    "http://www.codinghorror.com/blog/",
    "http://nodejs.org/",
    "https://github.com/",
    "http://wallbase.cc/",
    "http://www.chromium.org/Home",
    "http://www.photoshoptuto.com/?s=test+chrome+tabs",
    "http://www.youtube.com/",
    "https://www.tumblr.com/",
    "http://www.imdb.com/",
    "http://www.flickr.com/",
    "http://kickass.to/",
    "https://www.dropbox.com/",
    "http://fr.slideshare.net/",
    "http://www.deviantart.com/",
    "http://www.livejournal.com/",
    "http://ohnotheydidnt.livejournal.com/82624099.html",
    "http://www.etsy.com/",
    "http://www.mediafire.com/",
    "http://www.foxnews.com/",
    "http://www.foxnews.com/politics/2013/10/21/obama-addresses-problems-with-health-care-website/"
];
chrome.browserAction.onClicked.addListener(function() {
    $.each(urlList, function(key, val) {
        chrome.tabs.create({ url: val }, function(tab) {
            console.log("Opened: " + tab.url);
        });
    });
});

manifest.json：

{
    "manifest_version": 2,

    "name": "Paste All URLs",
    "version": "2.5",

    "browser_action": {
        "default_title": "Paste many URLs"
    },
    "background": {
        "scripts": [
            "jquery-1.7.2_min.js",
            "background.js"
        ]
    },
    "permissions": [
        "tabs"
    ]
}

我希望这可以帮助您解决问题。如果不回来更多:)

【讨论】：

我自己已经为类似的问题苦苦挣扎了很长一段时间，所以我应该知道 :) （尽管如我的回答中所述，我自己没有测试过 OP 的代码，因此我有点接受对问题原因的“有根据的猜测”。）
非常感谢，好像是相关的解释，下班后试试。
好的，它工作正常，我将所有代码从 popup.js 移到 background.js 并使用消息传递 API 在弹出窗口中显示一些消息。
我很高兴它成功了。不要忘记我最初关于将背景页面转换为事件页面的评论。它们对资源更加友好且响应迅速:)
是的，我会在下一个版本中这样做。