Queuebert

The Chrome extension paradigm is sandboxed. iframes and browser-tabs cannot directly communicate with each other. They must use a background script to mediate communication between them.

In a prior post, I advocate using a queue-based approach to deal with this annoyance:

https://github.com/bcoe/DoloresLabsTechTalk

Queuebert is a library designed to simplify building Chrome extensions using a queue-based approach.

Server

You create one instance of a server in the background.html.
The server handles queuing up messages for the content scripts.

var server = new Queuebert.Server();

Client

You create a client within your content scripts. The client is used to communicate between the sandboxed JavaScript environments.

The client is used to dispatch messages to other tabs, iframes, and to the background script.
The client has a delegate registered with it. The delegate receives messages from other clients in the system.

var client = new Queuebert.Client({
	identifier: 'client',
	delegate: delegate
});

identifier a tab with multiple iframes within it can potentially run multiple clients. The identifier is used to differentiate these clients.
delegate the client automatically checks for inbound messages on a set interval. Messages are automatically dispatched to the delegate.

Example Delegate

var delegate = {
	receivedMessage: function(clientId, clientTabId, body) {
		console.log(body.message);
	}
};

The receivedMessage message method will be executed if the following message was dispatched by another client:

client.sendMessage({
	action: 'receivedMessage',
	tabId: clientTabId,
	to: 'client',
	body: {message: 'a message'}
});

The clientId and clientTabId variables can be used to dispatch a message back to the originating client. The body is the body of the message dispatched by the originating client.

BackgroundClient

To keep the queue-based paradigm consistent, you can create an instance of a BackgroundClient in your background.html.

The behaviour of a background client is identical to clients in content scripts except, seeing as the background script has no tab.id, background clients have the special tab.id background.

Creating a BackgroundClient

var client = new Queuebert.BackgroundClient({
	delegate: delegate,
	server: server
});

delegate the delegate provided to a background client is identical to a delegate provided to other clients.
server a BackgroundClient requires that the Server instance be provided as a dependency.

Sending a Message to a BackgroundClient

client.sendMessage({
	action: 'echo',
	tabId: 'background',
	to: 'background',
	body: {message: 'Hello World!'}
});

The Example

In the /example folder, there are examples of each of the concepts discussed.

The Queuebert project is a fully functional Chrome Extension. Install it, to see things in action.

Testing

Queuebert uses node.js for unit testing. run node test/index.js to execute the test suite.