Timing chrome extension message passing

README.txt

You should be able to visit chrome-extension://<extension id>/meter.html and run the tests manually. Don't forget to add the extension ID to the top of meter.js.

The timer could be better with some sort of profiling extension; as it stands, it just uses Date().getTime() when it starts and stops and takes the difference.

background.js

chrome.runtime.onConnect.addListener(function(port) {
    console.assert(port.name == "meter");
    console.log("Port established.");
    port.onMessage.addListener(function(msg) {
        if(msg.counter == 1)
            console.log("First port message received.");
        port.postMessage({counter: msg.counter+1});
    });
});

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if(request.counter == 1)
            console.log("First message received.");
        sendResponse({counter: request.counter+1});
});

manifest.json

{
    "name": "Message Passing Timer",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Time how long it takes to send 1000 messages individually or over an established connection between the page and the background page.",
    "permissions": ["tabs"],
    "background": { "scripts":["background.js"]},
    "web_accessible_resources": ["meter.html", "meter.js"],
}

meter.html

<script src="meter.js"></script>
<table>
    <tr style="white-space: nowrap;">
        <td><button id="testRequest">Measure Requests</button></td>
        <td id="resultsRequest" style="text-align: right;">(results)</td>
    </tr>
    <tr style="white-space: nowrap;">
        <td><button id="testConnect">Measure Connection</button></td>
        <td id="resultsConnect" style="text-align: right;">(results)</td>
    </tr>
</table>

meter.js

var edExtId = "XXX"; // TODO: Replace this with the identifier for your extension.
function setChildTextNode(elementId, text) {
    document.getElementById(elementId).innerText = text;
}

// Tests the roundtrip time of sendMessage().
function testRequest() {
    setChildTextNode("resultsRequest", "running...");

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var tab = tabs[0];
        var start = new Date().getTime();
            chrome.runtime.sendMessage({counter: 1}, function handler(response) {
                if (response.counter < 1000) {
                    chrome.runtime.sendMessage({counter: response.counter}, handler);
                } else {
                    var stop = new Date().getTime();
                    setChildTextNode("resultsRequest", stop - start);
                }
            });
    });
}

// Tests the roundtrip time of Port.postMessage() after opening a channel.
function testConnect() {
    setChildTextNode("resultsConnect", "running...");
    var start = new Date().getTime();
    var port = chrome.runtime.connect({'name': 'meter'});
    port.postMessage({counter: 1});
    port.onMessage.addListener(function getResp(response) {
    if (response.counter < 1000) {
        port.postMessage({counter: response.counter});
        } else {
            var stop = new Date().getTime();
            setChildTextNode("resultsConnect", stop - start);
        }
    });
    //});
}

document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#testRequest').addEventListener(
'click', testRequest);
document.querySelector('#testConnect').addEventListener(
'click', testConnect);
});