Bug with chrome.tabs.create in a loop

问题

On my Chrome extension Copy All Urls, I've developed a "paste" feature to open all URL found in the clipboard, with one tab per url.

But this feature doesn't works properly, sometime it works fine, sometimes it opens only a few subset of all URL that it should open.

I suspect Chrome API, and more specifically chrome.tabs.create to be responsible for this mistake, so I wrote a little piece of code to test it :

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);
            });
        });
    });
});

As you can see, urlList contains 22 URL, but when I press the test button I not always have 22 new tabs openned.

What's wrong ? Thanks

回答1:

I haven't tested it myself (due to lack of time), but I believe that the problem is this:

The problem
You are creating the tabs from popup.js. As soon as a new tab receives focus, the popup (popup.html) is closed/hidden and any JavaScript execution stops. This means that there will be so many tabs opened as many popup.js managed to create before the first tab received focus. So, sometimes it will be all, sometimes some etc.

The solution
The solution is to mive the "tab-creating" code in the background page (or better yet event page). E.g.:

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

(Of course, there are many approaches possible, e.g. message-passing etc.)

The demo
For demonstration purposes, I have put together a tiny extension that opens your 22 URLs is new tabs. For simplicity, it does not feature a popup, just a browser-action.
The file structure is like this:

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"
    ]
}

I hope this helps you solve your problem. If not come back for more :)

来源：https://stackoverflow.com/questions/19503326/bug-with-chrome-tabs-create-in-a-loop

标签

jquery

google-chrome

loops

google-chrome-extension

tabs