Chrome扩展程序消息队列

Question

I developing chrome extension, and after some additional scripts are almost done, I faced with messaging problem. I wrote some kind of test code, and noticed, that at a time, onMessage listener can process message only from one script. Here's testing code:

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(request.action);
    if (request.action == 'first') {
         sendResponse({ action: 'first_next', arg: 1 });
    } else
    if (request.action == 'second') {
        sendResponse({ action: 'second_next', arg: 1 });
    }

    return true;
});

chrome.tabs.executeScript(active_tab, {file: 'first.js'});
chrome.tabs.executeScript(active_tab, {file: 'second.js'});

This background script listens and sends response for each message.

first.js

function wait() {
    done('OK');
}

function done(result) {
    var msg = { action: 'first', result: result };
    chrome.runtime.sendMessage(msg, function(response) {
        if (response.action === 'first_next') {
            setTimeout(wait, 400);
        } else 
        {
            setTimeout(wait, 2000);
        }
    });
}

wait();

second.js

function wait() {
    done('OK');
}

function done(result) {
    var msg = { action: 'second', result: result };
    chrome.runtime.sendMessage(msg, function(response) {
        if (response.action === 'second_next') {
            setTimeout(wait, 400);
        } else 
        {
            setTimeout(wait, 2000);
        }
    });
}

wait();

So, console log should be like:

first
second
first
...
first
first
second
first
second
...

But, it is:

first
second
second
second
second
second
...

That says that I can process only one message in time. And i don't know how to solve my problem, maybe something like messaging queue (idk how to do this) or smth else ? Thanks in advance for any help.

Answer 1

The problem here isn't with the Chrome API. You have two functions with the same name injected onto the page. So basically the following happens:

1. You inject first.js and it executes done function
2. You inject second.js and it executes done function
3. done from second.js overwrites the defintion of done from first.js
4. Each time first.js calls done it will call the done as defined in second.js

To see a proof of this, change done in second.js to done2 and then execute the code. You should get the desired results.